盒子模型
- 一个盒子我们会分成几个部分：
内容区(content)
内边距(padding)
边框(border)
外边距(margin) -
盒子模型分布
图片1.png
内容区
- 内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
- 如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
- 通过width和height两个属性可以设置内容区的大 小。
- width和height属性只适用于块元素。
内边距
- 内边距指的就是元素内容区与边框以内 的空间。
- 默认情况下width和height不包含padding的大小。
- 使用padding属性来设置元素的内边距。
- 例如：
1.padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距。
2.padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距
3.padding:10px 20px;
分别指定上下、左右四个方向的内边距
4.padding:10px;
同时指定上左右下四个方向的内边距 - 同时在css中还提供了padding-top、padding-right、padding-
right、padding-bottom分别用来指定四个方向的内边距。
边框
- 可以在元素周围创建边框，边框是元素可见框的最外部。
- 可以使用border属性来设置盒子的边框：border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。 - 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
- 和padding一样，默认width和height并包括边框的宽度。
边框的样式：
| 语法 | 说明 |
|---|---|
| none | （没有边框） |
| dotted | （点线） |
| dashed | （虚线） |
| solid | （实线） |
| double | （双线） |
| groove | （槽线） |
| ridge | （脊线） |
| inset | （凹边） |
| outset | （凸边） |
外边距
- 外边距是元素边框与周围元素相距的空间。
- 使用margin属性可以设置外边距。
- 用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。
- 当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中。
- 外边距重叠
相邻元素，垂直方向，取最大值
内联元素的盒模型
- 内联元素不能设置宽高
- 可以设置水平内边距，垂直不影响布局
- 可以设置水平边框，垂直不影响布局
- 可以设置水平外边距，不支持垂直外边距
display
- 我们不能为行内元素设置width、height、 margin-top和margin-bottom。
- 我们可以通过修改display来修改元素的性 质。
- 可选值：
| 语法 | 说明 |
|---|---|
| block： | 设置元素为块元素 |
| inline： | 设置元素为行内元素 |
| inline-block： | 设置元素为行内块元素 |
| none： | 隐藏元素（元素将在页面中完全消失） |
visibility
- visibility属性主要用于元素是否可见。
- 和display不同，使用visibility隐藏一个元 素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖。
- 可选值：
| 语法 | 说明 |
|---|---|
| visible： | 可见的 |
| hidden： | 隐藏的 |
overflow
- 当相关标签里面的内容超出了样式的宽度 和高度是，就会发生一些奇怪的事情，浏 览器会让内容溢出盒子。
- 可以通过overflow来控制内容溢出的情况。
- 可选值：
| 语法 | 说明 |
|---|---|
| visible： | 默认值 |
| scroll： | 添加滚动条 |
| auto： | 根据需要添加滚动条 |
| hidden： | 隐藏超出盒子的内容 |
文档流
- 文档流指的是文档中可现实的对象在排列时所占用的位置。
- 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。
- 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。
- 这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。
浮动
- 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
- 浮动使用float属性。
- 可选值：
| 语法 | 说明 |
|---|---|
| none： | 不浮动 |
| left： | 向左浮动 |
| right： | 向右浮动 |
- 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
- 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
- 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
- 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
- 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也 就是浮动元素不会撑开父元素。
- 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个 块元素。
文字环绕
- 浮动不会覆盖文字，会环绕在浮动元素周围
内联元素浮动
- 内联元素脱离文档流会变成块元素
高度塌陷
- 父元素由子元素撑开，子元素浮动后，父元素中没有内容就会塌陷
- 解决办法
1.给父元素定height（不推荐使用）
2.bfc
bfc的作用：
1.父元素的外边距不会和子元素发生重叠
2.开启bfc的元素不会被浮动元素覆盖
3.开启bfc的元素可以包含浮动的子元素
如何开启bfc
1.设置元素浮动（不推荐）
2.设置绝对定位（不推荐）
3.设元素为: inline-block
4.将overflow设置为一个非visble得值
（IE6应该用haslayout zoom:1）
3.清除浮动
.clear:after{content:' '; display:block; clear:both }
4.在父元素下添加一个空白兄弟元素
清除浮动
- clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。 - 可选值：
| 语法 | 说明 |
|---|---|
| left： | 忽略左侧浮动 |
| right： | 忽略右侧浮动 |
| both： | 忽略全部浮动 |
| none： | 不忽略浮动，默认值 |
