H5中的盒模型
盒模型的概念padding是外边距还是内边距
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，中国加油

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。