面试中CSS盒模型常问知识点

249 阅读1分钟

基础概念:

标准盒模型+IE模型、

CSS如何设置这两种模型、

JS如何设置获取盒模型对应的宽和高、

实例题(根据盒模型解释边距重叠)、

BFC(边距重叠解决方案)、

BFC(基本概念,原理,如何创建BFC)、

BFC使用场景

BFC垂直方向边距重叠

垂直元素上下都有边距时,会产生重叠,取较大值来显示

处理:可以给子元素添加父级,如:overflow:hidden。

左右布局时,左浮动,右内容较多时,多的会延伸到左边,

处理:可以给右侧创建一个BFC,如:overflow:auto,BFC不与float重叠。

BFC子元素即使是float也会参与高度计算(子元素为float时,一般是不会计入父级大小的,当父级创建BFC时,子元素浮动的也会添加到父级内容中进行计算)

建立BFC方法:

overflow:hidden     overflow:auto      float:left(float不为none即是)