css中那些令人迷惑的东西

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;
}

结果:

图0:css中那些令人迷惑的东西

结果

通过结果我们可以知道,它们是有区别的。区别如下:
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); 
    
    1. 径向渐变
      语法: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:css中那些令人迷惑的东西

太阳

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

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

阅读余下内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号