面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

CocoaChina 发布于2019-08-29 15:39 / 1590人阅读

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者

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

涉及知识点(层层递进):

基本概念：标准模型+ IE模型(区别)

CSS如何设置这两种模型

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

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

BFC(边距重叠解决方案)

CSS盒模型 1. 基本概念：标准模型+ IE模型

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2. CSS如何设置这两种模型

box-sizing:conent-box;
box-sizing:border-box;

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

dom.style.width/height
dom.currentStyle.width/height  (ie支持)
window.getComputedStyle(dom).width/height;
dom.getBoundingClientRect().width/height;

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

如上图:有两个元素其中子元素高度为100px,子元素与父元素的上边距为 10px,求父元素的实际高度？

答案:说100px 对，说110 也对，为什么捏？这个要看父元素的盒模型要怎么设置的，上代码演示咯，注意看噢：

运行效果：

上图证明 100px 是对的。

接着我们给元素加个 overflow:hidden,然后在看效果：

你会发现这时高度为 110px, 这时大家可能会疑问,为什么给父级元素设置一个 overflow:hidden以后，它的高度就成 110 呢，这块的基本原理是啥呢，咋就这样呢？说这个之前，先引用一个知识点：

上面代码是父子元素边距重叠，那么还有两种情况边距重叠就是，一种是兄弟元素，就是两个 div 挨着，每个都上边距或者下边距，那么重叠的原则就是取最大值。

来回答上面问题：给父级加了 overflow:hidden,其实就是给父级元素创建一个BFC(块级格式化上下文)，那什么是BFC，请看下一个话。

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

BFC 的基本概念

BFC 的原理

如何创建 BFC

BFC使用场景

BFC 的基本概念

Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关。

BFC 的原理

BFC 这个元素的垂直的边距会发生重叠

BFC 的区域不会与浮动元素的 float 重叠

独立的容器，内外元素互不影响

计算 BFC 高度，浮动元素也参与计算

如何创建 BFC

float 不为none的时候

position 不为 static 或者 relative 的时候

display 与 table 相关的时候

overflow 为auto, hidden 的时候

BFC使用场景

场景一

]

如上图，我们给每个p 设置上边距5，下25 结果从第二个起来它的上边距，下边距都是25 而不是 30，这个就是边距重叠问题，那如何消除这个问题呢？

解:就是给子元素加个一个父级元素，让你能元素创建一个 BFC，如下：

运行效果如图:

场景二

运行效果：

从运行效果可以发现，当右侧增高的时候会侵入左侧的占位，这个是float的特性，显示这个不符合我们左右布局的目的，那怎么办呢？其实很简单，就是给右侧的元素创建一个 BFC,如下：

运行效果：

场景三（清除浮动的原理）

  


  
    我的浮动的小智

运行效果：

可以看出父级元素的高度为0，这是为什么呀？

这是因为 float 导致了元素的坍塌，所以父级元素的高度为0，这时我们给父级元素创建一个 BFC，就能解决问题。

运行效果：

以上就是 BFC的清除浮动原理。

愿你成为终身学习者

GPU云服务器云服务器认识你盒模型盒模型html吗简述html盒模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113459.html

面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

Channe 2019-08-26 12:02 评论0 收藏0
面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

mengera88 2019-08-02 10:41 评论0 收藏0
前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。背景参加完厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...

mating 2019-08-30 14:19 评论0 收藏0
前端面试宝典

摘要：优雅降级观点优雅降级观点认为应该针对那些最高级最完善的浏览器来设计网站。面试官希望听到是。在前端构建中应该考虑微格式吗微格式是一种让机器可读的语义化词汇的集合，是结构化数据的开放标准。一、HTML和CSS 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核...

ChanceWong 2019-08-29 12:31 评论0 收藏0