前端面试题总结--css篇

摘要

经过实习秋招的面试，总结了一些前端面试题，此处为css篇章，答案是简略答案，详细可自行搜索

1. 盒模型

margin，border，padding，content
在标准盒模型中，width设的是content的宽度
在IE怪异盒模型中，width设的是content+padding的宽度

• 标准 box-sizing: content-box
• ie怪异 box-sizing: border-box

2. 定位

absolute：绝对定位，是脱离文档流的。如火其父元素为relative或absolute，那么就相对于父元素。如果不是，则一直往上找找到根元素。

relative: 相对定位，相对于其在文档流中本来的位置。偏移后原来的位置仍被占用。

fixed：滚动的时候不随滚动条滚动，相对于可视窗口，并非body或父元素

3. 垂直水平居中

• 用flex布局

.parent {
display:flex;
justify-content:center;
align-items: center;
}

此方法适用于不知道自己的长宽的情况下，对父的设置。justify-content设置的是在主轴上的对齐方式。align-items设置的是在交叉轴的对齐方式。

• 负边距法

.box-container{
	    position: relative;
        width: 300px;
	    height: 300px;
}
.box-container .box {
	    width: 200px; 
	    height: 100px;
	    position: absolute; 
	    left: 50%; 
	    top: 50%;
	    margin-top: -50px;    /* 高度的一半 */
	    margin-left: -100px;    /* 宽度的一半 */
}

此方法必须知道自己的长宽。

• css3的transform

.box {
        position: relative; 
        left: 50%; 
        top: 50%;
        transform: translate(-50%, -50%);    
}

此方法不用知道自己的长宽

4. 清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。简单来说就是，子元素是浮动的就撑不起父元素的高度，下面的就顶上来了。

• 在最后一个浮动标签后，新加一个标签，给其设置clear：both；添加无意义标签，语义化差
• 父元素添加overflow:hidden，通过触发BFC方式，实现清除浮动
• 使用after伪元素清除浮动

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

5. 样式的层级关系，选择器优先级，样式冲突

• 优先级：内联>内部样式表>外部样式表
• 选择器优先级：元素 d c b a从右边开始比大小，如果完全一样则后写的优先
• 冲突：通过上面的算法，提高优先级即可，还可以用important
• 选择器有哪些：id，类，标签，子选择器，包含，相邻，群

6. px和em和rem的区别

rem也表示相对尺寸，其参考对象为根元素html的font-size
em 是相对长度单位。相对于当前对象内文本的字体尺寸

7. css三列布局

• 圣杯布局（两边定宽，中间自适应）
  总的是container。为container设置padding为left和right预留位置。center，left和right都设置为float。设置center为100%，另两个固定宽度。可以看到center自己占一行，另两个在下一行。所以，想要把left和right放到之前预留好的位子上。使用负边距的方法，对left设margin为-100%，那么它