CSS 小知识点整理

CSS 盒模型

CSS 盒模型本质上是一个盒子，盒子包裹着 html 元素。盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin。

盒模型分为两种：

1. W3C 盒子模型，即标准盒模型：width = content-width
2. IE 盒模型，即怪异盒模型：width = content-width + padding-width + border-width

行内元素和块级元素的区别

清除浮动的方法

1. 给父盒子设置高度
2. 给浮动元素后面加一个空的 div，并且该元素不浮动，然后设置 clear: both;
3. 伪元素清除法

   .clearfix:after {
       display: table;
       content: '';
       clear: both;
   }
   

4. overflow: hidden;（触发 BFC）

BFC，块格式化上下文（block formatting context）

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

触发 BFC：

1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position（absolute、fixed）
4. display 为 inline-block、table-cell、flex
5. overflow 除了 visible 以外的值（hidden、auto、scroll）

BFC 的特点：

1. 内部块级盒子垂直方向排列
2. 盒子垂直距离由 margin 决定，同一个 BFC 盒子的外边距会重叠
3. BFC 就是一个隔离的容器，内部子元素不会影响到外部元素
4. BFC 的区域不会与 float box 叠加
5. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC 的用途：

1. 清除浮动
2. 解决外边距合并
3. 布局

IFC

内联元素会触发 IFC，IFC 只有在一个块元素中仅包含内联级别元素时才会生成。

IFC 的特点：

1. 内部的 box 会在水平方向排布；
2. 这些 box 之间的水平方向的 margin、boder、padding 都有效；
3. Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对齐），例：line-heigth 与 vertical-align。

position 有哪些值，分别是什么含义

• static(静态)：默认值，不受 top、bottom、left、right、z-index 属性影响，元素出现在正常的文档流中。

• relative(相对)：相对定位，相对于其正常位置进行定位。不脱离文档流的布局，受 top、bottom、left、right 属性影响，只改变自身的位置，在文档流原先的位置遗留空白区域。

• absolute(绝对)：绝对定位，相对于 static 定位以外的第一个父元素进行定位。脱离文档流的布局，遗留下来的空间由后面的元素填充。

• fixed(固定)：固定定位，相对于浏览器窗口进行定位。元素的位置通过 top、bottom、left、right 属性进行规定。

• sticky(粘性定位)：该定位基于用户滚动的位置。主要用在对 scroll 事件的监听上，当元素在屏幕内，表现为 position: relative; 而当页面滚动超出目标区域时，它的表现就像 position: fixed;，它会固定在目标位置。
  使用条件：

  1. 父元素不能 overflow: hidden 或者 overflow: auto 属性。
  2. 必须指定top、bottom、left、right 4个值之一，否则只会处于相对定位。
  3. 父元素的高度不能低于 sticky 元素的高度。
  4. sticky 元素仅在其父元素内生效

• inherit(继承)：规定应该从父元素继承 position 属性的值。

• initial(默认值)：设置该属性为默认值，即 static。

6种方式实现左右固定 100px，中间自适应

1. 双飞翼布局
   布局顺序：main + left + right
   实现：三个元素均左浮，且 html, body, main 均设置宽高 100%；left 设置 margin-left: -100%，使其挤到最左边展示；right 设置 margin-left: -100px；main 内盒子设置 margin: 0 100px

2. 圣杯布局
   布局顺序：main + left + right
   实现：三个元素均左浮，且 html, body 均设置高度 100%；main 设置宽高 100%，body 设置 padding: 0 100px，为左右盒子预留空间；left 设置 margin-left: -100%; position: relative; left: -100px; right 设置 margin-left: -100px; position: relative; right: -100px;

3. 浮动布局
   布局顺序：left + right + main
   实现：html, body, main 均设置宽高 100%；left 左浮，right 右浮，main 设置 margin: 0 100px

4. position 定位
   布局顺序：left + right + main
   实现：html, body, main 均设置宽高 100%；left、right 定位，main 设置 margin: 0 100px

5. flex 布局
   布局顺序：div.flex > ( left + main + right )
   实现：html, body, div.flex 均设置宽高 100%；div.flex 设置 display: flex; flex-direction: row; left、right 固定宽度，main 设置 flex: 1;

6. calc 函数
   布局顺序：left + main + right
   实现：html, body 均设置宽高 100%；left 左浮；main 左浮，且设置 width: calc(100% - 200px)；right 右浮

7种方式实现左侧固定，右侧自适应

怎么实现水平垂直居中

flex布局

1. 2009年，W3C 提出了一种新的方案 —— Flex 布局，可以简便、完整、响应式地实现各种页面布局。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后，子元素的 float、clear、vertical-align 属性将失效。

2. 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

3. 容器的属性

   • flex-direction：决定主轴的方向（即项目的排列方向）。row | row-reverse | column | column-reverse
   • flex-wrap：定义如果一条轴线排不下，如何换行。nowrap | wrap | wrap-reverse
   • flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式
   • justify-content：定义了项目在主轴上的对齐方式。flex-start | flex-end | center | space-between | space-around
   • align-items：定义项目在交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch
   • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch

4. 项目的属性

   • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
   • flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
   • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
   • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
   • flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。该属性有三个快捷值：auto (1 1 auto) 、1（1 1 0%）、 none (0 0 auto)。
   • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

transform 动画和直接使用 left、top 改变位置有什么优缺点

Chrome 渲染主要包括：

1. 构建 DOM 树：渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
2. 样式计算（Recalculate Style）：渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
3. 布局阶段：创建布局树，并计算元素的布局信息。
4. 分层：对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。
5. 图层绘制：合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
6. 栅格化（raster）操作：合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
7. 合成和显示：浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

transform 属于合成属性，对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧。

left、top 属于布局属性，当对布局属性进行动画时，该元素的布局改变可能会影响到其他元素在文档中的位置，这就导致了所有被影响到的元素都要进行重新布局，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

css var 自定义变量

浏览器兼容性

CSS中原生的变量定义语法是：--，变量使用语法是：var(--)，其中 * 表示变量名称。

p {
    --size: 20;   
    font-size: calc(var(--size) * 1px);//20px
}

CSS的实现

1. 淘宝购物车添加商品到购物车的动画——抛物线运动效果
2. toolTip的实现

其他面试题

• 伪类和伪元素
• 实现固定宽高比(width: height = 4: 3)的div，怎么设置
• CSS 选择器
• CSS 解析规则
• flex: 1 完整写法
• display: none 和 visibility:hidden 的区别
• em rem vh vw calc() line-height 百分比
• rem 实现原理及相应的计算方案
• 清除浮动方法及原理
• postcss 是什么
• css modules
• CSS 预处理器
• CSS 中的 vertical-align 有哪些值？它在什么情况下才能生效？
• BFC (块格式化上下文)
• 常见布局的实现