1. 如何居中一个 div？
- 水平垂直居中一
/*确定容器的宽高宽500高300的层设置层的外边距*/
div {
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}
- 水平垂直居中二
/*未知容器的宽高，利用`transform`属性*/
div {
position: absolute; /*相对定位或绝对定位均可*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}
- 水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}
回答：
一般常见的几种居中的方法有：
对于宽高固定的元素
（1）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
（2）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通translate来调整元素的中心点到页面的中心。
（3）使用flex布局，通过justify-content:center和align-items:center设置容器的水平和垂直方向上为居中对齐，然后它的子元素也可以实现水平和垂直的居中。
对于宽高不定的元素，上面的后面两种方法，可以实现元素的水平和垂直的居中。
2. CSS 优先级算法如何计算？
判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了 !important。一条声明如果加上了权重，那么它的优先级就是最高的。
一条匹配规则一般由多个选择器组成，选择器的特殊性可以分为四个等级：
- 第一个等级是行内样式，为1000
- 第二个等级是id选择器，为0100
- 第三个等级是类选择器、伪类选择器和属性选择器，为0010
- 第四个等级是元素选择器和伪元素选择器，为0001
规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。
3. 对 BFC 规范（块级格式化上下文）的理解？
-
BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
-
一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。
4. margin 重叠问题的理解
margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。
一般来说可以分为四种情形：
-
第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC来解决。
-
第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以为父元素设置border-top、padding-top值来分隔它们，当然我们也可以将父元素设置为BFC来解决。
-
第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们。当然将父元素设置为BFC是最简单的方法。
-
第四种是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置高度来解决这个问题。
5. 盒子模型
盒子模型主要分为标准盒子和怪异盒子（box-sizing:content-box是标准盒子，box-sizing:border-box是怪异盒子）。
- 标准盒子总宽度：：width + padding + border + margin
- 怪异盒子总宽度：width(width = content + padding + border) + margin
