(2019)[前端]面试题[4]:CSS盒模型你了解多少?

无道 2019-09-30 0 条评论 前端相关 阅读28 手机阅读

问题

1、请谈谈你对盒模型的认识

2、Bootstrap默认全局使用什么盒模型

2、你知道盒模型模型有哪些(2种)?【W3C盒子模型(标准模型盒)、IE盒子模型】

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

絮叨

你以为盒模型知识点很简单?稍微了解多一点,都会觉得,这些知识点都是真的多。

泪

解答

我们先来看一个最普通的盒子模型张什么样子:

截图-1569841819

(图来自网络)

一个盒子由四个部分组成:conent, padding, border, margin

虽说有两种标准(标准,IE),但也是这四个分属不同。

盒子类型

标准:box-sizing: content-box; (浏览器默认)

截图-1569844241

(图片来自网络)

从上图看出:

标准盒模型:

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin;

也就是说什么呢?width/height 只是内容高度,不包含 padding 和 border 值

IE:box-sizing: border-box; (Bootstrap 框架全局配置成此类型)

截图-1569844385

(图片来自网络)

IE盒模型:

盒子总宽度 = width + margin = (内容区宽度 + padding + bordre) + margin;

盒子总高度 = height + margin= (内容区高度 + padding + bordre) + margin;

也就是说什么呢? width/height 包含了 padding 和 border 值

以上就是标准化理解,我来说说我的理解:

在CSS中,我们给一个div设置了width(宽度)

对于标准盒模型(content-box):

设置的width就是我内容的宽度,如果你还要加padding / margin之类的,你就只有向外面挤。在换句话讲,如果你还加了padding和margin,那么整个盒子的宽度和高度将超出设置的width和height

对于IE盒子模型(border-box):

我设置了width和height,那么整个盒子的宽度和高度就固定了。那如果我还要加padding和margin怎么办?只能压缩真正的内容显示区域了,整个盒子的宽度和高度依然不变。

JS获取宽高度

(1)dom.style.width/height 只能取到行内样式的宽和高,style 标签中和 link 外链的样式取不到。

(2)dom.currentStyle.width/height (只有IE兼容)取到的是最终渲染后的宽和高

(3)window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9 以上支持。

(4)dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9 以上支持,除此外还可以取到相对于视窗的上下左右的距离。

(6)dom.offsetWidth/offsetHeight 包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。

边距重叠问题

先说解决方案:BFC,在我第一篇帖子里已经提到了此解决方案:https://www.misiyu.cn/article/96.html#B.%E5%A4%96%E8%BE%B9%E8%B7%9D%E6%8A%98%E5%8F%A0

我这里就说一下 边距重叠问题是什么问题:

也就是说,两个盒子如果一个盒子设置下边距,一个盒子设置了上边距,那么他们的间距是多少?答案是按边距最大的算

但是如果想他们的边距不重叠,而是相加,怎么办呢?利用BFC来解决。至于什么是BFC,BFC生成条件有哪些,请看上面链接的我的另一篇文章。

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 09月30日 20:11
这篇文章还没有评论呢~
点击刷新/生成验证码