盒模型

87 阅读1分钟

最近面试面到盒模型了,两种IE盒模型和标准盒模型的细节,没答上,平时开发也没留意这个东西。。。

盒模型的概念

什么是盒模型,其实就是由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成的一个盒子,例如div。

1.IE盒模型和标准盒模型

image.png 可以看出两种盒模型还是有差别的,我面试时候说的是没有差别--哈哈哈

那就看看这两个东西是由什么构成的,其实网上挺多博客写有,我也去看过,不过没记到脑子里~

2.标准盒模型

image.png 给200的宽度,但是渲染出来时候却是260,那么标准盒模型的宽度应该只是内容content的宽度。

盒子的总宽度:内容200+内边距20x2+边框10x2 = 260

3.IE盒模型

image.png 盒子的总宽度:内容140+内边距20x2+边框10x2 = 200

image.png

哈???原来我开发一直用着IE的盒模型。。。平时确实没注意这个概念。

image.png

果然知识还是得从面试官身上汲取。。。

当然,开发时候依旧还是选择IE盒模型,UI大佬给什么尺寸就渲染什么尺寸,paddingborder的都不会改变盒子你设置的widthheight值,这不香吗,当然居然还得看页面想要达到什么效果,灵活选择盒模型进行开发。