web技术夯实基础篇（三）—— css

一、选择器：id，class，元素名，属性，伪类（:hover,:nth-child），伪元素（:before），*，选择器组
一些有趣的伪元素
::first-letter：块级元素第一行第一个字。
::first-line： 块级元素第一行
::selection：被用户选中高亮的部分
选择器组：
A + B：B是A后面紧跟的元素
A ~ B：B是A后面任意元素

二、单位
绝对单位：px等。
相对单位：em,rem，vw, vh等。
一般浏览器初识字体大小为16px；
em：相对父元素的倍数。
rem：不支持低版本IE。
vw, vh：支持性不如rem。

三、控制继承的通用属性
inherit：继承父元素属性值。
initial：浏览器初始值。

四、盒模型
margin border padding content
背景裁切：background-clip: border-box / padding-box / content-box;

五、字体
text-transform：大小写转换
text-decoration：文本装饰，line style color
text-shadow：文本阴影
letter-spacing：字母间距
word-spacing：单词间距
引用web字体
@font-face {
font-family: “myFont”;
src: url(“myFont.ttf”);
}
html {
font-family: “myFont”, “Bitstream Vera Serif”, serif;
}

六、背景
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow); 渐变背景
background-attachment：scroll/fixed/local 固定滚动背景
背景是可以堆叠的。
边框背景：background-clip: padding-box;（背景只填充内容区）
border-image-source: url()
border-image-slice: 40;
border-image-repeat:边界的填充规则

filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7))（过滤器产生的阴影，不支持IE）