Html和Css面试题总结

一、盒模型

1.盒模型由content、margin、padding、border四部分组成。

2.分别为标准盒子模型：width+margin+padding+border和怪异盒模型：width+margin（width包含了padding和border）

3.盒子转换：
border-box和content-box

二、BFC

1.BFC就是块级格式化上下文，BFC是一块独立的区域，内部元素不受外界影响同时也不会影响到外部，是css的一种布局方式，可以用来解决边距重叠问题。

2.父子关系的边距重叠：父子关系，如果子元素设置了外边距，在没有把父元素变成BFC时，父元素就会产生外边距，解决方法就是：给父元素设置overflow：hidden让父元素变成BFC。
兄弟关系的边距重叠：同级元素在垂直方向会产生外边距重叠问题，最后外边距的大小取两者绝对值大的那个。解决方法就是：添加一个空元素或者伪类元素然后设置overfollow：hidden。

3.触发BFC的方法：overfollow：hidden\auto、position：absolute\fixed、flot：left\right、display:inline-block\flex\inline-flex.

4.BFC的应用：可用于自适应布局和清除浮动。

三、清除浮动

1.为什么要清除浮动：清除浮动是为了解决父元素因为自身元素浮动引起的内部高度为0的问题。

2.清除浮动的方法：
（1）额外标签法：在最后加入一个空标签并设置clear：both
（2）使用伪元素after
（3）父级添加overfollow：hidden
（4）使用双伪元素：before、after

四、flex布局

1.flex意为 “弹性布局”，为盒装模型提供最大的灵活性。

2.常用属性：flex-direction(主轴方向，默认row)、flex-wrap(项目在容器轴线排不下是否换行，默认nowrap)、flex-flow、justify-content、aligin-items、align-content

五、两\三栏布局（圣杯、双飞翼）

1.两栏布局&#x