H5中的盒模型

盒模型的概念

HTML中页面基本是有一个一个的盒子组成，而盒子里装有如同货物的东西，也就是内容（图片、视频、文本等）；而盒子里的货物和盒子本身的空隙，称之为内填充（padding），也相当于补白；盒子的自身就如同边框一样（border）。同时，在两个盒子之间的距离为外边距（margin），这就是盒模型。

盒模型图

盒模型的组成

1、盒模型相当于一个盒子，因此其是拥有宽度和高度的：
宽度：width
高度：height
2、而盒子是用来放东西的，里面东西和盒子之间的间隙，称之为内间距：
padding-top：顶部的内间距
padding-bottom：底部的内间距
padding-left：左边的内间距
padding-right：右边的内间距

3、而盒子本身相当于盒子里面的东西而言，就如同HTML中的边框：
border-top：顶部边框
border-bottom：底部边框
border-left：左侧边框
border-right：右侧边框
4、在同级的盒子与盒子之间的距离，称之为外间距：
margin-top顶部的外间距
margin-bottom：底部的外间距
margin-left：左边的外间距
margin-right：右边的外间距

同级的盒模型图

盒模型的宽高的计算

盒模型的宽度计算：
width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

盒模型的高度计算：
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom

在盒模型中需要注意的地方

在盒模型中，内间距（padding），它是长在内容和盒子之间的，也就是在盒子里面的，所以在使用padding的过程中，会将盒子给撑大；而由于盒子的大小一般是不变的，因而在它撑大的方向上需要将盒子的宽度或高度减去那个撑大的数值，由此使得盒子的大小保持原来的数值，而margin只是长在盒子外围的，其只能用在同级盒子的距离设置
内外间距的图：

实现上图的代码：

由上面的图片的代码可以清楚地看到当盒子的宽度或高度没有减去padding的数值，则它的宽度或者高度就会被撑大。
逆战2020，中国加油！！！