最近面试面到盒模型了,两种IE盒模型和标准盒模型的细节,没答上,平时开发也没留意这个东西。。。
盒模型的概念
什么是盒模型,其实就是由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成的一个盒子,例如div。
1.IE盒模型和标准盒模型
可以看出两种盒模型还是有差别的,我面试时候说的是没有差别--哈哈哈
那就看看这两个东西是由什么构成的,其实网上挺多博客写有,我也去看过,不过没记到脑子里~
2.标准盒模型
给200的宽度,但是渲染出来时候却是260,那么标准盒模型的宽度应该只是内容
content的宽度。
盒子的总宽度:内容200+内边距20x2+边框10x2 = 260
3.IE盒模型
盒子的总宽度:内容140+内边距20x2+边框10x2 = 200
哈???原来我开发一直用着IE的盒模型。。。平时确实没注意这个概念。
果然知识还是得从面试官身上汲取。。。
当然,开发时候依旧还是选择IE盒模型,UI大佬给什么尺寸就渲染什么尺寸,padding和border的都不会改变盒子你设置的width和height值,这不香吗,当然居然还得看页面想要达到什么效果,灵活选择盒模型进行开发。