盒⼦模型（BoxModel）
⼀、概述
所有的HTML元素都可以看作是盒⼦，⽽⽹页布局的本质：利⽤CSS摆盒⼦，装内容。
盒⼦模型由：内容（content）、边框（border）、内边距（padding）、外边距（margin）构成。
盒⼦模型实际⼤⼩=内容的宽度与⾼度+边框+内边距
1、边框（border属性）
语法：border:border-width||border-style||border-color
注意：
border为复合属性，这是边框的复合写法，没有固定的顺序，但习惯这样。
边框的⼤⼩会影响实际盒⼦的⼤⼩
也可以分开写，如border-top上边框、border-bottom下边框、border-right右边框、border-left左边框。
（1）边框宽度（border-width)
值描述
medium默认宽度
thin⼩于默认宽度
thick⼤于默认宽度
指定⼤⼩由浮点数字和单位标识符组成的长度值，不可为负值如10px等
（2）边框样式（border-style）
值描述
none默认⽆边框。与任何指定的border-width值⽆关
solid实线边框
double双线边框。两条单线与其间隔的和等于指定的border-width值
hidden隐藏边框。IE不⽀持
dotted点线
dashed虚线
groove根据border-color的值画3D凹槽
ridge根据border-color的值画菱形边框
inset根据border-color的值画3D凹边
outset根据border-color的值画3D凸边
2、内边距（padding属性）
定义元素边框与元素内容之间的距离，即上（padding-top）下（padding-bottom）左（padding-left）右（padding-right）的内边距。
内边距会影响盒⼦的实际⼤⼩，即会撑⼤盒⼦
如果没有给⼀个盒⼦指定宽度，⽽给它指定了padding值，则这种情况下padding不会撑⼤盒⼦
写法表⽰
padding：10px;1个值表⽰上下左右内边距都为10px
padding：10px 5px;2个值表⽰上下内边距为10px左右内边距都为5px
padding：10px 4px 5px;3个值表⽰上内边距为10px，左右内边距都为4px，下内边距为5px
padding：10px 4px 5px 7px;4个值表⽰上内边距为10px，右内边距都为4px，下内边距为5px，左内边距为7px.即顺时针的顺序
注意：（内边距、外边距都适⽤）
只提供⼀个参数，将⽤于全部的四边。
提供两个参数，第⼀个⽤于上－下，第⼆个⽤于左－右。
提供三个参数，第⼀个⽤于上，第⼆个⽤于左－右，第三个⽤于下。
提供全部四个参数值，将按上－右－下－左顺时针的顺序作⽤于四边。
其参数值可以是百分⽐
3、外边距（margin属性）
控制盒⼦与盒⼦之间的距离。即上（margin-top）下（margin-bottom）左（margin-left）右（margin-right）的外边距。
外边距可以让块级盒⼦⽔平居中，但必须满⾜：
（1）盒⼦必须⾃动宽度
（2）盒⼦的左右外边距设为auto
如：margin：0 auto；或margin：auto；或margin-right：auto；margin-left：auto；
注意：对⾏内元素⽆效，但可以给其⽗级的元素添加：text-align：center;(使⽂字⽔平居中）也可以使其达到⽔平居中
清除默认的内外边距
*{padding:0;
margin:0;}
在写css代码时，第⼀句先写此代码。
注意：⾏内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
垂直外边距合并（塌陷）
使⽤margin定义块级元素垂直外边距时，可能会出现外边距合并
（1）相邻块元素垂直外边距合并（塌陷）
当上下相邻块元素相遇时，下⾯元素有margin-top，上⾯元素有margin-bottom，则它们两者之间的垂直间距不是margin-top与margin-bottom之和
⽽是取这两个值中较⼤的那⼀个这种现象称为相邻块元素垂直外边距合并（也称为外边距塌陷）
**解决⽅案：**尽量只给⼀个盒⼦添加margin值
（2）嵌套块元素垂直外边距合并（塌陷）
对于两个嵌套关系（⽗⼦关系）的块元素，如果⽗元素没有上内边距及边框
borderbox⽗元素的上外边距会与⼦元素的上外边距发⽣合并，合并之后外边距为两个中的较⼤者。
解决⽅案：可以为⽗元素定义上边框、或者可以为元素定义上内边距、或者可以为⽗元素添加overflow：hidden;

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