第3章：CSS基础知识
3.1 CSS单位
3.1.1 绝对单位
- CSS单位分为两大类：绝对单位 和 相对单位。绝对单位使用的是物理度量单位，大小是固定的。在前端开发中一般不会用到绝对单位，了解即可。
| 绝对单位 | 说明 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 |
| pt(poin) | 印刷的点数，磅 |
| pc(pica) | 1pc=12pt |
3.1.2 相对单位
| 相对单位 | 说明 |
|---|---|
| px | 像素 |
| % | 百分比 |
| em | 当前元素字体大小的倍数 |
| rem | 根元素字体大小的倍数 |
px(像素)
- px（pixel）像素，是分辨率的基本单位，是屏幕显示最小的点。像素不像是厘米，属于物理上绝对的大小单位，它可以很大，也可以很小。
- 如果画面由很多且很小的显示点构成，那么画面就很清晰，我们称为“分辨率高”；相反，如果画面由很少且很大的显示点构成，“分辨率低”画面就模糊。
- 比如分辨率为“800px × 600px”，就是说计算机的显示由宽是800个像素点，高是600个像素点构成。
%(百分比)
- CSS中支持百分比作为单位的属性大致有三大类：
-
width、height、font-size根据父元素相同属性值来进行百分比计算：- 比如父元素的
width:100px，那么子元素width:50%，则实际宽度为50px； - 比如父元素的
font-size:30px，那么子元素font-size:50%，则实际字体大小为15px；
- 比如父元素的
-
line-heigt根据父元素的font-size属性值来进行百分比计算； -
vertical-align根据当前元素的line-heigt属性值来进行百分比计算；
-
em（当前元素字体大小的倍数）
- em是当前元素字体大小的百分比，例如当前元素的
font-size:10px时，1em等于10px。 - 如果当前元素没有定义
font-size，则会基础父元素的font-size。如果所有祖先元素都没定义font-size，则会继承浏览器默认的font-size(所有浏览器默认的font-size:16px)。
『em单位的使用技巧』
- 通过
text-indent:2em实现首行缩进； - 使用em作为统一单位，任何元素都不设置具体的px单位，而是指定根元素的
font-size的倍数。但值得注意的是，如果出现多重嵌套内容时，使用em作为单位则需要重新计算； - 使用em作为统一字体大小单位，当需要改变页面整体字体大小时，无需逐个修改，只改根元素的字体大小即可；
rem（根元素字体大小的倍数）
- rem(font size of the root element)，相对于根元素字体大小的倍数。
- 是CSS3新引入的单位，除了IE8以及更早版本之外，大部分主流浏览器都支持rem。rem布局也是移动端最常用的字体大小之一。
- em是相对于“当前元素”的字体大小，而rem是相对于“根元素”的字体大小，从而可以避免多重嵌套导致的复杂计算。
『实际开发中，px、em和rem各自的使用场景』
- 国外大多数网站都使用em作为单位，W3C也建议使用em。但国内大部分网站使用px作为单位。这是由于国外的法律规定（如美国）网站必须具有兼容性，为了方便对IE早期版本的兼容，em更适合。
- 所以：
- 需要兼容IE或者其他低版本浏览器时，使用em单位；
- 不需要兼容IE，也不考虑移动端浏览器时，使用px单位；
- 需要在移动端且不考虑IE等比版本浏览器时，使用rem单位；
3.2 CSS特性
3.2.1 继承性
- CSS的继承性是指，子元素可以继承父元素的某些样式属性，从而减少重复代码的编写。
- 但不是所属性都具有继承性，CSS中具有继承性的属性有三大类：
- 文本相关的属性：
font(font-family/font-size/font-style/font-weight)、line-height、text-align、textindent、word-spacing； - 列表相关的属性：
list-style-image、list-style-position、list-style-type、list-style； - 颜色相关的属性：
color；
- 文本相关的属性：
3.2.2 层叠性
- CSS的层叠性是指，同一个元素可以根据选择器的权重进行样式的覆盖。
3.3 CSS优先级
- 当CSS样式层叠时，遵循一定的优先级规则来覆盖，常见的情况有五种：
-
引用方式冲突：
行内样式 > (内部样式 = 外部样式)；- 行内样式的优先级最高，内部样式和外部样式的优先级相等，以最后引入的样式为准。
继承方式冲突：以最近的祖先元素为准
-
指定样式冲突：
行内样式 > id选择器 > class选择器 > 元素选择器；- 当指定“当前元素”的样式发生冲突时，以样式权重高者为准
选择器 权重值(数额大的权重高) 通配符 0 伪元素（比如 :hover）1 元素选择器 1 class选择器 10 伪类 10 属性选择器 10 id选择器 100 行内选择器 1000 继承样式和指定样式冲突：以指定样式为准；
!important：!important规则来改变样式的优先级，它同样也遵循后来者居上的覆盖原则；
-
3.4 CSS引入方式
- CSS引入方式有三种：
link方式外部样式表、内部样式表和行内样式表。
说明：另外还有一种
@import方式，但在实际开发中极少使用。原因在于，@import方式先加载HTML后加载CSS，而link方式是先加载CSS后加载HTML。
3.4.1 外部样式表
- 外部样式表是把CSS代码和HTML代码单独放在不同文件中，然后在HTML文档中使用
<link>标签来引入CSS样式表。当样式被应用到多个页面时，外部样式表是最理想的方案，可以提升网站性能和可维护性。
3.4.2 内部样式表
- 外部样式表是最常用的CSS引用方式，但不代表内部样式表和行内样式表就一无是处。
- 在实际的开发当中，多个页面的公有样式应当使用外部样式表，而单个页面的个别样式则可以使用内部样式来定义。
6.4.3 行内样式表
- 如果只需要在页面具体的某个小地方修改样式，或者需要通过权重来覆盖样式时，可以使用行内样式。
3.5 CSS选择器
- 通过CSS选择器可以选择页面上你想要的标签元素，基本的选择器有：元素选择器、id选择器、class选择器、群组选择器。
- 初次之外，还有层次选择器。层次选择器就是通过元素之间的层次关系来选择元素。
- 常见的层次选择器包括：父子、后代、兄弟和相邻。
| 选择器 | 说明 |
|---|---|
M N |
后代选择器，选择M元素内部所有后代N元素 |
M > N |
子代选择器，选择M元素内部子代N元素 |
M ~ N |
兄弟选择器，选择M元素后所有同级的N元素 |
M + N |
相邻选择器，选择M元素相邻的下一个元素 |
