二、CSS盒模型

原创 smenjyxl 随笔 css 85阅读 2018-04-17 17:35:43 举报

题目:谈谈你对CSS盒模型的认识

1. 基本概念:标准模型+IE模型

解答:margin、border、padding、content

2. 标准模型和IE模型之间的区别

解答:宽和高的计算方式不同,如下图

3. CSS是如何设置这两种模型的

解答:box-sizing:content-box;/浏览器默认标准模型/
box-sizing:border-box;/IE模型/

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

解答:
(1) dom.style.width/height(只能取到内联样式)
(2) dom.currentStyle.width/height(取到的是渲染后的高和宽,但是只有IE支持)
(3) window.getComputedStyle(dom).width/height(兼容性比较好)
(4) dom.getBoundingClientRect().width/height(取到的是渲染后的高和宽,只是知道的人比较少,通常应用于计算一个元素的绝对位置(基于视窗),可以拿到四个元素,left、top、width、height)

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

题目:一个元素包含了一个子元素(高度:100px,其距离父元素10px),请问父元素的高度是多少?

解答:父元素加overflow:hidden;(其实就是给父元素增加了一个BFC) 其高度就是110px;不加就是100px;(这里是父与子的边距重叠);
补充:
(2)兄弟元素的边距重叠(如:下边距30;兄弟元素上边距10,这两个会合并为30,取两者中的最大值);
(3)空元素的边距重叠(他没有边框或内边距,只有margin-top和margin-bottom,这时他们碰到一起,两者就会发生重叠,这里就取他们之间的最大值);
参考资料

6. BFC(边距重叠解决方案)

(1)BFC的基本概念

解答:块集、格式化、上下文

(2)BFC的原理(说白了就是BFC的渲染规则)

解答:
◆ BFC这个元素的垂直方向的边距会发生重叠;
◆ BFC的区域不会与浮动的元素的box重叠(用来清除浮动和布局);
◆ BFC在页面中是一个独立的容器,外面的元素不会影响你们的元素,反之亦然;
◆ 计算BFC高度时浮动元素也会参与计算;

(3)如何创建BFC

解答:
◆ float不为none;
◆ position的值不为static和relative,为absoulte或fixed;
◆ display属性和table相关的那几个(如:table、table-caption、table-cell等);
◆ overflow不为visible;如overflow:auto;overflow:hidden;都可以

(4)BFC的使用场景

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复