盒模型
说下盒模型?
有两种盒模型，WC盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为content-box。当浏览器未设置!doctype声明时，盒模型都为border-box。
通过css的box-sizing属性，可以更改元素的盒子模型。标准WC盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。
标准盒模型box-sizing:content-box
IE盒子模型的范围也包括margin、border、padding、content，和标准WC盒子模型不同的是：IE盒子模型的content部分包含了border和pading。IE盒模型box-sizing:border-box
标准的CSS的盒子模型？
标准盒子模型：宽度=内容的宽度（content）+border+padding+margin
与低版本IE的盒子模型有什么不同的？
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin
box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：WC的标准盒子模型，设置元素的height/width属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border+padding+content部分的高/宽
盒子模型在不同浏览器上的区别
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是IE盒子模型和标准WC盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：
标准的wc盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。
在来看下IE盒子模型：
IE盒子模型的范围也包括margin、border、padding、content，和标准wc盒子模型不同的是：ie盒子模型的content部分包含了border和padding。
例如：
一个盒子的margin为20px，border为1px，padding为10px，content的宽为px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：
宽：20*2+1*2+10*2+=px,高：20*2+1*2+10*2+50=px。
盒子的实际大小为：宽1*2+10*2+=px,高1*2+10*2+50=72px。
假如用IE盒子模型，那么盒子需要占据的位置为：
宽：20*2+=px,高：20*2+50=70px。
盒子的实际大小：宽px,高50px。
一般推荐使用WC盒子模型，怎样才算是选择了标准WC盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。
CSS增加了box-sizing属性，值包括content-box
border-box
inherit。
在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。
水平垂直居中
不定宽高水平垂直居中？
1.通过display：flex；justify-content:center;align-items:center;就可以让子元素不定宽高水平垂直居中
2.也可以父display：flex；，子设置一个margin：auto；
.通过css，给父元素设置相对定位，给子元素设置绝对定位，left：50%top：50%通过transform：translate（-50%，-50%）拉回自身的宽和高的一半。
4.通过给父元素设置display：table-cell;vertical-align：middletext-align：center给子元素设置vertical-align：middletext-align：center。就可以让子元素不定宽高水平垂直居中了。
文字在垂直和水平方向重叠的两个属性分别是什么？
垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。
如何居中div
-水平居中1：给div设置一个宽度，然后添加margin:0auto;属性
div{
width:px;
margin:0auto;
}
-水平居中2：利用text-align:center实现
.container{
background:rgba(0,0,0,.5);
text-align:center:
font-size:0;
.box{
display:inline-block;
width:px;
height:px;
background-color:pink;
-让绝对定位的div居中
positionn:absolute;
width:00px;
height:00px;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
background-color:pink;/*方便看效果*/
-水平垂直居中1
/*确定容器的宽高，宽高00*/
position:absolute;
width:px;
height:00px;
top:50%;
left:50%;
margin:-px00-px;
:pink;
-水平垂直居中2
/*未知容器宽高，利用transform属性*/
position:absolute;
width:px;
height:00px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
:pink;
-水平垂直居中
/*利用flex布局实际使用时应考虑兼容性*/
.container{
display:flex;
align-items:center;/*垂直居中*/
justify-content:center;/*水平居中*/
.containerdiv{
width:px;
height:px;
:pink;
为什么margin:0auto会让div居中
margin可以有4个值，分别对应影响的方向是上，右，下，左，2个值的时候，对应第一个值是控制上下距离，第二个值是控制左右，所以magrgin：0auto，就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。
要给居中元素一个宽度，否则无效
该元素不可以浮动，否则无效
BFC
什么是BFC？
BFC是WCCSS2.1规范中的一个概念，在CSS.0规范中已被修改为flowroot。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC（blockformattingcontext），中文为“块级格式化上下文”
对BFC的理解？
BFC规定了内部的BlockBox如何布局。定位方案：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的marginbox的左边，与包含块borderbox的左边相接触。
BFC的区域不会与floatbox重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
float属性不为none
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible,
html根元素
如何触发BFC？
BFC解决了什么问题？
解决自适应两栏布局问题：利用BFC的区域不会与floatbox重叠的规则。
解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。
解决垂直margin重叠问题：利用Box垂直方向的距离由margin决定。
属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。
为什么overflow:hidden能触发bfc？
块级格式化上下文(BlockFormattingContext)：
盒子在容器（包含块）内从上到下一个接一个地放置
两个兄弟盒之间的竖直距离由margin属性决定
同一个BFC内垂直会合并
盒子的左外边缘挨着容器（包含块）的左边
块级格式化上下文(BFC)的特性
BFC内的浮动不会影响到BFC外部的元素
BFC的高度会包含其内的浮动元素
BFC不会和浮动元素重叠
BFC可以通过overflow:hidden等方法创建
所有要处理margin折叠，就需要让两个元素处于不同的BFC，overflow:hidden正好可以触发BFC
Position
Position定位值有哪些？
static（默认）：按照正常文档流进行排列；
relative:相对定位一般给父元素设置
absolute:绝对定位一般给子元素设置相对父元素或祖先带定位样式的元素定位
fixed:固定在某个位置，相对浏览器窗口固定在一个位置
Inherit:继承父元素的position值。
absolute的containingblock计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的position值不为static的元素，然后再判断：
若此元素为inline元素，则containingblock为能够包含这个元素生成的第一个和最后一个inlinebox的paddingbox(除margin,border外的区域)的最小矩形；
否则,则由这个祖先元素的paddingbox构成。
如果都找不到，则为initialcontainingblock。
补充：
static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute:向上找最近的定位为absolute/relative的元素
fixed:它的containingblock一律为根元素(html/body)