现认知盒模型的基础概念

1、基本概念

标准盒模型由一下4个值组成
1、margin(外围区域)
2、border(边框区)
3、padding(内填充区)
4、content(内容区)
现认知盒模型的基础概念

2、各属性的特点

1、padding值:

它的设置会影响盒子尺寸
占用空间
不同盒模型下的特点也不一样
标准盒模型设定下,影响盒子自身尺寸

怪异盒模型设定下,影响盒子内部内容的区域尺寸
怪异盒子,本身不会影响盒子设定好的外部尺寸
如图:
现认知盒模型的基础概念

2、 margin值:
占用空间
影响同辈元素之间的距离
需要注意的是
上边元素的 margin-bottom 与 下边元素的 margin-top
取两者之间最大值, 不是相加关系
如图:
现认知盒模型的基础概念