Web前端基础知识整理-CSS篇

CSS手册：http://t.mb5u.com/css3/
选择器
一、元素选择符

1. 通配选择符(*):选择所有元素
2. 类型选择符(E)：以文档对象类型作为选择符
3. id选择符(E#id):以唯一标识符id属性等于id的E对象作为选择符
4. class选择符(E.class):以class属性包含class的E对象作为选择符

二、关系选择符

1. 包含选择符(E F):选择所有被E元素包含的F元素
2. 子选择符(E>F):选择所有作为E元素的子元素F。
3. 相邻选择符(E+F):选择紧贴再E元素之后F元素。
4. 兄弟选择符(E~F):选择E元素后面的所有兄弟元素F。

三、属性选择符

四、伪类选择符

五、伪对象选择符

优先级：
标签选择符、伪类与伪对象：权重为1。
类选择符、属性选择符：权重为10。
ID选择符：权重为100。
内联style属性：权重为1000。
!important：权重为无穷。

p<class<标签.class<id<标签.id<自定义

---

盒模型
一、基本概念：盒模型由里向外是由：content、padding、border、margin构成的。
二、类型：标准盒模型、IE模型

1. 标准盒模型：width=content

             height=content

2. IE盒模型：width=content+padding+border

           height=content+padding+border
           

三、CSS设置两种模型

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

---

定位
一、定位position分类

1. static默认值，没有定位，元素出现在正常的流中。
2. absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
3. relative：生成相对定位的元素，相对于其正常位置进行定位。
4. fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
5. inherit：规定应该从父元素继承 position 属性的值。

---

尺寸单位
一、文本相对长度单位

1. em（CSS1）：相对于当前对象内文本的字体尺寸

   如果body的font-size：设置为14px，那么1em = 14px

2. ex（CSS1）：相对长度单位。相对与支付"x"的高度，通常为字体高度的一半。
3. ch（CSS3）：相对与数字“0”的宽度
4. rem（CSS3）：相对于根元素（html元素）font-size的计算倍数
   如果html的font-szie：设置为14px，那么1rem = 14px

二、视口相对长度单位

1. vw（CSS3）：相对于视口的宽度。视口被平均分为100单位的vw
2. vh（CSS3）: 相对于视口的高度。视口被平均分为100单位的vh
3. vm（CSS3）: 相对于视口的宽度或高度。对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vm