CSS面试必备

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布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

5. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动会导致子元素脱离文档流，所以父元素的块框就表现得就像浮动框不存在一样，浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 如果第二个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级div定义height
2. 父元素结束标签之前插入清除浮动的块级元素

// 省略基本的样式
// 区别在这里
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

该样式在clearfix，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。

3. 包含浮动元素的父标签添加样式overflow为hidden或auto。（创建BFC）

6. CSS优先级算法如何计算？

以下是权重的规则：
标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

7.屏幕适配的方法？

1. 设置viewport为设备宽度（这里不一定，但目前先这样足矣）
2. 将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）
3. 写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