基本概念
1.网页布局的本质是根据设计图设计好盒子的大小以及摆放的位置，再将网页元素放进盒子里。
2.盒子由元素内容、边框、内边距、外边距组成。
3.边框为盒子的厚度；
内边距为元素内容与边框的距离；
外边距为盒子之间的距离。
边框border
1.基本语法border : border-width || border-style || border-color ;
border-style:
- none：没有边框（默认值）
- solid：单实线
- dashed：虚线
- dotted：点线
2.边框综合设置无固定顺序border : border-width || border-style || border-color;
3.以上设置会对上下左右四个边框都生效，需要单独设置的时候，
4.表格边框
一个普通的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
<caption>
个人信息表
</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>小红</td>
<td>12</td>
</tr>
<tr>
<td>02</td>
<td>小红</td>
<td>12</td>
</tr>
<tr>
<td>03</td>
<td>小兰</td>
<td>11</td>
</tr>
<tr>
<td>04</td>
<td>小明</td>
<td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
这里是注释
</td>
</tr>
</tfoot>
</table>
</body>
</html>
由于设置了cellspacing="0"，即单元格之间的距离设置为0，导致单元格之间的边框重叠，使实际展现的边框比设置的cellpadding="10"要粗，这个问题可以通过设置css来解决。
<style>
table, td {
border-collapse: collapse;/*合并相邻边框*/
}
</style>
内边距padding
1.分开写的情况：
2.简写：
3.当设置padding值后，发生了两件事：一是内容与边框间有了距离，即有了内边距；二是盒子变大了。
例：导航栏中文字长度不一，所以用padding撑开距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border-top: 5px orange solid;
border-bottom: 3px gray solid;
}
div a {
display: inline-block;
text-decoration: none;
color: black;
padding: 20px;
}
div a:hover {
color: orange;
background-color: #cccccc;
}
</style>
</head>
<body>
<div>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
4.盒子的实际大小=内容的宽度高度(width,height)+内边距+边框，实际设计的时候要注意这一点。
外边距margin
1.margin用于控制盒子与盒子之间的距离
2.margin的简写与padding相同。
3.实现块级盒子水平居中
必须满足两个条件：盒子必须指定宽度；左右外边距设置为auto。
4.文字居中和盒子居中的区别
盒子内的文字水平居中利用text-align:center;，垂直居中利用行高=盒子高度；
盒子水平居中利用margin:上下外边距 auto;
5.插入图片和背景图片的区别
插入图片利用<img src="#"/>，在盒子中的位置通过padding调节；
背景图片则利用background: url(img);，位置通过background-position调节。
6.清除元素的默认外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意在网页设计中，一般为了兼容性，只设置左右的内外边距。
7.外边距合并
1）上下相邻的块元素
像这样的情况，合并后的外边距会取两个外边距的较大值，也称外边距塌陷。如果要避免这种情况，那么就只设置其中一个的外边距，这样就不会有塌陷。
2）嵌套块元素
在两个嵌套的块元素中，如果父元素没有设置上内边距和边框，那么父元素的上外边距与子元素的上外边距会发生合并，依旧是取较大值。如果要避免这种情况，可以给父元素设置上内边距或边框或添加overflow:hidden
盒子模型布局的稳定性
根据稳定性，优先使用width，其次是padding，最后是margin
原因：
padding会把盒子撑开，影响盒子的实际大小；
margin可能会出现外边距合并的情况，比较麻烦。
ps基本操作
标尺ctrl+R
放大缩小ctrl+/-
利用切片工具可以测量各个元素的大小
综合案例
去掉列表的默认样式li { list-style: none; }
一个简陋的综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*清除默认的内外边距*/
* {
margin: 0px;
padding: 0px;
}
li { /*去掉列表默认的样式*/
list-style: none;
}
.dad {
width: 500px;
height: 300px;
margin: 100px auto; /*左右外边距设置为auto可以实现盒子的水平居中*/
border: 1px solid #cccccc;
padding: 15px; /*设置大盒子的内边距，这样就不用设置小盒子的外边距，时刻记得优先使用*/
}
.dad .title {
height: 50px;
border-bottom: 1px solid #cccccc;
text-align: center;
}
.dad .text ul li a {
text-decoration: none;
font-size: 20px;
color: black;
line-height: 44px;/*利用行高实现五条内容垂直均匀分布*/
border-bottom: 1px dashed #cccccc;
}
</style>
</head>
<body>
<div class="dad">
<div class="title">
<h1>标题</h1>
</div>
<div class="text">
<ul> <!--无序列表-->
<li><a href="#"><img src="img/10-img.png" height="20px"/>第一条内容</a></li>
<li><a href="#"><img src="img/10-img.png" height="20px"/>第二条内容</a></li>
<li><a href="#"><img src="img/10-img.png" height="20px"/>第三条内容</a></li>
<li><a href="#"><img src="img/10-img.png" height="20px"/>第四条内容</a></li>
<li><a href="#"><img src="img/10-img.png" height="20px"/>第五条内容</a></li>
</ul>
</div>
</div>
</body>
</html>
