2018-07-19 CSS进阶

一、CSS基础知识

1.CSS单位

绝对单位

很少用

相对单位

1.px，全称pixel，即像素。
2.%
分为三大类：
（1）width、height、font-size的百分比是相对于父元素“相对属性”的值来计算的。
（2）line-height的百分比是相对于父元素的font-size值来计算的。
（3）vertical-align的百分比是相对当前元素的line-height值来计算的。
3.em
em是相对于“当前元素”的字体大小而言的。其中，1em等于“当前元素”字体大小。这里的字体大小指的是以px为单位的font-size值。例如，当前元素的font-size值为10px，则1em等于10px；当前元素的font-size值为20px，则1em等于20px，以此类推。
4.rem
rem，全称是font size of the root element，指的是相对于根元素（即html元素）的字体大小。rem布局也是移动端最常用的字体大小之一。
rem和em很相似，不过区别也很大：em是相对“当前元素”的字体大小，而rem是相对“根元素”的字体大小。这里的font-size指的都是以px为单位的font-size值。

2.CSS特性

CSS具有量大特性：继承性和层叠性。

继承性

具有继承属性有三大类：
1.文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing；
2.列表相关属性：list-style-image、list-style-position、list-style-type、list-type；
3.颜色相关属性：color；
padding、margin、border等不具备继承性。

层叠性

原则：“后来者居上”原则有三个前提：
1 元素相同
2 属性相同
3 权重相同

3.CSS优先级

样式覆盖冲突有以下5种情况：
1 引用方式冲突
2 继承方式冲突
3 指定样式冲突
4 继承样式与指定样式冲突
5 ！important

引用方式冲突

行内样式>（内部样式 = 外部样式）

继承方式冲突

原则：最近的祖先元素优先级最大。

指定样式冲突

行内样式>id选择器>class选择器>元素选择器

继承样式和指定样式冲突

指定样式获胜。