什么是BFC
BFC就是块级格式化上下文。可以形成一块相对于外界完全独立的空间，内部的子元素不会影响到外部的元素。
开启BFC的方式：
- 根元素本身
- display的值为flex、table、grid。
- 绝对定位和固定定位。
- 浮动元素：float值为left、right。
- overflow为 auto、scroll、hidden。
BFC用途：
- 清除内部浮动，防止高度塌陷。
- 防止margin重叠。包裹一层盒子形成BFC以重新计算。
盒子模型
CSS 基础框盒模型就浏览器的渲染引擎在对一个文档进行布局的时候，会将所有元素表示为一个个矩形的盒子。
一个盒子由四个部分组成：content、padding、border、margin。
- content，即实际内容，显示文本和图像。
- border，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。
- padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。
- margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域。
怪异盒子模型： padding和 border值会包含在width/height 中。
box-sizing属性： 定义了引擎应该如何计算一个元素的总宽度和总高度。
- content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
- border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
- inherit 指定 box-sizing 属性的值，应该从父元素继承
css常见选择器
- id选择器（#box），选择id为box的元素
- 类选择器（.one），选择类名为one的所有元素
- 标签选择器（div），选择标签为div的所有元素
- 后代选择器（#box div），选择id为box元素内部所有的div元素
- 直接子代选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
- 紧邻兄弟选择器（.one+.two），选择紧接在.one之后的所有.two元素
- 分组选择器（div,p），同时选择多个标签的所有元素
- 伪类选择器：:hover、:focus、:active、:first-child、:nth-child等符合特定条件的选择器。
- 伪元素选择器：可以在指定选择器后插入内容。
选择器优先级
内联 > ID选择器 > 类选择器 > 标签选择器。
使用 !important 可以覆盖内联样式。
em/px/rem/vh/vw
- px：以显示器上一个像素为一个单位。
- em：以当前对象的font-size值为一个单位。如果未设置使用浏览器根目录的font-size值，默认为16px。
- rem：只以HTML根元素font-size的值为一个单位。
- vh、vw：以视口的长、宽的百分之一为一个单位。
隐藏页面元素
- display:none：彻底消失，本身占有的空间就会被其他元素占有，导致浏览器的重排和重绘。
- visibility:hidden：隐藏该元素，但仍占有原空间，只会触发重绘。
- opacity:0：元素不可见，仍占有原空间，且能触发事件。
- 设置height、width模型属性为0：元素不可见，不占据页面空间，无法响应点击事件。
- position:absolute移出可视区域：元素不可见，不影响页面布局。
常用的垂直居中解决方案
- flex 弹性布局和 grid 网格布局。
- 子绝父相 + margin：auto：子绝父相会让子元素虚拟大小占满父元素，然后margin设为auto会根据子元素实际大小自动赋值。
- 子绝父相 + 定位 + transform 50% 50%: 子绝父相先移动自身到父元素50% 50%,再用transform移动自身50% 50%。
- 自绝父相配合css中的calc计算函数。
flex弹性布局
容器中默认存在横竖两条轴，分别为主轴和副轴，默认子元素会按沿着主轴对齐。 常用属性有：
- flex-direction：决定主轴的方向。
- flex-wrap：子元素能否换行。
- justify-content：主轴上排列方式。
- align-items：副轴上排列方式
- align-content：多根轴线时主轴和副轴的对齐方式。
- align-self：设置单个子元素的副轴对齐方式
grid网格布局
是二维的布局方式，根据横竖两组网格线形成的框架性进行布局，能够同时处理行与列。
常用属性有：
- grid-template-columns：设置列宽。
- grid-template-rows ：设置行高。
- grid-gap：设置行列间距。
- grid-template-areas：用于定义区域。
- place-items：设置单元格内容的水平位置和垂直位置。
- justify-content/align-content：设置整个内容区域在容器中的水平位置和垂直位置。
- grid-area：放置元素在指定的区域。
实现动画方式有哪些
- transition实现渐变动画。可以指定需要变化的属性，变化的持续时间和速度曲线，一般搭配transform使用。
- animation 实现自定义动画：使用@keyframes定义关键帧，也可以设置变化的持续时间和速度曲线。
回流和重绘
回流：涉及到元素位置或元素大小更改的样式变动，布局引擎会重新计算每个盒子模型在页面上的大小与位置。
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。
回流的触发：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括内外边距、边框大小、高度/宽度等）
- 浏览器的窗口尺寸变化（视口变化导致元素的位置和大小需要重新计算）
- 浏览器实时计算一些指定的值，如offsetTop、scrollTop、clientTop等涉及到元素间位置的值浏览器会实时计算。
回流优化：
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。
浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。
当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据。
因此浏览器不得不清空队列，触发回流重绘来返回正确的值。
避免回流：
- 多使用类名修改样式而不是修改内联样式，可能会造成浏览器多次渲染。
- 少使用复杂动画，尽量脱离文档流使用。
- 在使用
JavaScript动态插入多个节点时, 可以使用DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能。 - 对于指定的值，可以设置一个常量来存储，而不是重复地获取。
响应式设计
- 同时适配PC和移动端。
- 网站的布局会根据视口来调整模块的大小和位置。
实现方式：
- 移动端需要手动声明viewport。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
- 根据媒体查询设置根目录body的font-size，然后页面内尽量使用rem或百分比计算位置、大小等。
css优化
- 首屏加载可以使用内联样式，提升加载速度。
- 其他css文件可以异步加载，避免阻塞渲染。
- 减少重排操作和不必要的重绘。
- 多利用继承的特性，减少在子元素中重写父元素中已有的属性。
- 多图片情况下可以考虑精灵图。
- 体积小的图片可以转为base64编码。
文本溢出省略
单行文本移出：
- text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本。
- white-space：设置文字在一行显示，不能换行。
- overflow：文字长度超出限定宽度，则隐藏超出的内容。
多行文本移出：
指定高度并设置overflow，然后用 伪元素 + 定位方式 加上省略号。
预编译语言
- 预编译语言本质上是
Css的超集。 - 原生css因为代码逻辑关联性不强，不方便维护及扩展和复用。
- 主要实现了代码嵌套，定义变量，作用域和代码混合（ mixins）。
- 代码混合：允许抽出一部分样式作为单独的模块，被其他选择器重使用。
