盒子模型
网页布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面
1.1看透网页的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子BOX
- 利用CSS设置好盒子样式，然后摆到相应位置
- 往盒子里面装内容
网页布局的核心本质：就是利用CSS摆盒子
1.2盒子模型（Box Model）组成
1.3边框（border）
border-style中常用的三种边框样式：
<style>
div {
width: 300px;
height: 200px;
border-width: 5px;
/* border-width 边框的粗细 一般用px */
border-color: pink;
border-style: solid;
/* border-style: solid 实现边框 dashed虚线边框 dotted点线边框 */
}
</style>
<body>
<div>
</div>
</body>
边框的复合写法：
课堂小案例：设置一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定要注意边框的层叠性）
/* 正确写法1： */
div {
width: 200px;
height: 200px;
border-width: 5px;
border-style: solid;
border-top-color: red;
border-left-color: blue;
border-bottom-color: blue;
border-right-color: blue;
}
/* 太复杂 */
/* 正确写法2 */
div {
width: 200px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: blue;
border-top-color: red;
}
/* 此时border-color在上,border-top-color在下 */
/* 错误写法 */
div {
width: 200px;
height: 200px;
border-width: 5px;
border-style: solid;
border-top-color: red;
border-color: blue;
}
/* 此时border-color在下,border-top与border同属一种选择器，boeder-top被层叠，上边框也为蓝色，错误 */
1.4表格的细线边框
1.5边框会影响盒子实际大小
边框会额外增加盒子的大小。因此我们有两种解决方案：
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要width/height减去边框宽度。（注意左右）
1.6内边距（padding）
1.6.1padding
1.6.2padding复合属性
padding属性（简写属性）可以有一到四个值
1.6.3padding会影响盒子实际大小
注意：
当我们给盒子指定padding值之后，发生了两件事情：
- 内容和边框有了距离，添加了内边距。
- padding影响了盒子实际大小。
也就是说，如果盒子已经有了高度和宽度，此时再指定内边框，会撑大盒子。
解决方案：
如果保证了盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
padding影响盒子大小的好处：
一定情况下保证了文字与文字之间间距相等.（如下例）
1.6.4padding应用案例：新浪导航栏-padding影响盒子好处
参考代码：
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
}
.nav a {
text-decoration: none;
display: inline-block;
height: 41px;
font-size: 12px;
line-height: 41px;
color: #4c4c4c;
padding: 0 20px;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
<body>
<div class="nav">
<a href="#">新浪微博</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
1.6.5 padding不会撑开盒子的情况
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小.
例1：
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
<body>
<div>
<p></p>
</div>
</body> 此时，p标签（块元素，默认宽度撑满了整个div）未指定宽度和高度，p盒子的padding没有撑开div盒子 。
例2：
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
width: 100%;
padding: 30px;
background-color: skyblue;
}
</style>
<body>
<div>
<p></p>
</div>
</body> 此时，p标签指定了宽度100%，撑大了div盒子。
1.7外边距（margin）