盒子模型
div
div 可定义文档中的分区（division）。
div 标签可以把网页分割为独立的、不同的部分。
<div> 不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class，然后通过css选中某个div，对其进行样式美化。
<div class="demo">我是一个div</div>
<style>
.demo{
color:red;
font-size: 20px;
}
</style>
每个div可以看成一个盒子
一个盒子中主要的属性有5个：width、height、padding、border、margin。
如下：
width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border
height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border
padding：内边距。
border：边框。
margin：外边距。
元素宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div>我是一只小小鸟</div>
</body>
</html>
边框
属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
border-color 四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色：#369
左、右边框颜色：#000
border-color:#369 #000;
上边框颜色：#369
左、右边框颜色：#000
下边框颜色：#f00
border-color:#369 #000 #f00;
上、右、下、左边框颜色：#369、#000、#f00、#00f
border-color:#369 #000 #f00 #00f;
边框粗细
border-width:像素值
order-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
边框样式
none
hidden
dotted
dashed
solid
double
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
border简写
同时设置边框的颜色、粗细和样式
> border-bottom: 9px #F00 dashed ;
border: 9px #F00 dashed ;
外边距
margin-top
margin-right
margin-bottom
margin-left
margin
margin-top: 1px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin : 3 px 5 px 7 px 4 px;上右下左
margin: 3px 5px;
margin: 3px 5px 7px;
margin: 8px;
外边距的妙用
网页居中对齐
前提，居中对齐的网页元素必须设定宽度。
margin:0px auto;
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;上右下左
padding:10px 5px;上下 左右
padding:30px 8px 10px ;上 左右 下
padding:10px;上下左右
