叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 38850|回复: 12
打印 上一主题 下一主题

CSS高级教程

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
跳转到指定楼层
楼主
发表于 2014-10-22 23:52:02 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
本帖最后由 rain 于 2014-12-15 11:56 编辑

visibility 属性
visibility 属性规定元素是否可见。
提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
说明
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
可能的值
描述
visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit规定应该从父元素继承 visibility 属性的值。

CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:

<script language="JavaScript">
function toggleVisibility(me){
  if (me.style.visibility=="hidden"){
   me.style.visibility="visible";
   }
  else {
   me.style.visibility="hidden";
   }
  }
</script>


<div style="position:relative">
第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div><div>因为visibility会保留元素的位置,所以第二行不会移动.</div>

效果:

第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。
因为visibility会保留元素的位置,所以第二行不会移动.

注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果:

例:

<script language="JavaScript">
function toggleDisplay(me){
  if (me.style.display=="block"){
   me.style.display="inline";
   alert("文本现在是:'inline'.");
   }
  else {
   if (me.style.display=="inline"){
    me.style.display="none";
    alert("文本现在是:'none'. 3秒钟后自动重新显示。");
    window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
    }
   else {
    me.style.display="block";
    alert("文本现在是:'block'.");
    }
   }
  }
</script>


<div>在<span id="blueText"
style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

效果:

在文字上点击来查看效果.

disabled="disabled"   禁用 input 元素    true   /  false     是否可见
display:none  不可见
hide()隐藏
回复

使用道具 举报

47

主题

113

帖子

1767

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1767
13#
发表于 2017-6-8 22:07:19 | 只看该作者
admin 发表于 2017-6-8 21:39
flex: 弹性布局。Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。[/backc ...
项目的属性

以下6个属性设置在项目上。
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {  order: <integer>;}

flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {  flex-grow: <number>; /* default 0 */}
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {  flex-shrink: <number>; /* default 1 */}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {  flex-basis: <length> | auto; /* default auto */}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
回复

使用道具 举报

47

主题

113

帖子

1767

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1767
12#
发表于 2017-6-8 21:39:25 | 只看该作者
flex: 弹性布局。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{  display: flex;}
行内元素也可以使用 Flex 布局。
.box{  display: inline-flex;}
Webkit 内核的浏览器,必须加上-webkit前缀。
.box{  display: -webkit-flex;  display: flex;}
有6个属性:
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap属性定义,如果一条轴线排不下,如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认):不换行。wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
该属性可能取6个值。
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。
出处:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
11#
 楼主| 发表于 2015-4-17 09:45:04 | 只看该作者
nth-child选择器
隔行换色效果
网址:http://jingyan.baidu.com/article/02027811aa85cc1bcc9ce522.html
nth-child() 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
在这里,我们为奇数和偶数 p 元素指定两种不同的背景色:
  1. p:nth-child(odd)
  2. {
  3. background:#ff0000;
  4. }
  5. p:nth-child(even)
  6. {
  7. background:#0000ff;
  8. }
复制代码
指定第几个子元素:
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

指定偶数序号元素:
:nth-child(2n)

复杂序号自动指定可以使用公式:
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:
  1. p:nth-child(3n+0)
  2. {
  3. background:#ff0000;
  4. }
复制代码

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
10#
 楼主| 发表于 2014-12-22 18:22:47 | 只看该作者
本帖最后由 rain 于 2015-6-4 16:41 编辑

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。


WebKit浏览器或移动端的页面

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
  • overflow : hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp: 2;
  • -webkit-box-orient: vertical;

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

例如:

  • p {
  •     position:relative;
  •     line-height:1.4em;
  •     /* 3 times the line-height to show 3 lines */
  •     height:4.2em;
  •     overflow:hidden;
  • }
  • p::after {
  •     content:"...";
  •     font-weight:bold;
  •     position:absolute;
  •     bottom:0;
  •     right:0;
  •     padding:0 20px 1px 45px;
  •     background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
  • }

这里注意几点:

  • height高度真好是line-height的3倍;
  • 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
  • IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
  • 要支持IE8,需要将::after替换成:after;
JavaScript 方案

用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:

1.Clamp.js

下载及文档地址:https://github.com/josephschmitt/Clamp.js
使用也非常简单:

  • var module = document.getElementById("clamp-this-module");
  • $clamp(module, {clamp: 3});
2.jQuery插件-jQuery.dotdotdot

这个使用起来也很方便:

  • $(document).ready(function() {
  •         $("#wrapper").dotdotdot({
  •                 //        configuration goes here
  •         });
  • });

下载及详细文档地址:https://github.com/BeSite/jQuery.dotdotdothttp://dotdotdot.frebsite.nl/

参考:
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/


回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
9#
 楼主| 发表于 2014-12-22 18:15:57 | 只看该作者
CSS透明属性详解
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:
.transparent_class {        filter:alpha(opacity=50);        -moz-opacity:0.5;        -khtml-opacity: 0.5;        opacity: 0.5;}
上面的几个属性分别是:
  • opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
  • filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
  • -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
  • -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
CSS透明度继承问题
但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,比如本站的一个效果:
即使你又为子元素指定透明度为1也是无效的。
对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。
还有“取消透明度继承”的说法,这个说法是不太准确的,据我个人所知,没有任何取消透明度继承的方法。只能说,当想要实现“多个元素覆盖,只让指定的元素透明”时,可以使用的一些Hack。
搜了一下,找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题,有兴趣的朋友可以看看。原理很简单,添加一个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位,实现覆盖。
回复

使用道具 举报

47

主题

113

帖子

1767

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1767
8#
发表于 2014-12-11 20:24:57 | 只看该作者
position 属性
描述
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。
回复

使用道具 举报

47

主题

113

帖子

1767

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1767
7#
发表于 2014-12-11 20:22:45 | 只看该作者
cursor 属性

值        描述
url       
需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default        默认光标(通常是一个箭头)
auto        默认。浏览器设置的光标。
crosshair        光标呈现为十字线。
pointer        光标呈现为指示链接的指针(一只手)
move        此光标指示某对象可被移动。
e-resize        此光标指示矩形框的边缘可被向右(东)移动。
ne-resize        此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize        此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize        此光标指示矩形框的边缘可被向上(北)移动。
se-resize        此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize        此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize        此光标指示矩形框的边缘可被向下移动(南)。
w-resize        此光标指示矩形框的边缘可被向左移动(西)。
text        此光标指示文本。
wait        此光标指示程序正忙(通常是一只表或沙漏)。
help        此光标指示可用的帮助(通常是一个问号或一个气球)。
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
6#
 楼主| 发表于 2014-12-11 16:26:14 | 只看该作者
ie -ms-interpolation-mode: bicubic 属性详解
img { -ms-interpolation-mode: bicubic; }
这个在做实时缩放图片、缩略图的时候用处挺大。IE7 Only


IE7.0自带样式属性-ms-interpolation-mode


刚过完火星,从骨灰级哪里淘到的沙子。

以前很少写样式的体验,今天来了兴致,那就给大伙共享一下。

也不管是否还有火星鸡

iE7.0中自带的-ms-interpolation-mode属性可以解决缩放失真问题

如下是测试代码

.img01,.img02,.img03{float:left;padding:0 5px;text-align:center;}
.img01{-ms-interpolation-mode:Nearest-Neighbor}
.img02{-ms-interpolation-mode:normal;}
.img03{-ms-interpolation-mode:bicubic}

ps:不过这也与图的大小,有关系,500以上的再定义放大,可能明显,小图再放大,好像不太明显

ps:好像很少用到这个属性,再者,他只是ie的自带属性
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
5#
 楼主| 发表于 2014-12-10 17:12:55 | 只看该作者
本帖最后由 rain 于 2014-12-15 11:48 编辑

<link href="print.css" rel="stylesheet" type="text/css" media="print"/>     media="print" 表示该样式表仅应用于打印内容。 默认情况下其值是screen

<hr/> 水平线,两种方式定义样式:
style="border-top:1px solid #ff9900; "        或者     <hr size=”1″ color=”#ff9900″/>
回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-11-1 07:45 , Processed in 0.353503 second(s), 22 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表