web前端面试题

6次阅读

共计 755 个字符,预计需要花费 2 分钟才能阅读完成。

1. CSS 盒子模型,绝对定位和相对定位

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

浮动 float 最开始出现的意义是为了让文字环绕图片而已,后来用于让三个块级元素并排展示,这时候就出现了浮动

不过,由于 float 会导致浮动元素的父元素高度坍塌,所以,这时候就要去清除浮动

如果我们给上面的三个绿颜色的方块设置 display:inline-block 也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右,display:inline-block 只能从左往右。

清除浮动的方法:

(1) 在浮动元素最后增加一个冗余元素为其设置 clear:both

(2) 给父元素增加 clearfix

<div class="box clearfix">

 <div class="div"></div>

</div>

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}

(3) 给父元素增加:

overflow:hidden;zoom:1;

给父元素增加 overflow: hidden; 可以清除浮动的原理:

增加后,父元素会形成一个块级格式化上下文,即 BFC,overflow: hidden 本意是将父元素中溢出的内容裁切掉,而 BFC 中,在计算父元素真实高度时候,也把 float 元素的高度算入其中,所以在计算裁切的同时,顺带达成了清除浮动的目的

3. 如何保持浮层水平垂直居中

4. position 和 display 的取值和各自的意思和用法

5. 样式的层级关系,选择器优先级,样式冲突,以及抽离样式模块怎么写,说出思路,有无实践经验

6. css3 动画效果属性,canvas、svg 的区别,CSS3 中新增伪类举例

7. px 和 em 和 rem 的区别,CSS 中 link 和 @import 的区别是?

正文完
 0