面试官:谈谈你对 CSS 盒模型的认识?(你确定会?) | 您所在的位置:网站首页 › css的两种盒子模型区别 › 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?) |
题目:谈谈你对 CSS 盒模型的认识
涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别)CSS如何设置这两种模型JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠)BFC(边距重叠解决方案) CSS盒模型 1. 基本概念:标准模型+ IE模型从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
如上图:有两个元素其中子元素高度为100px,子元素与父元素的上边距为 10px,求父元素的实际高度? 答案:说100px 对,说110 也对,为什么捏?这个要看父元素的盒模型要怎么设置的,上代码演示咯,注意看噢: html,*{ padding: 0;margin: 0; } #sec{ background: #f00; } .child{ height: 100px; margin-top: 10px; background: yellow; }运行效果: 上图证明 100px 是对的。 接着我们给元素加个 overflow:hidden,然后在看效果: 你会发现这时高度为 110px, 这时大家可能会疑问,为什么给父级元素设置一个 overflow:hidden以后,它的高度就成 110 呢,这块的基本原理是啥呢,咋就这样呢?说这个之前,先引用一个知识点: 上面代码是父子元素边距重叠,那么还有两种情况边距重叠就是,一种是兄弟元素,就是两个 div 挨着,每个都上边距或者下边距,那么重叠的原则就是取最大值。 来回答上面问题:给父级加了 overflow:hidden,其实就是给父级元素创建一个BFC(块级格式化上下文),那什么是BFC,请看下一个话。 5. BFC(边距重叠解决方案) BFC 的基本概念BFC 的原理如何创建 BFCBFC使用场景 BFC 的基本概念Block Formatting Context, 块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规格来约束块级盒子的布局,且与区域外部无关。 BFC 的原理 BFC 这个元素的垂直的边距会发生重叠BFC 的区域不会与浮动元素的 float 重叠独立的容器,内外元素互不影响计算 BFC 高度,浮动元素也参与计算 如何创建 BFC float 不为none的时候position 不为 static 或者 relative 的时候display 与 table 相关的时候overflow 为auto, hidden 的时候 BFC使用场景 场景一 html,*{ padding: 0;margin: 0; } #margin{ background: pink; overflow: hidden; } #margin>p{ margin: 5px auto 25px; background: red; }1 2 3
如上图,我们给每个p 设置上边距5, 下25 结果从第二个起来它的上边距,下边距都是25 而不是 30,这个就是边距重叠问题,那如何消除这个问题呢? 解:就是给子元素加个一个父级元素,让你能元素创建一个 BFC,如下: 运行效果如图: 运行效果: 从运行效果可以发现,当右侧增高的时候会侵入左侧的占位,这个是float的特性,显示这个不符合我们左右布局的目的,那怎么办呢?其实很简单,就是给右侧的元素创建一个 BFC,如下: 运行效果: 运行效果: 可以看出父级元素的高度为0,这是为什么呀? 这是因为 float 导致了元素的坍塌,所以父级元素的高度为0,这时我们给父级元素创建一个 BFC,就能解决问题。 运行效果: 以上就是 BFC的清除浮动原理。 愿你成为终身学习者 |
CopyRight 2018-2019 实验室设备网 版权所有 |