1. 盒模型
页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：
-
content-box(W3C 标准盒模型) ：设置元素的 height/width 属性指的是content部分的高/宽 -
border-box：设置元素的height/width属性指的是border + padding + content部分的高/宽 padding-box-
margin-box(浏览器未实现)```
2. 弹性盒模型
Flexbox是整个模块，而不是一个属性，它涉及很多东西，包括其整个组属性。他们当中一部分是容器（父元素，称为“伸缩容器”），另一部分是子元素（称为“伸缩项目”）。
3. CSS垂直居中与水平居中方案
(1) 行内元素的水平居中：给其父元素设置 text-align:center,即可实现行内元素水平居中。
(2) 块元素居中：元素设置 margin:0 auto
- 使用flex
#dad {
display: flex;
justify-content: center;
align-items: center
}
- 绝对定位
.son1{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}
.son2{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
}
- 使用transform
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
(3) 垂直居中
单行文本：设置 line-height 等于父元素高度
行内块状元素：
- 使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
- 使用flex
- transform
- 绝对定位
4. BFC的理解？
BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素的内部元素和外部元素会表现出下列特性，这就是BFC。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
5. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动会导致子元素脱离文档流，所以父元素的块框就表现得就像浮动框不存在一样，浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 如果第二个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
- 父级div定义height
- 父元素结束标签之前插入清除浮动的块级元素
// 省略基本的样式
// 区别在这里
.clearfix:after {
content: '.';
height: 0;
display: block;
clear: both;
}
该样式在clearfix，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。
- 包含浮动元素的父标签添加样式overflow为hidden或auto。（创建BFC）
6. CSS优先级算法如何计算？
以下是权重的规则：
标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
7.屏幕适配的方法？
- 设置viewport为设备宽度（这里不一定，但目前先这样足矣）
- 将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）
- 写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem
var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);
function setPxPerRem(){
var dpr = 1;
//把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
var pxPerRem = document.documentElement.clientWidth * dpr / 10;
cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxPerRem();
8.flex布局
屏幕快照 2019-04-10 下午8.31.07.png
