盒子模型
在进行布局前要把数据封装到一块区域内
1、边框
属性：
border: 2px solid blue;
border：可以统一设置上下左右，也可以单独设置
上：border_top
下：border_bottom
左：border_left
右：border_right
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div
{
width:200px;
height:100px;
border:2px solid blue;
}
#div12
{
border-right:2px dashed yellow;
}
</style>
</head>
<body>
<div id = "div11">AAAAAAAA</div>
<div id = "div12">BBBBBBBB</div>
<div id = "div13">CCCCCCCC</div>
</body>
</html>
2、内边距
属性：
padding：可以统一和单独设置，上下左右类似border
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div
{
width:200px;
height:100px;
border:2px solid blue;
}
#div21
{
padding:20px;
}
#div22
{
padding-left:20px;
padding-top:40px;
padding-right:10px;
}
</style>
</head>
<body>
<div id = "div21">AAAAAAAAA</div>
<div id = "div22">BBBBBBBB</div>
<div id = "div23">CCCCCCCC</div>
</body>
</html>
3、外边距
属性：
margin：可以统一和单独设置，上下左右类似border
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div
{
width:200px;
height:100px;
border:2px solid blue;
}
#div31
{
margin:30px;
}
#div32
{
margin-left:20px;
margin-right:30px;
margin-top:40px;
}
</style>
</head>
<body>
<div id = "div31">AAAAAAAAA</div>
<div id = "div32">BBBBBBBB</div>
<div id = "div33">CCCCCCCC</div>
</body>
</html>
