CSS中将每一个元素都设置为了一个矩形的盒子

将所有的元素都设置为盒子，是为了方便页面的布局

当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

盒子模型

每个盒子都由如下几部分构成
内容区
内容区相当于盒子存放东西的空间
内容区在盒子的最里边
元素的所有的子元素都是放在父元素的内容区
内容区设置
width
内容区的宽度
height

内容区的高度

内边距
内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
盒子中一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
padding
可以同时设置四个方向的内边距，规则和border-width一致
padding:上 右 下 左
padding:上 左右 下 
padding:上下  左右 
padding:上下左右 

盒子的可见框大小由内容区、内边距和边框共同决定

边框
边框盒子可见框最外侧，边框是盒子的边缘
设置边框
设置边框需要同时设置三个样式，缺一不可
border-width
边框的宽度
可以同时指定四个边框的宽度，也可以分别指定
规则
四个值
border-width : 10px 20px 30px 40px;
border-width : 上 右 下 左;
三个值
border-width : 10px 20px 30px;
border-width : 上  左右  下 ;
两个值
border-width : 10px 20px;
border-width : 上下  左右   ;
一个值
border-width : 10px;
border-width : 上下左右   ;
border-color
边框的颜色
border-style
边框的样式
none:无边框
dotted：点状
solid：实线
dashed：虚线
double：双线
除了这三个样式，CSS中还提供了
border-xxx-width
border-xxx-color
border-xxx-style
xxx可以是
top
right
bottom
left

通过这些样式可以单独指定四个边的颜色，宽度和样式

边框的简写属性
border
border-left
border-top
border-right
border-bottom
这个几个属性可以同时设置边框相关的的样式
border可以同时设置四个边的颜色，宽度，样式
border-xxx可以单独设置某一个边
规则

使用这些样式可以同时设置border-width border-style border-color，不同的属性使用空格隔开，并且没有顺序要求

这个几个属性可以同时设置边框相关的的样式
border可以同时设置四个边的颜色，宽度，样式
border-xxx可以单独设置某一个边
规则

使用这些样式可以同时设置border-width border-style border-color，不同的属性使用空格隔开，并且没有顺序要求

外边距
外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
也是具有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
简写属性
margin
规则和padding一致
margin值
可以设置为auto
如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值
如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，通过这种方式使一个子元素在它的父元素中水平居中
margin:0 auto
可以设置为负值

如果将margin设置为负值，则元素会向相反的方向移动

外边距的重叠
相邻的垂直外边距会发生重叠现象
相邻元素的外边距会取最大值
子元素的外边距会传递给父元素

水平外边距不会重叠，而是取和

内联元素的盒子模型
width
height
padding
支持水平方向的padding
垂直方向的padding也支持，但是不会影响布局
border
支持四个方向边框，但是垂直的边框不会影响布局
margin
支持水平方向外边距
不支持垂直方向的

不支持

盒模型相关的样式
display
设置元素的显示类型
可选值
none
元素不会在页面中显示，并且不会占据页面的位置
block
元素会作为块元素显示
inline
元素会作为内联元素显示
inline-block
元素会作为行内块元素显示
既具有内联元素的特点也具有块元素的特点
不独占一行
可以设置宽高
visibility
设置元素是否在页面中显示
可选值
visible
默认值，元素在页面中正常显示
hidden
元素不在页面中显示，但是依然在页面中占据位置
overflow
设置元素如何处理溢出内容
可选值
visible
默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden
溢出的内容会被隐藏不会显示
scroll
在父元素中同时添加水平和垂直方向的滚动条
不内容是否溢出都会添加滚动条
auto

根据需要自动生成滚动条

文档流
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素
1.块元素在文档流中自上向下排列
2.块元素在文档流中宽度默认是父元素的100%
3.块元素在文档流中高度默认被内容撑开
内联元素
1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
2.内联元素在文档流中宽度和高度默认都被内容撑开