你真的了解盒模型吗?

一个页面在html的世界里,意味着 是一个个的标签组成的
一个页面在css的世界里,是一个个盒子+盒子的位置组成的

简单来说:一个页面就是一堆盒子的构成,这是主心骨,至于盒子大小,位置如何,显示效果,和移动状态都是基于先有盒子这个核心里面,请记住,一个页面就是一堆盒子

盒模型:
一个完整的盒子=content+padding+border+margin组成
盒模型一般又分为两种(浏览器厂商大战,历史遗留问题) ie/w3c两种,两者区别在于对Content(内部盒子)的定义不同,注意这里的Content是大写开头,区别于上面的content
ieContent=content+padding+border
W3CContent=content

这有什么影响呢? 这会影响到宽高值,我们常用到css代码中的width和hight但是很少注意到,这里的值指的是盒子的内部盒子Content的宽高值,而不是整个元素的宽高

举颗栗子:
width:100px;
height:100px;
在ie的某个div元素下用这样的代码,就意味着,content宽+padding宽+margin宽三者总的宽度是100px;
而在w3c下,只是单纯指的content内容的宽高值

在css3中,我们可以用box-sizing 的属性中的content-box和border-box的值来使得对应的元素可以根据不同的盒模型来显示

那么我们应该什么时候分别用content-box和border-box呢? 看你的项目,如果要兼容ie那就用border-box,如果不用兼容ie就用标准盒子content-box

盒模型又细分外部盒子,内部盒子,两者分别掌控者一个盒子内外展示的状态;display其实就是为他们两设置的

举颗栗子:
dispaly:inline-block
display :inline-block的意思就是外部根据inline行来显示,也就是内联元素与块元素文档流的区别,block指的是一个盒子的内部内容根据block来显示也就是根据块元素流来显示盒子

dispaly的作用就是影响一个盒子的显示状态,或者更具体一点说是影响一个盒子内外的文档流状态;除此之外它还影响了元素的流,一个元素不设置width值的时候,默认是auto

几个同类型的元素,比如几个div但是display的值不一样,那么默认的width值显示的效果也是不一样