一周一章前端书·第14周：《HTML与CSS进阶教程》S02E0

第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单位的使用技巧』

1. 通过text-indent:2em实现首行缩进；
2. 使用em作为统一单位，任何元素都不设置具体的px单位，而是指定根元素的font-size的倍数。但值得注意的是，如果出现多重嵌套内容时，使用em作为单位则需要重新计算；
3. 使用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元素相邻的下一个元素