CSS 常规面试真题

1. 浏览器是如何解析css？

从左往右进行解析的，从而提高解析效率

2. float 高度塌陷？

原因：当元素设置浮动后，会自动脱离文档流
解决办法：清除浮动

[注] 清除浮动的方法：

1. 给父元素也添加 float
2. 给父元素一个固定高度
3. 给父元素的伪类设置

content:" ";
clear:both;/*清除浮动*/
display:block;/*确保该元素是一个块级元素*/

4. 给父元素添加 overflow：hidden

3. display:inline-block 有缝隙？

原因：两个内联元素之间有一定的空隙，如 换行符、制表符（tab）、空格等字符引起的
解决办法：

1. 不换行
2. 设置其父容器的font-size为0，再设置内联元素的字体大小。
3. 添加注释
4. 设置 float:left，但是要清除浮动

多行文本垂直居中

<div class="span_box bg_box">
    <span class="words_span">
        方法一：父元素使用display:table和子元素使用display:table-cell
        属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
    </span>
</div>

方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格
子元素设置vertical-align:middle即可垂直居中

.bg_box {
    width: 300px;
    height: 300px;
    margin-top: 20px;
    background-color: #BBBBBB;
}
/*方法一*/
.span_box {
    display: table;
}
.words_span {
    display: table-cell;
    vertical-align: middle;
}

方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。

<div class="p_box bg_box">
    <p class="words_p">
        方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
    </p>
</div>

.bg_box {
    width: 300px;
    height: 300px;
    margin-top: 20px;
    background-color: #BBBBBB;
}
/*方法二*/
.p_box {
    line-height: 300px;
}
.words_p {
    display: inline-block;
    line-height: 20px;  /*单独给子元素设置行高，覆盖父级元素的行高*/
    vertical-align: middle;  /*基线居中对齐*/
}

方法三：脱离文档流的居中方式，把内部div设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。

<div class="wrapper bg_box">
    <div class="content_box">
        方法三：脱离文档流的居中方式，把内部div设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。</div>
</div>


.bg_box {
    width: 300px;
    height: 300px;
    margin-top: 20px;
    background-color: #BBBBBB;
}
/*方法三*/
.wrapper {
    position: relative;
    overflow: hidden;
}
.content_box {
    position: absolute;
    top: 50%;
    width: 300px;
    height: 127px; /*本页面中这么多文字的高度，文本篇幅改变，高度也会变*/
    margin-top: -63.5px;  /*height的一半*/
}

px em rem 的区别？

px：相对于显示器屏幕分辨率而言
em：继承父元素的 font-size 大小
rem：继承 html 根元素的 font-size 大小

px 与 rem 的选择？

• 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
• 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。