说一下 CSS 的盒模型。

在 HTML 页面中所有的元素都可以看成是一个盒子。盒子的组成：内容 content、内边距 padding、边框 border、外边距 margin。盒模型的类型：

标准盒模型：width = content
IE 盒模型（怪异盒模型）：width = content + padding + border 控制盒模型的模式：border-sizing: content-box(默认值，标准盒模型)、border-box(IE 盒模型)。

CSS 选择器的优先级

CSS 的特性：继承性、层叠性、优先级标签、类/伪类/属性、全局选择器、行内样式、id、!important 优先级： !important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

网页布局中的标准流、浮动流与定位流

网页布局

网页布局方案规定的是浏览器如何对页面中的元素进行布局排版的。目前主要的布局方案：

传统的布局方案（标准流、浮动流、定位流）
flex布局
grid布局

标准流

标准流又称普通流，浏览器默认的布局方案。
元素自上而下，从左至右进行排列布局。

浮动流

半脱标准流的排版方式
主要用来做网页的横向布局或文字环绕图片效果
元素设置浮动后，设置宽高起作用，默认在父元素左上角展示，如果前面存在块级元素，则会排在元素的下面。
浮动属性取值为：float: left; float: right;

定位流

浮动是多个块级元素在同一行显示，定位主要是有层叠性

定位分类

1. 相对定位（relative）

占据标准流位置，不脱离标准流
位置参考点：自身位置

2. 绝对定位（absolute）

不占据标准流位置，完全脱离标准流
位置参考点：离自己最近设置了（绝对定位、相对定位、固定定位）的父元素。广义的父元素，一层层向上找祖先元素。
行内元素设置了固定定位和绝对定位的话，会转为块级元素。

3. 固定定位（fixed）

不占据标准流位置，完全脱离标准流
参考点永远都是浏览器窗口

4. 粘性定位（sticky）

个人理解：在没有滚动到目标位置时，采用的是relative定位，滚动到目标位置后，采用的是fixed定位。

5. 静态定位（static）

默认值

浮动

浮动最早是用来控制图片的，主要为了达到文字实现围绕图片的效果。

由于浮动可以让任何盒子一行排列，所以也会被用来进行布局。

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准文档流，移动到指定位置。

float 属性的三个值：left / right / none

为什么要清除浮动？

由于浮动元素不占据标准文档流位置，所以他会对其他元素的位置产生影响，为了解决这个问题，就需要清除浮动。

比如：父元素的高度塌陷问题

清除浮动准确的说，是清除元素浮动后造成的影响。

清除浮动的方法

本质

本质：闭合浮动（闭合父盒子出口，不让里面浮动子元素出来影响其他元素）

1. 额外标签法（clear: both）

通过在浮动元素末尾添加一个空的标签，例如：

<br style="clear: both" />

优点：通俗易懂，书写方便缺点：添加许多无意义的标签，结构化较差。我只能说，W3C 你推荐的方法我不接受，你不值得拥有。

2. 父元素添加 overflow 属性（overflow: hidden | auto | scroll）

优点：代码简洁缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3. 使用 after 伪元素清除浮动（.clearfix::after）

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
/*兼容ie*/
.clearfix {
  *zoom: 1;
}

4. 父元素设置高度

设置了高度就没有高度塌陷的问题了，但是有很多情况下父元素高度不能确定。

5. 父元素设置 BFC（display: table）

优点：可以触发 BFC 块格式化上下文，限制其内部元素 float 的不影响到 BFC 外面。和第四种类似缺点：使用表格元素属性解决浮动的同时，继承了表格元素的弊端。

浮动的应用场景

文字环绕图片效果

<!-- 文字环绕效果 -->
<div style="width: 500px;">
  <div style="float: right;">
    <img width="100" height="100" src="" alt="" />
  </div>
  CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 
</div>

页面布局（三栏布局的实现）

BFC

在学习 BFC 之前首先要了解一些定位知识。

常见的定位方案有三种：

普通流（normal flow）

在普通流中，元素按照其在 HTML 的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当前行被占满后换行。块级元素则会被渲染成一个完整的新行，除非另外指定，否则所有的元素默认都是普通流定位。
浮动（float）

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 是什么？

BFC 即 Block Formatting Contexts（块级格式化上下文），它属于上述布局方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素在布局上不会影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

可以认为 BFC 是一个封闭的盒子，内部元素的变化，不会影响到外面。

BFC 触发条件

根元素（HTML 元素，自身就是一个 BFC）
浮动元素：float 属性值设置了 right / left
绝对定位元素：设置了 position 属性值：absolute / fixed，绝对定位或者固定定位。
overflow 属性：overflow 属性值不为：visible 时，即指定了 auto、scroll、hidden 等的元素
display 属性：display 属性值为 inline-block、table-cell、flex、grid 等的元素。

BFC 特性及应用

1. 解决高度塌陷问题

同一个 BFC 下外边距会发生重叠

都属于 html 这个 BFC 下的元素，margin 值会发生重叠，默认是按照两者之间的最大值设置间距。

这两个 div 的间距为 100px

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: lightblue;
    }
  </style>
</head>
<body>
  <div style="margin-bottom: 100px"></div>
  <div style="margin-top: 50px"></div>
</body>

如果要避免这种问题。可以将其放入到不同的 BFC 容器中。

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: lightblue;
    }
  </style>
</head>
<body>
  <div style="overflow: hidden">
    <div style="margin-bottom: 100px"></div>
  </div>
  <div style="margin-top: 50px"></div>
</body>

2. 清除浮动，解决高度塌陷，BFC 包含浮动的元素即可

浮动的元素会脱离文档流，如果他的父元素没有设置高度，就会导致父元素出现高度塌陷的问题。

原因是浮动元素不会参与普通流父元素的高度计算。

而 BFC 容器的高度会计算浮动元素的高度。

隐藏元素的方法有哪些

display: none; 元素在页面上消失，不会占据空间。
opacity: 0; 设置元素的透明度为 0，元素不可见，占据空间位置。
visibility: hidden; 元素在页面上消失，占据空间位置，一种不可见的状态。
position: absolute; 设置定位，移出可见区域。
clip-path

px、rem、em 的区别是什么？

px 是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度。
rem，相对单位，相对于 html 根节点的 font-size 的值，直接给 html 节点的 font-size: 62.5%; 1rem = 10px; (16px * 62.5% = 10px)
em，相对单位，相对于父元素的 font-size 的值。

重排和重绘有什么区别？

重排必定会引发重绘

重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小。
重绘：计算好盒模型的位置、大小和其他一些属性后，浏览器会根据每个盒模型的的特性进行绘制。浏览器的渲染机制：
对 DOM 元素的大小、位置进行修改后，浏览器需要重新计算元素的几何信息，会触发重排。
只对 DOM 的样式进行修改，比如 color 和 background-color，浏览器不需要重新计算 DOM 元素的集合信息，直接绘制了该元素的新样式。这时会触发重绘。

元素水平垂直居中的方式有哪些？

flex
absolute + margin
absolute + top + left + transform
gird
table

CSS 属性中有那些可以被继承，那些不可以被继承？

能够继承的属性：

字体系列的属性：font-size、font-family、font-weight、font-style;
文本系列的属性：

内联元素：color、line-height、word-spacing、letter-spacing、text-transform;
块级元素：text-align、text-indent、

元素可见性：visibility

不能被继承的属性：

盒子模型的属性：width、height、margin、padding、border；
背景属性：background、background-color、background-image
定位属性：float、clear、position、top、left、right、bottom、overflow、min-width、max-width、min-height、max-height;

CSS 预处理器？

LESS、SASS CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。优点：提高代码复用率和可维护性缺点：需要引入编译过程有学习成本

grid 布局基础知识

grid 布局的基本概念

grid容器：采用grid布局的父元素。 grid项目：grid布局中每个格子内部放置的元素。 grid内容：显示项目的区域。 行：横向列：纵向网格线：网格布局中横向和纵向的线条。单元格：横纵线交汇的区域被称为单元格。间距：网格与网格之间的距离被称为间距。
容器属性

容器划分行列
- 取值为数值 grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px;
- 取值百分比 grid-template-rows: 20% 30% 50%; grid-template-columns: 20% 30% 50%;
- 重复函数 repeat grid-template-rows: repeat(3, 20%); grid-template-columns: repeat(3, 100px);
- 自动填充 grid-template-rows: repeat(auto-fill, 15%); grid-template-columns: repeat(auto-fill, 15%);
- auto 自动 grid-template-rows: 100px auto 100px; grid-template-columns: 100px auto 100px;
- fr 片段划分 grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 1fr 2fr 3fr;
- minmax() grid-template-rows: 200px 200px minmax(100px, 200px); grid-template-columns: 200px 200px minmax(100px, 200px);
调整间距 grid-row-gap: 20px; grid-column-gap: 20px; grid-gap: 20px 10px; gap: 30px 10px;
容器内内容的对齐方式 justify-content: center; align-content: center; place-content: center; place-content: space-between space-evenly; 取值范围：start、end、center、space-around（间距环绕）、space-between（两端对齐）、space-evenly（间距平分）。
网格内项目的对齐方式 justify-items: center; align-items: center; place-items: center;

项目属性

合并单元格属性 grid-row-start: 1; grid-row-end: 2; grid-column-start: 4; grid-column-end: 6; grid-row: 1/2; grid-column: 4/6;

单个项目位置

  justify-self 和 align-self
  `justify-self` 属性设置单元格内容的水平位置（左中右），跟 `justify-items` 属性的用法完全一致，但只作用于单个项目。
  `align-self` 属性设置单元格内容的垂直位置（上中下），跟 `align-items` 属性的用法完全一致，也是只作用于单个项目。
  .item {
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
    /* 简写 place-self: <align-self> <justify-self>; */
  }

注意点：复合属性的书写都是先上下再左右

css知识总结