H5+CSS3面试题

rem和em

rem：若网页根html元素设置的font-size：16px，则1 rem=16px，2rem=32px以此类推。
em：先查找本元素的font-size，若没有设置则继承父元素的，假设也为16px，则1 em=16 px，2 em= 32px以此类推。
区别：根据谁的font-size来确定。

line-height

line-height就是两行文字的底边距离，因此行距=line-height减去font-size，即line-height=行距+font-size，可用来给单排文字设计垂直居中（即将line-height设置为和父元素的height一致）。

居中的几种方法

水平居中

1、text-align:center
2、margin:0 auto（块级元素默认占一行，所以使用auto可以自动分配剩余空间；而使用绝对定位后元素脱离文档流，只占用自身大小的空间，该方法失效，要想在绝对定位后使用该方法，需要扩展其占用空间：占用一行并水平居中（left：0；right：0；margin：0 auto）；占用一列并上下居中（top：0；bottom：0；margin：auto 0）；两个方法连用可以实现水平垂直居中）
3、绝对定位 left:50% 后在左移自己宽度的一半(margin-left:负一半宽度或者使用translateX(-50%)左移自己的一半宽度)
4、使用弹性布局设置居中 justify-content: center（取决于水平轴是主轴还是交叉轴）

垂直居中

1、inline-height和height设置相同
2、auto
3、绝对定位top:50%后在上移自己宽度的一半(margin-top:负一半宽度或者使用translateY(-50%)左移自己的一半宽度)
4、使用弹性布局设置居中 align-items: center（取决于水平轴是主轴还是交叉轴）

解决子元素浮动带来的父元素塌陷

1.在塌陷的父元素底部添加一个块级元素，并设置clear:both以消除浮动元素对它的位置影响，将父元素撑开
2.设置伪元素after（原理与1相似），也是在底部设置一个空的（content=’’）块级（display:block）元素，并设置clear float以消除浮动元素对它的位置影响，将父元素撑开
3.设置overflow:hidden或auto，引入BFC，将浮动元素的高度计算在内
4.为父元素设置float（较局限）

外边距塌陷问题

（只发生在垂直方向，与行内元素和行内块级元素无关）

解决方法：
1.同级元素间的塌陷主要靠计算解决
2.父子元素间：
1)设置border或padding
2)设置BFC
3)设置position（实质是触发BFC）
4)浮动（实质是触