[ 前端语言-css选择器和盒子模型 | 青训营笔记]

CSS

格式

selector {property：value；property：value ... }

h1 {color:blue; font-size:12px}

选择器

行内样式、ID选择器、属性选择器、伪类选择器、标签选择器

选择器优先级

!important > 行内样式 > id > class > 标签名和伪类 > * > 继承 > 默认

CSS选择器优先级算法

1. 如果存在内联样式，那么A = 1，否则 A = 0；
2. B 的值等于ID选择器出现的次数；
3. C的值等于类选择器和属性选择器和伪类出现的总次数；
4. D的值等于标签选择器和伪元素出现的总次数。

通用选择器（*）没有优先级值（0，0，0，0）

如果两个选择器的优先级一样，可以通过源码位置判断，哪个优先级生效

降低 CSS 选择器复杂性的一些方法(思考)

1. 尽可能避免使用后代选择器和子选择器，尽量使用 class 选择器。
2. 避免使用通配符选择器、属性选择器、伪类选择器，因为它们会增加样式匹配的时间。
3. 避免使用链式选择器，例如 ul li a。
4. 减少嵌套层数，避免过深的层级嵌套。
5. 在页面中尽量减少使用重复的选择器。
6. 避免使用过于具体的选择器，例如 #wrapper .content ul li a，尽量使用更简单的选择器。
7. 将样式表放在头部，并合理使用 CSS 预处理器，例如 Sass 和 Less 等。

盒模型

标准盒模型（css盒模型）：

标准W3C盒子模型的范围包括margin、boder、padding、content，并且content部分不包含其他部分

IE盒子模型：

IE盒子模型的范围也包括margin、boder、padding、content，但是它的content包含了boder和padding

CSS盒模型和IE盒模型的区别：

• 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。