css中那些令人迷惑的东西

作者：tiancai啊呆

CSS很简单也很常用，但是经常有一些相似的属性让人傻傻分不清楚，今天列举一下自己经常分不清楚的一些属性。（使用简单的例子对他们进行区分说明）

• 关于nth-child与nth-of-type。
  例子：

//html 部分
<div>
    <h4>我是H4</h4>
    <p>我是第一个段落</p>
    <p>我是第二个段落</p>
</div>

//css部分
p:nth-child(2) {
    color: red;
}

p:nth-of-type(2) {
    color: greenyellow;
}

结果：

结果

通过结果我们可以知道，它们是有区别的。区别如下：
p:nth-child(2)的条件是：父元素的第二个子元素且该元素是p元素。如果第二个子元素不是p元素，则样式无效。
p:nth-of-type(2)的条件是：父元素下的第二个p元素。

• 关于不透明度
  我们使用opacity来设置元素的不透明度，0表示完全透明，1表示完全不透明。对于IE8及其以下的浏览器来说，我们需要使用滤镜来实现透明的效果。
  代码如下：

  opacity: 0.5;     //值为0-1之间
  filter:Alpha(opacity=50);  //值为0-100之间

• 关于渐变
  渐变主要分为线性渐变和径向渐变。
  1. 线性渐变
     语法：linear-gradient(direction, color-stop1, color-stop2, ...);
direction：表示渐变方向，可以为top，left，right，bottom关键字或者一个角度。
     color-stop：表示渐变的颜色和位置，值可以是颜色值或者带着位置的颜色值，如red 10%
     示例：

  /*从左到右的渐变*/
  background: -webkit-linear-gradient(left, red , blue); 
  background: -o-linear-gradient(left, red, blue); 
  background: -moz-linear-gradient(left, red, blue);
  background: linear-gradient(to right, red , blue); 
  /*从左到右的渐变, 部分浏览器90deg将创建一个从下到上的渐变*/
  background: -webkit-linear-gradient(90deg, red , blue); 
  background: -o-linear-gradient(90deg, red, blue); 
  background: -moz-linear-gradient(90deg, red, blue);
  background: linear-gradient(90deg, red , blue); 
  

  2. 径向渐变
     语法：background: radial-gradient(position, shape size, color-stop1, color-stop2, ...);
position：表示径向渐变的中心位置，可以为top，left，right，bottom，center关键字或者百分比；
     shape：表示渐变的形状， circle 表示圆形，ellipse 表示椭圆形；
     size：表示渐变的大小， closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角；
     color-stop：表示渐变的颜色和位置；
     示例：

  background: -webkit-radial-gradient(circle, red, yellow, green); 
  background: -o-radial-gradient(circle, red, yellow, green); 
  background: -moz-radial-gradient(circle, red, yellow, green); 
  background: radial-gradient(circle, red, yellow, green); 
  

 

太阳

可以利用渐变做出很多炫酷的效果，大家多多实践啦。

• 关于换行
  1. word-break 属性，指定非中日韩的文本换行规则。值主要有以下几种：
     keep-all：只能在半角空格或连字符处换行。
     break-all：允许在单词内换行。
  2. word-wrap 属性，允许长的内容可以自动换行。
     break-word：长的内容强制换行。