CSS

CSS 盒模型

W3C 标准盒模型：width/height = content。
IE 盒模型：width/height = content + padding + border。
通过修改元素的 box-sizing 属性来改变元素的盒模型。

CSS 选择符

id 选择器（#myid）
类选择器（.myclassname）
标签选择器（div, h1 ~ h6, p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul > li）
兄弟选择器（li ~ a）
相邻兄弟选择器（li + a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover，li:nth-child）
伪元素选择器（a::before，a::after）
通配符选择器（*）

CSS 属性继承

以下属性会默认从父元素继承：

字体相关：font-size、font-family、font-weight 等
文本相关：color、text-align、direction 等
列表样式：list-style 及其子属性
表格属性：border-collapse、empty-cells 等
光标样式：cursor
可见性：visibility

大多数盒模型、定位、背景等属性不会自动继承。可使用 inherit 强制让它们继承父元素的同名属性值。

示例：

css

p {
  background-color: inherit; /* 让 <p> 继承父元素的背景色 */
}

CSS 优先级算法

标签内选择符 x 0 0 0（1000）
ID 选择符 0 x 0 0（100）
class 选择符/属性选择符/伪类选择符 0 0 x 0（10）
元素和伪元素选择符 0 0 0 x（1）

CSS3 新增的伪类整理

结构伪类（基于元素位置）：

:nth-child(n)：选中父元素下的第 n 个子元素。
:nth-last-child(n)：从后数，选中父元素下的第 n 个子元素。
:first-child：选中父元素下的第一个子元素。
:last-child：选中父元素下的最后一个子元素。
:only-child：如果 elem 是父元素下唯一的子元素，则选中它。

类型伪类（基于元素类型）：

:nth-of-type(n)：选中父元素下第 n 个 elem 类型元素。
:first-of-type：选中父元素下第一个 elem 类型元素。
:last-of-type：选中父元素下最后一个 elem 类型元素。
:only-of-type：选中父元素下唯一的 elem 类型元素。

内容与状态伪类：

:empty：选中不包含任何子元素或内容的元素。
:target：匹配当前 URL 片段（#id）指向的目标元素。
:not(selector)：选中不匹配 selector 的所有元素。

表单相关伪类：

:enabled：选中可用的表单控件。
:disabled：选中被禁用的表单控件。
:checked：选中已勾选的单选框或复选框。

`display` 取值及作用

常见值：

none：隐藏元素，并从文档流中移除，不占据空间。
block：块级元素，独占一行，可设置宽高，默认宽度撑满父元素。
inline：行内元素，内容决定宽度，不可设置宽高，不换行显示。
inline-block：类似 inline，但可以设置宽高，仍然同行显示。
list-item：像块级元素一样显示，并带有列表标记。
table：元素表现得像 <table>，其子元素需符合表格结构，如 tr、td。

其他值（特殊布局）：

flex / inline-flex：启用弹性布局，子元素可根据规则动态排列。
grid / inline-grid：启用网格布局，允许子元素按行列分布。
contents：移除自身，但保留子元素在文档流中的位置。
inherit：从父元素继承 display 值。

CSS3 新特性

新增 CSS 选择器：例如，:not(.input) 选中所有没有 input 类的元素。
圆角（border-radius）：border-radius: 50%：实现圆形或圆角效果，可用于盒模型的元素，特别是图像和按钮等。
多列布局（Multi-column layout）：使用 column-count、column-gap 等属性，可以轻松实现文本或内容的多列排版。
阴影和反射：box-shadow 为元素添加阴影效果、text-shadow 为文字添加阴影效果、reflect 为元素创建反射效果。
文字装饰（text-decoration）：对文字进行装饰，支持下划线、删除线等样式。
线性渐变（gradient）：使用 linear-gradient 实现颜色渐变效果，不需要图像文件。
变换（transform）：可用于旋转、缩放、倾斜、平移元素。
动画（@keyframes 和 animation）：通过 @keyframes 定义动画，并结合 animation 属性为元素添加动态效果。
多背景：一个元素可以使用多个背景图像。

CSS3 弹性布局 (Flexbox)

Flexbox（弹性布局）是 CSS3 引入的一种布局模型，用来在容器内为子元素提供最大的灵活性，能够实现复杂的布局，减少使用浮动、定位等传统布局方法的需要。

1. 容器和项目

容器（Flex Container）：设置为 display: flex 或 display: inline-flex 的元素，称为“弹性容器”。容器的子元素称为“弹性项目”。
项目（Flex Items）：容器的子元素，默认沿主轴排列。

2. 容器上的属性

flex-direction：定义主轴的方向，决定项目的排列方式。
可选值：
- row（默认）：沿水平方向，从左到右排列。
- row-reverse：沿水平方向，从右到左排列。
- column：沿垂直方向，从上到下排列。
- column-reverse：沿垂直方向，从下到上排列。
flex-wrap：定义如果项目溢出容器时是否换行。
可选值：
- nowrap（默认）：所有项目排列在一条轴线上，不换行。
- wrap：项目换行，第一行项目从左到右，第二行从左到右依此类推。
- wrap-reverse：项目换行，第二行从右到左排列。
flex-flow：flex-direction 和 flex-wrap 的简写。默认值为 row nowrap。
示例：
css
```
.container {
  flex-flow: column wrap;
}
```
1
2
3
justify-content：定义项目在主轴上的对齐方式。
可选值：
- flex-start（默认）：项目靠主轴起始位置对齐。
- flex-end：项目靠主轴结束位置对齐。
- center：项目居中对齐。
- space-between：项目之间均匀分布，第一个项目位于起始位置，最后一个项目位于结束位置。
- space-around：项目之间均匀分布，项目两侧的空隙相等。
align-items：定义项目在交叉轴上的对齐方式。
可选值：
- stretch（默认）：项目拉伸以填满交叉轴。
- flex-start：项目靠交叉轴起始位置对齐。
- flex-end：项目靠交叉轴结束位置对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目基线对齐。
align-content：定义多行项目的对齐方式。只有当容器中有多行项目时，才会生效。
可选值：
- flex-start、flex-end、center、space-between、space-around、stretch。

3. 项目上的属性

order：定义项目的排列顺序，默认为 0。数值越小，项目排列越靠前。
示例：
css
```
.item {
  order: 1; /* 设置顺序 */
}
```
1
2
3
flex-grow：定义项目的放大比例，默认为 0（即如果有剩余空间，项目不会放大）。
示例：
css
```
.item {
  flex-grow: 2; /* 放大比例为2 */
}
```
1
2
3
flex-shrink：定义项目的缩小比例，默认为 1（即如果空间不足，项目会缩小）。
示例：
css
```
.item {
  flex-shrink: 1; /* 缩小比例为1 */
}
```
1
2
3
flex-basis：定义在分配多余空间之前，项目占据的主轴空间。默认为 auto。
示例：
css
```
.item {
  flex-basis: 200px; /* 设置项目的初始宽度 */
}
```
1
2
3
flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
示例：
css
```
.item {
  flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}
```
1
2
3
align-self：允许单个项目在交叉轴上的对齐方式与其他项目不同。可覆盖 align-items 属性。
可选值：
- auto（默认）：继承容器的 align-items 属性。
- flex-start、flex-end、center、baseline、stretch。

CSS3 网格布局（Grid Layout）

CSS Grid Layout（网格布局）是 CSS3 引入的另一种强大布局系统，允许在二维（水平和垂直）空间中控制元素的排列，能够比传统的布局方法（如 Flexbox）提供更多的控制和灵活性。

1. 网格容器和网格项

网格容器（Grid Container）：通过设置 display: grid 或 display: inline-grid 来定义一个网格容器。
网格项（Grid Items）：网格容器内的直接子元素，自动成为网格项。

2. 网格容器的主要属性

这些属性设置在网格容器上，控制整个网格的布局。

display: grid：启用网格布局。
css
```
.container {
  display: grid;
}
```
1
2
3

grid-template-columns：定义网格容器的列宽。
该属性接受多个值（列的宽度），用空格分隔。
示例：

css

.container {
  grid-template-columns: 100px 200px 300px; /* 三列，分别为100px、200px、300px */

  grid-template-columns: repeat(3, 1fr); /* 三列，每列占等分 */
}

grid-template-rows：定义网格容器的行高。
示例：
css
```
.container {
  grid-template-rows: 100px 200px;
}
```
1
2
3

grid-template-areas：通过命名网格区域来定义布局结构，通常与 grid-template-columns 和 grid-template-rows 配合使用。
示例：

css

.container {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
}

grid-gap / gap：定义网格项之间的间距，可以设置 grid-row-gap 和 grid-column-gap 分别控制行和列的间距。
示例：
css
```
.container {
  gap: 10px;  /* 行和列之间的间距 */
}
```
1
2
3
grid-auto-rows：定义自动生成行的高度。
示例：
css
```
.container {
  grid-auto-rows: 100px;
}
```
1
2
3
grid-auto-columns：定义自动生成列的宽度。
示例：
css
```
.container {
  grid-auto-columns: 200px;
}
```
1
2
3

3. 网格项的主要属性

这些属性用于控制网格项（即容器的子元素）在网格中的行为。

grid-column-start / grid-column-end：定义网格项在列方向上的起始位置和结束位置。
示例：
css
```
.item {
  grid-column-start: 1;
  grid-column-end: 3;
}
```
1
2
3
4
grid-row-start / grid-row-end：定义网格项在行方向上的起始位置和结束位置。
示例：
css
```
.item {
  grid-row-start: 1;
  grid-row-end: 2;
}
```
1
2
3
4

grid-column：grid-column-start 和 grid-column-end 的简写形式。
示例：

css

.item {
  grid-column: 1 / 3;  /* 从第1列开始，到第3列结束 */
}

grid-row：grid-row-start 和 grid-row-end 的简写形式。
示例：

css

.item {
  grid-row: 1 / 2;  /* 从第1行开始，到第2行结束 */
}

grid-area：将 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 的值合并为一个简写属性。
示例：
css
```
.item {
  grid-area: 1 / 1 / 2 / 3;  /* 从第1行第1列开始，到第2行第3列结束 */
}
```
1
2
3

4. 自适应布局

通过使用 fr 单位，网格可以实现灵活的自适应布局，fr 代表网格容器剩余空间的分配。

fr 单位：一个比例单位，用于分配可用空间。
示例：
css
```
.container {
  grid-template-columns: 1fr 2fr 1fr;
}
```
1
2
3
上述代码表示容器有三列，第一列和第三列各占总宽度的 1/4，第二列占 2/4。

BFC

BFC（Block Formatting Context，块级格式化上下文）用来描述一个元素在页面布局中如何生成和处理其内部元素的布局。形成 BFC 后，元素内部的布局不会影响外部的布局，外部的布局也不会影响到 BFC 内部的元素。

BFC 的作用

隔离性：BFC 中的元素布局不受外部元素影响，反之亦然。这意味着 BFC 内部的浮动、定位等样式不会渗透到外部。
清除浮动：BFC 的一个典型应用是清除浮动，避免浮动元素影响到其他元素的布局。
防止元素重叠：BFC 的区域会防止元素间出现重叠，尤其是在使用了负的 margin 时。

创建 BFC 的条件

根元素或包含根元素的元素：
HTML 文档的根元素（<html>）默认形成一个 BFC。
浮动元素：
如果一个元素的 float 属性不为 none，如 float: left 或 float: right，则该元素会形成一个 BFC。
示例：
css
```
.box {
  float: left;
}
```
1
2
3
绝对定位元素：
使用 position: absolute 或 position: fixed 的元素会创建一个新的 BFC。
示例：
css
```
.box {
  position: absolute;
  top: 10px;
  left: 20px;
}
```
1
2
3
4
5
display 属性为某些值的元素：
当元素的 display 属性设置为以下值之一时，也会创建一个 BFC：

display: inline-block
display: flex
display: inline-flex
display: table-cell
display: table-caption
示例：
css
```
.box {
  display: flex;
}
```
1
2
3

overflow 属性不为 visible：
如果元素的 overflow 属性设置为 hidden、auto 或 scroll，则该元素会形成一个 BFC。
示例：
css
```
.box {
  overflow: auto;
}
```
1
2
3

IFC

IFC（Inline Formatting Context，行级格式化上下文） 用于控制行内元素的排列方式。与 BFC（块级格式化上下文）不同，IFC 主要用于处理 水平方向上的布局。

IFC 的特点

行内盒子水平排列：在 IFC 内部，行内元素会沿 水平方向 依次排列，直到当前行无法容纳更多的内容时，会自动换行。
行高由最高的内联盒子决定：IFC 的高度由内部 最高的行内盒子 决定，而不会受 height 属性的直接影响。
不影响外部布局：IFC 内部的布局不会影响到外部的块级盒子（block-level elements），类似于 BFC 的隔离特性。

创建 IFC 的条件

display: inline（默认值，如 span、a、b、strong 等）
display: inline-block
display: inline-table

元素水平和垂直居中

Flexbox 布局

父容器使用 Flexbox 布局实现子元素的水平和垂直居中。

css

.container {
  display: flex;
  justify-content: center; /* 实现水平居中 */
  align-items: center; /* 实现垂直居中 */
}

结合 Flexbox 和 margin: auto; 属性实现水平和垂直居中。

css

.container {
    display: flex;
}

.child {
    margin: auto; /* 同时实现水平和垂直居中 */
}

Grid 布局

父容器使用 Grid 布局实现子元素的水平和垂直居中。

css

.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}

Table 属性

使用 Table 属性实现水平和垂直居中。

css

.container {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle; /* 实现垂直居中 */
  text-align: center; /* 实现水平居中 */
}

.child {
  width: 20px;
  height: 20px;
  display: inline-block;
}

子绝父相

子绝父相表示：子元素设置绝对定位，父容器设置相对定位。

不知道子元素和父容器的高度

使用 position 和 transform 属性可以同时实现水平和垂直居中。

css

.container {
 position: relative;
}

.child {
 position: absolute;
 top: 50%; /* 实现垂直居中 */
 left: 50%; /* 实现水平居中 */
 transform: translate(-50%, -50%);
}

知道子元素和父容器的高度

使用 position 和 margin 属性同时实现水平和垂直居中。

css

.container {
   position: relative;
   height: 100vh;
}

.child {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto; /* 同时实现水平和垂直居中 */
}

line-height

如果子元素是单行文本，可以使用 line-height 来实现垂直居中，这个方法适用于只包含单行文本的元素。

css

.container {
    height: 100px;
    text-align: center; /* 实现水平居中 */
    line-height: 100px; /* 实现垂直居中 */
}

清除浮动

浮动（Float）的特点

浮动元素可以左右移动，直到遇到另一个浮动元素或其包含块的边界。
浮动元素会 脱离普通文档流，不再影响块级元素的正常布局，但仍然会影响 行内元素 的排列。
当一个 父元素包含浮动子元素时，如果父元素没有显式的高度，就可能会发生 高度塌陷（即父元素的高度被浮动元素忽略）。

由于浮动元素脱离文档流，可能会导致以下布局问题：

高度塌陷问题
影响后续元素布局

清除浮动的方法：

使用 clear 属性：clear 属性用于 阻止元素旁边出现浮动元素，从而让元素正常显示。
css
```
.clearfix {
  clear: both;
}
```
1
2
3
让父元素形成 BFC
使用伪元素（推荐）::after：使用 ::after 伪元素可以在 父元素内部 创建一个不可见的块级元素，清除浮动。
css
```
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```
1
2
3
4
5

CSS 性能优化

CSS 性能优化是一个综合的过程，需要结合具体项目的特点和需求来制定相应的优化策略。

合并和压缩文件
- 将多个 CSS 文件合并为一个，减少 HTTP 请求次数。
- 使用压缩工具（例如 UglifyCSS、cssnano 等）来压缩 CSS 文件，减小文件大小。
使用字体图标或 SVG
- 替代大量小图像的图标使用字体图标或 SVG 图像，以减少 HTTP 请求。
精简选择器
- 避免使用过于复杂的选择器，因为它们可能导致性能下降，简单的选择器通常更有效。
避免使用 !important
- 避免使用 !important 规则，以防止样式覆盖的混乱。
减少使用嵌套
- 减少嵌套层级，因为深层次的嵌套可能会增加渲染时间。
优化图片
- 使用 CSS Sprites 来减少多个小图标的请求（合并图片）。
- 使用合适大小的图片，不要使用比实际需要更大的图像。
启用浏览器缓存
- 设置适当的缓存头，以确保浏览器能够缓存 CSS 文件，减少后续加载时的请求。
使用缩写
- 使用缩写属性，例如 margin、padding 等，以减小 CSS 文件大小。
使用 CSS 动画和过渡
- 尽量使用 CSS 动画和过渡，而不是 JavaScript 动画，以利用浏览器的硬件加速功能。
异步加载 CSS
- 将不同页面或组件的 CSS 文件拆分为不同的文件，并根据需要异步加载，以避免不必要的资源加载。
使用字体子集
- 如果使用自定义字体，考虑仅包含实际需要的字符，以减小字体文件大小。
减少重绘和回流
- 避免频繁的样式更改，以减少页面的重绘和回流。
使用 Flexbox 和 Grid
- 使用 Flexbox 和 Grid 布局代替传统的布局方法，它们通常更有效。
优化移动端样式
- 使用媒体查询和适应性布局，确保网站在移动设备上有良好的性能和用户体验。

常见的元素隐藏方式

使用 display: none; 隐藏元素，渲染树不会包含该渲染对象，该元素不会在页面中占据位置，也不会响应绑定的监听事件。
使用 visibility: hidden; 隐藏元素，元素在页面中仍占据空间，不会响应绑定的监听事件。
使用 opacity: 0; 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。
通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
通过 transform: scale(0, 0); 来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

CSS ​

CSS 盒模型 ​

CSS 选择符 ​

CSS 属性继承 ​

CSS 优先级算法 ​

CSS3 新增的伪类整理 ​

display 取值及作用 ​

CSS3 新特性 ​

CSS3 弹性布局 (Flexbox) ​

CSS3 网格布局（Grid Layout） ​

1. 网格容器和网格项 ​

2. 网格容器的主要属性 ​

3. 网格项的主要属性 ​

4. 自适应布局 ​

BFC ​

BFC 的作用 ​

创建 BFC 的条件 ​

IFC ​

IFC 的特点 ​

创建 IFC 的条件 ​

元素水平和垂直居中 ​

Flexbox 布局 ​

Grid 布局 ​

Table 属性 ​

子绝父相 ​

不知道子元素和父容器的高度 ​

知道子元素和父容器的高度 ​

line-height ​

清除浮动 ​

CSS 性能优化 ​

常见的元素隐藏方式 ​

CSS