css盒模型-又一个经久不息的话题,面试的时候,有的面试官会让你谈谈css的盒子模型,这样看似简单的问题,却让一些同学,无从下口。其实你不是不会,在写css的时候,你肯定经常会用到margin,padding,width,box-sizing这样的css属性。只不过类似于这样的问题,范围较广,又没有标准答案,一时回答不上来,却影响了面试结果,实在不应该啊。
本文就css盒子模型的概念,用法回答面试官的问题。
首先,怎么理解盒子模型,就是要把设置距离的html元素看成一个盒子,这个盒子由margin;border;padding;content这些css属性组成。
只不过让我们称之为模型的是,根据css属性box-sizing值不同。css盒模型可以分为标准盒模型和ie盒模型;当box-sizing值为:content-box时为标准模型,当box-sizing值为:border-box时为ie模型;这二者的区别很简单,见下图
所以有些面试官就问了:盒模型中标准模型和ie模型有什么区别?你会回答了吧;
所以在项目中,如果你要用某种模型,用box-sizing设置成某种模型即可;