什么是盒子模型
CSS中将每个元素都设置为了一个矩形的盒子来方便页面的布局，所以当这些元素都变成了盒子之后，我们的布局就变成了在页面中摆放盒子
内容(content)
元素的所有子元素都是放在父元素的内容区中
内容区有宽度和高度——width，height
内边距(padding)
内边距指的是内容区和边框区之间的距离，内边距会影响盒子的大小。
此时box1原本高度宽度只有10px，设置内边距之后整个盒子可见框的大小就发生变化了，而且元素的背景颜色延伸到了内边距。
其中属性有五种
- padding
当只设置一个值的时候这个值则是给上右下左都设置了
当设置两个值时，第一个值是上下，第二个值是左右
当设置三个值时，第一个值是上，第二个值是左右，第三个值是下
当设置四个值时，就是上右下左
padding-top
padding-right
padding-bottom
padding-left
边框
整个盒子的可见框大小是由内容区、内边距区，边框区决定的
设置边框需要设置三个样式。他们分别是border-width，border-color，border-style
border-width设置的是边框的宽度
border-color设置的是边框的颜色
border-style设置的是边框的样式，一般有solid实线，dotted点线，dashed虚线等等
通过使用border直接给边框三个属性赋值，例:border: 1px solid red; 三个属性没有顺序要求
外边距
外边距的简述和语法规范
外边距是盒子和其他盒子之间地距离，外边距不会影响可见框的大小，但是会影响盒子的位置。
外边距也具有四个方向，语法跟padding相类似。
margin值：单独将左右外边距设置为auto，则会将左右外边距设置为最大值
如果同时将左右外边距设置为auto，则他的左右外边距会相同，所以一般我们会通过这种方式使一个子元素在他的父元素中水平居中 margin:0 auto
外边距可以设置为负值，则元素会向相反方向移动
外边距的重叠和取和现象
相邻元素的外边距会取最大值
上面两张图我们可以看见box1和box2之间地margin值重叠在了一起，所以他们之间地margin值取得是最大的那一个
子元素的外边距会传给父元素
上图我们可以知道box1把外边距传给了他的父元素box3
另外一个就是水平外边距不会重叠，他们会取和
内联元素的盒子模型
内联元素的width和height
内联元素是不支持宽高属性的!
内联元素的padding
内联元素支持水平方向的padding
内联元素也支持垂直方向的padding但是不会影响布局
内联元素的border
支持四个方向的边框，但是垂直的边框不会影响布局
内联元素的margin
支持水平方向的外边距，不支持垂直方向上的
盒模型相关的样式
display
display决定元素的显示方式
- none 当属性值为none时，这个元素不会在页面中显示且不会占据页面的位置
- block 元素作为块元素显示
- inline 元素作为内联元素显示
- inline-block 作为行内块元素显示，具有块元素和内联元素的特点——能进行宽高的设置，不会进行换行
visibility
visibility属性设置元素是否在页面中显示
- visible 默认值，元素可以正常显示
- hidden 元素不在页面中显示，但是依然在页面占据着它原来的空间
overflow
overflow设置元素如何处理溢出内容
- visible 默认值，子元素溢出的东西会在父元素以外的地方显示
- hidden 溢出内容会被隐藏
- scroll 会添加滚动条显示溢出内容不管内容是否溢出都会添加滚动条
- auto 根据需要自动生成滚动条
文档流
概念
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素
- 块元素在文档流中自上向下排列
- 块元素在文档流中宽度默认是父元素的100%
- 块元素在文档流中高度默认被内容撑开
内联元素
- 内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
- 内联元素在文档流中宽度和高度默认都被内容撑开