前端八股之CSS斜线为重点掌握内容盒子模型选择器以及权值比较, BFC, 定位, Flex定位, 浮动等布局问题应

斜线为重点掌握内容

在css中的盒子，把HTML的元素封装成盒子用来设计和布局时使用，包含以下元素

从外到内，依次为margin border padding content

详细说明：内容（content）：盒子的内容，主要用来显示文字和图像。

填充（padding）：也叫内边距，用来清除内容周围的区域，它是透明的。

边框（border）：围绕在内边距和内容外的边框，盒子的外壳。

边距（margin）：也叫外边距，用来清除边框外的区域，它跟填充一样都是透明的。

标准盒模型： W3C标准，

内盒尺寸： width+ padding+ border 外盒尺寸： width+ padding+ border + margin

怪异盒模型：IE盒模型

内盒模型： width 外盒模型： width+padding

元素选择器（Type Selector） 选取所有相同类型的HTML元素。
```
p {
  color: blue;
}
```
类选择器（Class Selector） 选取含有特定类的元素。
```
.important {
  font-weight: bold;
}
```
ID选择器（ID Selector） 选取特定ID的元素。
```
#header {
  background-color: #333;
}
```
属性选择器（Attribute Selector） 选取带有特定属性的元素。
```
[disabled] {
  cursor: not-allowed;
}
```
后代选择器（Descendant Selector） 选取位于另一个元素内的元素。
```
div p {
  color: red;
}
```
子选择器（Child Selector） 选取作为另一元素的直接子元素的元素。
```
ul > li {
  font-size: 14px;
}
```
相邻同胞选择器（Adjacent Sibling Selector） 选取紧随另一元素后的元素，且二者有相同父元素。
```
h1 + p {
  margin-top: 0;
}
```
通用同胞选择器（General Sibling Selector） 选取位于另一元素后的所有元素，且二者有相同父元素。
```
h1 ~ p {
  font-size: 16px;
}
```
伪类选择器（Pseudo-class Selector） 选取处于特定状态的元素。
```
a:hover {
  color: #ff00ff;
}
```
伪元素选择器（Pseudo-element Selector） 选取元素的特定部分。
```
p::first-line {
  font-weight: bold;
}
```
分组选择器（Grouping Selector） 同时选取多个选择器。
```
h1, h2, h3 {
  text-align: center;
}
```

例如，对于以下CSS规则：

#header .menu li a {
  color: blue;
}

权值计算如下：

总权值为 100 + 10 + 1 + 1 = 112。

对于复杂的选择器，权值是累积的。例如：

div#header > ul.menu > li.active a {
  color: green;
}

权值计算如下：

总权值为 1+100 + 10 + 10 + 1 + 1 = 123。

需要注意的是，伪元素选择器（如 ::before 和 ::after）的权值与它们所附加的选择器的权值分开计算。例如：

css

复制

#header::before {
  content: "Header";
}

权值为 100 + 1 = 101。

在CSS中，权值高的规则会覆盖权值低的规则。如果两个规则的权值相同，后面的规则会覆盖前面的规则（即CSS中的“层叠”特性）。

BFC, 定位, Flex定位, 浮动等布局问题

应用: 圣杯和双飞翼模型, 水平垂直居中

CSS3新特性

前端八股之CSS