摘要
经过实习秋招的面试,总结了一些前端面试题,此处为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. 样式的层级关系,选择器优先级,样式冲突
- 优先级:内联>内部样式表>外部样式表
- 选择器优先级:元素<class<id<内联
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%,那么它