两种不同的盒模型

盒子模型的组成

边框（border） 外边距（margin） 内边距（padding）

border属性

元素的边框就是围绕在内容和内边距的一条或多条线,它的属性是border
边框有三个属性值1.宽度 2.样式 3.颜色
border:width style color;
宽度
样式 solid->实线 dashed->虚线 dotted->点状线 double->双线
颜色
1) 颜色英文单词
2) 十六进制
单边框border-top / border-right / border-bottom / border-left

<style>
div{
 width:50px;
 height:50px;
 padding:10px;
 border-top:5px solid red;/*上边框*/
 border-right:5px solid green;/*右边框*/
 border-botton:5px solid yellow;/*下边框*/
 border-left:5px solid pink;/*左边框*/
 background-color:blue;
}
</style>

单边框属性值分开 border-top-width / border-top-style / border-top-color

<style>
div{
 width:50px;
 height:50px;
 padding:10px;
 border-top-width:5px;
 border-top-style:solid;
 border-top-color:blue;
 background-color:pink;
}
</style>

四条边框复合写法

<style>
div{
width:50px;
height:50px;
border:5px solid red;
background-color:pink;
}
</style>

注意：border-color：transparent；边框透明
border-top：none；去掉某一边边框

padding属性

元素的内边距在边框和内容区之间,它的属性是padding
单内边距属性 padding-top / padding-right / padding-bottom / padding-left

<style>
div{
 width:50px;
 height:50px;
 padding-top:5px;/*上内边距*/
 padding-right:10px;/*右内边距*/
 padding-bottom:15px;/*下内边距*/
 padding-left:20px;/*左内边距*/
 background-color:red;
}
</style>

多内边距+属性值个数padding
4个属性值: 上 右 下 左
3个属性值: 上 (右左) 下
2个属性值: (上下) (左右)
1个属性值: (上右下左)

<style>
div{
 padding:5px 10px 15px 20px;/*四个属性值*/
 padding:5px 10px 20px;/*三个属性值*/
 padding:5px 10px;/*两个属性值*/
 padding:5px;/*一个属性值*/
}
</style>

margin属性

围绕在元素边框的空白区域,设置外边距会在元素与元素之间产生一个间距,它的属性是margin
外边距写法和内边距相同,只是属性不同
单外边距 margin-top / margin-right / margin-bottom /margin-left
多外边距+属性值margin
4个属性值: 上 右 下 左
3个属性值: 上 (右左) 下
2个属性值: (上下) (左右)
1个属性值: (上右下左)

标准盒子模型(默认)

box-sizing:content-box;
原理：
内容宽高+内边距+边框+外边距
内容宽高：
width宽,height高

怪异盒模型

box-sizing:border-box;
原理：
内容宽度+外边距(内容宽高包含了内边距和边框)

垂直外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
同级元素在竖直方向有margin时发生合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

父子级之间在竖直方向有margin时发生外边距合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

外边距合并的结局方案
同级元素给第二个元素浮动,添加绝对定位,单独设置某一个元素inline-block
父子级元素外边距合并解决办法
1）给父级设置内边距代替自己外边距记住
2）给父级加边框
3）给父级overflow:hidden（生成BFC）;
4）设置绝对定位
5）设置display:inline-block;