CSS手册:http://t.mb5u.com/css3/
选择器
一、元素选择符
- 通配选择符(*):选择所有元素
- 类型选择符(E):以文档对象类型作为选择符
- id选择符(E#id):以唯一标识符id属性等于id的E对象作为选择符
- class选择符(E.class):以class属性包含class的E对象作为选择符
二、关系选择符
- 包含选择符(E F):选择所有被E元素包含的F元素
- 子选择符(E>F):选择所有作为E元素的子元素F。
- 相邻选择符(E+F):选择紧贴再E元素之后F元素。
- 兄弟选择符(E~F):选择E元素后面的所有兄弟元素F。
三、属性选择符
四、伪类选择符
五、伪对象选择符
优先级:
标签选择符、伪类与伪对象:权重为1。
类选择符、属性选择符:权重为10。
ID选择符:权重为100。
内联style属性:权重为1000。
!important:权重为无穷。
p<class<标签.class<id<标签.id<自定义
盒模型
一、基本概念:盒模型由里向外是由:content、padding、border、margin构成的。
二、类型:标准盒模型、IE模型
-
标准盒模型:width=content
height=content
-
IE盒模型:width=content+padding+border
height=content+padding+border
三、CSS设置两种模型
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
定位
一、定位position分类
- static默认值,没有定位,元素出现在正常的流中。
- absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
- relative:生成相对定位的元素,相对于其正常位置进行定位。
- fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
- inherit:规定应该从父元素继承 position 属性的值。
尺寸单位
一、文本相对长度单位
- em(CSS1):相对于当前对象内文本的字体尺寸
如果body的font-size:设置为14px,那么1em = 14px
- ex(CSS1):相对长度单位。相对与支付"x"的高度,通常为字体高度的一半。
- ch(CSS3):相对与数字“0”的宽度
- rem(CSS3):相对于根元素(html元素)font-size的计算倍数
如果html的font-szie:设置为14px,那么1rem = 14px
二、视口相对长度单位
- vw(CSS3):相对于视口的宽度。视口被平均分为100单位的vw
- vh(CSS3): 相对于视口的高度。视口被平均分为100单位的vh
- vm(CSS3): 相对于视口的宽度或高度。对于视口的宽度或高度,总是相对于小的那个。视口的宽度或高度被均分为100单位的vm