关于HTML的标准盒模型的总结

关于HTML的标准盒模型知识点汇总以及总结

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
盒模型的组成：内容区、补白/填充、边框、边界/外边距。

通俗的来说，元素在页面中显示就像是一个盒子一样
由内容content 内填充padding 边框border 以及外边距margin组成
如何计算元素在整个页面中显示的大小
宽：margin-left+margin-right+border-left+border-right+paddding-left+padding-right+content本身的宽度
同理可得如何计算元素在页面中的总高度为：
margin-top+margin-bottom+border-top+border-bottom+paddding-top+padding-bottom+content本身的高度

以下分别介绍盒模型中的各个属性

padding

首先介绍padding padding是盒模型中的内填充
padding的作用：控制子元素在父元素里面的位置关系。
如果想让盒子保持原有的大小：在宽高基础上减掉。（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）

---------------------------以下为举例-------------------------------------------------
如：一个块元素div我们将他的宽高分别设置为width：200px；height：300px
给元素加上padding属性的话，如：padding：10px；
那么padding将会将整个块元素给撑大，那么此时，div的所占据的空间将为width：220px；height：220px；
如果要使得块元素占据的空间大小不变的话，那么要将div的宽高分别减去20px；

-------------------------分割线---------------------------------------------------------
padding的添加方法：
如果给单一方向添加padding
padding-top/bottom/left/right
padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不会对背景图的位置造成影响。

margin
之后我们来介绍margin margin是盒模型中的外边距
margin作用:控制元素与元素之间的间距。
注！！与padding不同的是，margin在元素的外侧，想当与元素与元素之间的间距，并不会撑开元素本身的大小

margin的设置方法：
给单一方向添加margin
margin-left/right/top/bottom
margin用法
（外边距、边界）
margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
margin:0 auto;
让当前元素在父元素里面左右居中

重点：
margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。

拓展：如果要消除margin的叠加bug，需要使用到bfc。

以上为盒模型的部分知识点汇总，谢谢各位看官的浏览，拜谢~