前端学习第五天-css盒子模型

前端学习第五天-css盒子模型

一、盒子模型

目标：能够认识 盒子模型的组成，能够掌握盒子模型 边框、内边距、外边距的设置方法

1. 盒子模型的介绍

盒子的概念

1. 页面中每一个标签，都可以看做是一个盒子，通过盒子的视角更方便进行布局
2. 浏览器在渲染显示页面时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

盒子模型：

1. CSS 中规定每个盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型

---

2. 内容的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性：width/height

常见取值：数字 + px

---

3. 边框（border）

3.1 边框（border）-单个属性

作用：给盒子设置边框粗细、边框样式、边框颜色效果

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字 + px
边框样式	border-style	实线：solid、虚线：dashed、点线：dotted
边框颜色	border-color	颜色取值

---

3.2 边框（border）-连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开；如：border: 5px solid green

---

3.3 边框（border）- 单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方向名词；border-bottom:5px solid green

属性值：连写的取值

---

3.4 盒子实际大小初级计算公式

盒子宽度 = 左边框 + 内容宽度 + 右边框

盒子高度 = 上边框 + 内容高度 + 下边框

---

4. 内边距（padding）

4.1 内边距（padding）- 取值

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

取值	示例	含义
一个值	padding: 10px;	上右下左都设置为10px
两个值	padding: 10px 20px;	上下设置为10px、左右设置为20px
三个值	padding: 10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	padding: 10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

---

4.2 内边距（padding）- 单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding - 方位名词 padding-top: 10px

属性值：数字 + px

---

4.3 盒子实际大小终极计算公式

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框

盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

---

4.4 不会撑大盒子的特殊情况（块级元素）

1. 如果盒子没有设置宽高，此时宽度默认是父盒子的宽度。
2. 此时给盒子设置左右的padding或者左右的border，此时不会撑大盒子。

---

5. 外边距（margin）

5.1 外边距（margin）- 取值

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

取值	示例	含义
一个值	margin: 10px;	上右下左都设置为10px
两个值	margin: 10px 20px;	上下设置为10px、左右设置为20px
三个值	margin: 10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	margin: 10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

---

5.2 外边距（margin）- 单方向设置

场景：只给盒子的某个方向单独设置外边距

属性值：margin - 方位名词 margin-top: 10px

属性值：数字 + px

---

5.3 margin单方向设置的应用

方向	属性	效果
水平方向	margin-left	让当前盒子往右移动
水平方向	margin-right	让右边的盒子往右移动
垂直方向	margin-top	往当前盒子往下移动
垂直方向	margin-bottom	让下面的盒子往下移动

---

5.4 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般项目开始之前需要先清除这些标签默认的margin和padding，后续自己设置

1. body标签默认有margin: 8px。
2. p标签默认有上下的margin。
3. ul标签默认有上下的margin和padding-left。

两种解决方法：

* {
    margin: 0;
    padding: 0;
}

blockquote, body, button, dd, dl, dt, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p,
pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}

---

6. margin外边距可能出现的问题

6.1 外边距正常情况

场景：水平布局的盒子，左右margin正常，互不影响。

结果：最终两者距离为左右margin的和。

---

6.2 外边距折叠现象 - 1 合并现象

场景：垂直布局 的 块级元素，上下margin会合并。

结果：最终两者距离为margin的最大值。

解决方法：只给其中一个盒子设置margin即可

---

6.3 外边距折叠现象 - 1 塌陷现象

场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)。
2. 给父元素设置 overflow: hidden;
3. 转换成行内元素。
4. 设置浮动

---

6.4 行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时

结果：

1. 水平方向的margin和padding布局中有效!
2. 垂直方向的margin和padding布局中无效!