HTML入门之盒模型概念

盒模型概念

HTML页面的组成可以看作是各个部件之间的组合，如页面顶部区域，页面导航区域，图片轮播区域等等，而这些区域是被一个个“容器"所承载的，这种容器就称为”盒模型“

盒模型简图

盒模型组成

1.盒模型可以看作是一个个盒子，每个盒子都占据一定的空间，拥有宽度和高度。
宽度：width
高度：height

2.盒子是用来存放内容的，为了能在页面中更好的布局，体现更好的视觉效果拥有内间距、外间距、边框等，可以通过以下属性进行设置。
外边距：
margin-top ： 顶部外间距
margin-bottom ：底部外间距
margin-left:左侧外间距
margin-right：右侧外间距

内边距：
padding-top：顶部内间距
padding-bottom：底部内间距
padding-left：左侧内间距
padding-right：右侧内间距

边框：
border-top：顶部边框
border-bottom：底部边框
border-left：左侧边框
border-right：右侧边框

同级盒模型

1.margin属性用来设置两个同级盒模型之间的外间距，同级盒子指在同一父级盒模型包裹下的同级盒模型
此时两个子级盒模型属于同级盒模型

内外间距

代码如下：

需要注意的是padding在使用过程中会将盒模型”撑大“，撑大的方向需要将宽度或者高度减去撑大的数值才能维持原本期望的大小，而margin只能用于同级盒模型直接的距离设置

盒模型作用及占据空间计算

1.盒模型是页面布局的常用手段，利用盒模型的外间距：margin和内间距：padding可以让盒模型和盒模型内部的内容处于页面内自己想要的位置
2.盒模型的占据空间的计算方法：
宽度：width+margin-left+padding-left+margin-right+padding-right+border
高度：height+margin-top+padding-top+margin-bottom+padding-botton+border