盒子模型
把一个网页看成一个装盒子的地方，而一个盒子我们会分成几个部分：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
图片1.png
内容区
指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区的。
通过width和height两个属性可以设置内容区的大小。
-width和height属性只适用于块元素。
内边距
- 默认情况下width和height不包含padding的大小。
- 使用padding属性来设置元素的内边距。
边框
- 使用border属性来设置盒子的边框。
- 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
- 默认width和height还有边框的宽度。
边框的样式
- none(没有边框）
- dotted（点状虚线）
- dashed（虚线）
- solid（实线）
- double（双线）
- groove（槽线）
- ridge（脊线）
- inset（凹边）
- outset（凸边）
外边距
- 使用margin属性来设置外边距。
- 用法和padding类似。
margin：0 auto 可以使元素居中。内联元素不能设置宽高。外边距水平方向相邻不会重叠，只会求和。margin默认的值是：8.
display
- 不能为行内元素设置width，height，margin-top，margin-bottom。
- 可以通过修改display来修改元素的性质。
- 可选值：
·block:设置元素为块元素。
·inline：设置元素为行内元素。
·inline-block：设置元素为行内块元素。
·none：隐藏元素（元素将在页面中完全消失）。
visibility
- 该属性主要用于元素是否可见。
- 使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
- 可选值：
·visible:可见的
·hidden：隐藏的
overflow
- 通过overflow来控制内容溢出的情况。
- 可选值：
·visible:默认值
·scroll：添加滚动条
·auto：根据需要添加滚动条。
·hidden：隐藏超出盒子的内容。
文档流
- 指文档中可显示的对象在排列时所占用的位置。
浮动
- 是使元素脱离原来的文本流，在父元素中浮动起来。
- 使用float属性。
- 可选值：
·none：不浮动
·left：向左浮动
·right：向右浮动 - 行内元素浮动以后将会自动变为一个块级元素。
