浅析核模型

Posted 2020-09-26

浅析核模型

 

从下图的核模型中可以看出，除开本身元素的宽高外，还有padding、border、margin。

1.padding
内边距
内容不会超过content，始终在里面；不能取负值
pandding:值1 值2 值3 值4;————上右下左的顺时针顺序

2.border
边框

3.margin
外边距
垂直方向（即y轴)的距离会重叠，当值不同时，取最大值，margin可以取负值；左右(x轴)不会。

 

  

 

如何计算一个元素的宽高，公式为元素本身宽高+padding+border+margin。

按上图来计算的话，那么：

宽=270+a2+a4+b2+b4;

高=129+a1+a3+b1+b3;

算在页面所占的宽高，那么：

宽=270+a2+a4+b2+b4+c2+c4;

高=129+a1+a3+b1+b3+c1+c3;