在编写网页代码时，首先应该设计好页面的布局形式，然后再给页面布局填充内容。网页布局与定位，也就是要决定某一个模块安置的具体位置，占据多大的空间。而不是深究模块内部填充的内容：
container：整个大布局的容器
header：页眉部分
navbar：导航条
main：主要内容部分
menu：左侧菜单
content：主要内容
sideba：边条
footer: 页脚
接下来主要介绍盒子模型和定位机制两个部分，盒子模型决定元素是什么样，而定位机制则决定这个元素放在哪。
盒子模型
页面上的一个区域，图片，导航栏，列表，导航栏，段落等等都可以看做是一个盒子模型，页面中所有的元素都可以是盒子，占据着一定的页面空间大小.
1.盒子模型的组成
content: 内容，图片或者文字
height: 高度
width: 宽度
padding： 内边距，位与内容与边框之间的空白距离
border： 边框，盒子的边框
margin： 外边距，边框之外的一段空白距离，可以通过两个盒子的外边距来设置两个盒之间的距离.
一个盒子的实际宽度和高度=content+padding+border+margin组成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#box{
width:300px;/*content的宽*/
height:200px;/*content的高*/
border:1px solid;/*边框1px，实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
}
</style>
</head>
<body>
<div id="box">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
2.盒子模型溢出处理overflow
| 分量 | 描述 |
|---|---|
| hidden | 隐藏，超出部分不可见 |
| scroll | 显示滚动条 |
| auto | 如果有超出，显示滚动条 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#box1{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px，实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
}
#box2{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px，实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: hidden;
}
#box3{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px，实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: scroll;
}
#box4{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px，实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: auto;
}
</style>
</head>
<body>
<div id="box1">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<br>
<br>
<br>
<div id="box2">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div id="box3">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div id="box4">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
3.边框border属性
border可以给盒子的边框设置样式，相较于< hr/ >标签它的功能更加丰富，可以设置宽度，高度，样式，颜色等.
| 属性 | 描述 | 取值 |
|---|---|---|
| border-width | 边框的宽度 | 单位是px,thin,medium,thick不同浏览器对后三者解析不一样，一般用前者 |
| border-style | 边框的样式 | dashed(一个个横线),dotted(点),solid(实线),double(双实线) |
| border-color | 边框颜色 | color |
| border: | 可以直接将分量全部设置在border下 | border:width,style,color |
另外值得注意的是border包括了top，right，bottom，left四个方向，可以用border-direction来分别设置
水平分割线的制作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.line{
height:1px;
width:500px;
border-width:2px;
border-style:solid;
border-color:#FFB6C1;
}
</style>
</head>
<body>
<dir class="line"></dir>
</body>
</html>
效果如下：
4.内边距padding和外边距margin
对于外边距或者内边距浏览器会给他们一个默认的值，我们要先给这两个属性清零,通常采用全局的方式清零：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
padding和margin的4个分量值：
| 分量 | 描述 | 取值 |
|---|---|---|
| padding-top/margin-top | 设置上边距 | 20px/15%(百分号相对于外层的盒子) |
| padding-right/margin-right | 设置左边距 | 20px/15%(百分号相对于外层的盒子) |
| padding-bottom/margin-bottom | 设置下边距 | 20px/15%(百分号相对于外层的盒子) |
| padding-left/margin-left | 设置左边距 | 20px/15%(百分号相对于外层的盒子) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding和margin</title>
<style type="text/css">
div{
width:300px;/*content的宽*/
height:200px;/*content的高*/
border:1px solid #00FA9A;/*边框1px，实线*/
margin:10px 10px 20px 10px;/*外边距，有四个分量，中间用空格隔开*/
padding:10px;/*内边距*/
overflow: auto;
}
</style>
</head>
</head>
<body>
<div>
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div>
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
1.div盒子独占一行
2.垂直方向有一个合并的效果
水平居中的设定：
对于文字和图片都可以用text-aling:center来设置
对于盒子或者div水平居中一般设置外边距，margin：0 auto; 来实现这个div区域的水平居中.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding和margin</title>
<style type="text/css">
#newsimagelist{
text-align: center;/*给内容设置水平居中*/
font-size:0;/*否则会有间隙*/
}
#newsimagelist img{/*选择器嵌套*/
height:150px;
width:200px;
margin: 5px;
border: 1px solid #0cf;
padding: 5px;
}
</style>
</head>
</head>
<body>
<div id="newsimagelist">
<img src="images/Weixin.png">
<img src="images/Tencent.png">
<img src="images/Google.png">
</div>
</table>
</body>
</html
