re:从0开始的CSS学习之路 7. 盒子模型

1. 盒子模型

盒子模型（box model）：可以把HTML中所有的元素都理解成盒子，用于装内容的容器
目的就是为了将HTML文档中的内容进行归纳整理，方便管理，从而达到布局的效果

内容区 content
边框 border
内边距 padding
外边距 margin

1. 内容区 `content`

元素中所有的子元素和文本等都在内容区中排列
内容区的大小使用width和height属性设置
width 设置内容区的宽度
height 设置内容区的高度

2. 边框 `border`

边框由三个部分组成，缺一不可！

边框的宽度 border-width
1. 可以分别设置四个边框的宽度
  border-top-width
  border-right-width
  border-bottom-width
  border-left-width
2. 可以利用border-width属性直接设置四个边框的宽度
  border-width: 10px 20px 30px 40px; 上右下左（顺时针）
  border-width: 10px 20px 30px; 上左右下（顺时针）
  border-width: 10px 20px; 上下左右
边框的样式 border-style
可选值：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
1. 可以分别设置四个边框的样式
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style
2. 可以利用border-style直接设置四个边框的样式
  border-style: solid dotted dashed double; （顺时针，和border-width一样）
边框的颜色 border-color
使用方式与border-width一模一样

边框的简写属性：border
border属性可以设置边框所有的样式
border：border-width border-style border-color（顺序无要求）
border-top
border-right
border-bottom
border-left

3. 内边距 `padding`

用于设置内容区域边框之间的距离

可以设置四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
注意：
1. 设置内边距会影响盒子的大小
2. 背景会延伸到内边距

内边距的简写属性：
padding可以直接设置四个方向的内边距
padding: 10px 20px 30px 40px; 上右下左（顺时针）
padding: 10px 20px 30px; 上左右下
padding: 10px 20px; 上下左右
padding: 10px; 上下左右

4. 外边距 `margin`

用于设置盒子与盒子之间的距离，设置外边距并不会影响盒子可见框的大小，但是会影响盒子（其他盒子）的位置

可以设置四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
注意：
1. 盒子的排列是由上到下、由左到右进行排列的。因此改变盒子的上外边距和左外边距
  会改变当前盒子的位置
2. 改变盒子的下外边距和右外边距会改变其他盒子的位置
3. 外边距可以设置负值，盒子会向反方向移动

外边距的简写属性
margin 属性可以直接设置四个方向的外边距
margin: 100px 200px 300px 400px; （顺时针，使用方式与padding一样）

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>box model</title>.box {width: 200px;height: 200px;background-color: #c7edcc;}.box1 {width: 200px;height: 200px;background-color: #c7edcc;/* 边框的宽度 *//* border-width: 10px; *//* border-top-width: 10px;border-right-width: 20px;border-bottom-width: 30px;border-left-width: 40px; *//* border-width: 10px 20px 30px 40px; *//* border-width: 10px 20px 30px; *//* border-width: 10px 20px; *//* border-width: 10px; *//* 边框的样式 *//* border-style: solid; *//* border-top-style: solid;border-right-style: dotted;border-bottom-style: dashed;border-left-style: double; *//* border-style: solid dotted dashed double; *//* border-style: solid; *//* 边框的颜色 *//* border-color: red; *//* border-color: red yellow blue green; *//* 边框的简写属性 *//* border: 10px solid red; */}.box2 {width: 300px;height: 300px;background-color: #c7edcc;border: 1px solid #000;/* 设置四个方向内边距 *//* padding-top: 50px;padding-right: 50px;padding-bottom: 50px;padding-left: 50px; */padding: 10px 20px 30px 40px;padding: 10px 20px 30px;padding: 10px 20px;padding: 10px;}.son {width: 300px;height: 300px;background-color: #fde6e0;}.box3,.box4 {width: 200px;height: 200px;}.box3 {background-color: #c7edcc;/* 设置盒子的外边距 *//* margin-top: 100px;margin-left: 100px;margin-bottom: 100px;margin-right: 100px; */margin: 100px 200px 300px 400px;}.box4 {background-color: #fde6e0;margin-left: -100px;}
</head><body><div class="box"></div><div class="box1"></div><div class="box2"><div class="son"></div></div><div class="box3"></div><div class="box4"></div>
</body></html>