盒模型
网页中，每一个元素都占有一定的空间，无论是div、p等等，都可以看成盒子
盒模型的组成
一个元素占有空间的大小由下面几部分组成：
-
content（元素内容）
-
padding（内边距）：内容与边框之间的距离
-
border（边框）
-
margin（外边距）：边框与外部元素之间的距离
其中 padding、margin 又细分为上、右、下、左四个方向：
Padding： Padding-top：上内边距 Padding-right：右内边距 Padding-bottom：下内边距 Padding-left：左内边距 Margin： Margin-top:上外边距 Margin-right:右外边距 Margin-bottom:下外边距 Margin-left:左外边距
对于padding、margin的取值（注意：是不允许存在负值）
-
不赋值
-
默认情况下是0，也就是不会有内外边距
-
赋值
-
一个值时
-
Padding：10px； 四个内边距都为10px
-
两个值时
-
Padding：10px 20px; 上下内边距为10px，左右内边距为20px
-
三个值时
-
Padding：10px 20px 30px；上10px,左右20px，下30px
-
四个值时
-
Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40
注意：margin重叠，也叫margin塌陷
<head>
<meta charset="UTF-8">
<title>margin叠加</title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 100px;
height: 100px;
border:1px solid;
background-color: teal;
margin-bottom: 10px;
}
.b{
width: 100px;
height: 100px;
border:1px solid;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
CSS外边距合并
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。
如图：1、父子margin合并 2、兄弟margin合并
如何阻止父子margin合并
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有三个：
1. 给父元素加边框border :border-top
2. 给父元素设置padding值 : padding-top
3. 父元素添加 overflow：hidden
如何阻止兄弟之间合并
可以用：inline-block消除
另外：margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
如果向设置父子之间的距离，我们最好使用父元素的padding。
border:
设置边框的宽度：Border-width
设置边框的样式： Border-style
设置边框的颜色： Border-color 颜色如果不写，默认为黑色
border-syle有多种取值，常见的为：
solid dotted double dashed ; 分别代表实线、点状线、双线、虚线
简写： border：1px solid red; ------- > 边框为1px、红色的实线
盒子的分类：
-
W3C标准盒子：content-box
-
IE盒子：border-box
通过：box-sizing 的取值来切换盒模型，它的取值可以为content-box、border-box
box-sizing的默认属性是content-box。
下面就介绍content-box与border-box
content-box
-
width=内容宽度，子元素可以撑开父元素.
border-box
-
width=内容宽度+padding+border。
具体如图：
说完两种盒模型的区别，现在我们可以通过实例来看看它们的具体的不同
demo:
一个盒子模型如下：
margin:20px,
border:10px,
padding:10px;
width:200px;
height:50px;
现计算出两种盒子模型下盒子的宽高。
content-box
盒子占用空间的宽高：（在浏览器页面所占空间） Width = 200 + 10*2 + 10*2 + 20*2 = 280 px; Height = 50 + 10*2 + 10*2 + 20*2 = 130 px; 盒子实际宽高： Width = 200 + 10*2 + 10*2 = 240 px; Height = 50 + 10*2 + 10*2 = 90 px;
border-box
盒子占用空间的宽高：（在浏览器页面所占空间） Width = 200 + 20*2 = 240 px; Height = 50 + 20*2 = 90 px; 盒子实际宽高： Width = 200 px; Height = 50 px;
由数据可以看出，同样的数据下，border-box是比content-box要小的。
盒子显示（display）类型
常见的display的类型
三种常见的值为 block、 inline、 inline-block.
-
块盒(block box)
-
被定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。
-
行内盒（inline box）
-
与块盒相反：它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。
-
行内块盒（inline-block box）
-
介于前两者之间： 它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）。
块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline; 。
