盒子模型
我们把布局里面的所有东西都可以想象成一个盒子,盒子里面又装着小盒子,小盒子里面又装着小小盒子......
所以布局的万物基于盒子。即使一个小小的元素p,也可以把它抽象成为一个盒子。
你现在心里有很多疑问,没关系,接着看。
以下是标准的盒子模型。(图片来源)
我们平常给元素加上的width,height实际上就是给内容区域加宽和高。我们增加内外边距的时候不改变内容区域的大小,却会改变整体的大小。如果我们为元素加一个1像素的框的话,那么我们能看见的只是框里面的东西(内边距+内容区域),如果在元素上添加背景,背景也会应用于这一区域,而外边距是不可见的,它是用来分隔各个元素。
虽然外边距是不可见的,但是我们算元素的总宽度或者总高度的时候,要加上外边距。
即:
height总=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom
width总=margin-left+border+padding-left+width+padding-right+border+margin-right
如果只在视觉上固定框的大小不用加入margin进行计算。这里和《精通CSS 高级web标准解决方案(第二版)》有不同的意见。(P39-P40,我认为书中出错)
外边距的合并问题
什么是合并
就是外边距中会有叠加的情况,取两者中最大的一个作为间隔