一、盒子模型
1.内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
默认情况：设置width，height都是内容区宽高
2.边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
简单的演示：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100%;
height: 100%;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
二、盒子边框
1.边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
边框大小：border-width
边框样式：border-style
边框颜色：border-colo
2.边框值的设定
边框的大小 如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
3.边框的样式
border-style 可选值
默认值：none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
4.设置边框的颜色 默认颜色是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
5. 单独设置某一边的边框颜色
border-（填上下左右）-color: ;
6.可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
7.去除某个边框
border:none;
三、盒子内边距
1.
内边距 padding
是内容区和边框之间的距离，会影响到整个盒子的大小
a、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
b、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
简单的样式展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: turquoise;
border: blue solid 10px;
border-bottom: none;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
四、盒子外边距
1.外边距 不会影响到盒子的大小
a.可以控制盒子的位置
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动，其靠下的元素向下移动，负值 元素自己不懂，其靠下的元素向上移动
b.margin-right: ; 正值负值都不动
简写 margin 可以跟多个值
规则跟padding一样
简单的样式：
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
margin: 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>