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 之间
关于渐变
渐变主要分为线性渐变和径向渐变
线性渐变
语法:
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);
径向渐变
语法:
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);
太阳
可以利用渐变做出很多炫酷的效果, 大家多多实践啦
关于换行
word-break 属性, 指定非中日韩的文本换行规则值主要有以下几种:
keep-all: 只能在半角空格或连字符处换行
break-all: 允许在单词内换行
word-wrap 属性, 允许长的内容可以自动换行
break-word: 长的内容强制换行
来源: http://www.jianshu.com/p/4f18daf0c363