福建省网站备案用户注销(删除)备案申请表免费建一个自己的网站

学习目标：

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

学习路径：

1. 盒子模型的介绍
2. 内容区域的宽度和高度
3. 边框（ border ）
4. 内边距（ padding ）
5. 外边距（margin）

一、盒子模型的介绍

1. 盒子的概念

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

2. 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。
3. 记忆：可以联想现实中的包装盒。

 二、内容区域的宽度和高度

1.内容的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见单位：px（例如：20px）

三、边框

1.边框（border) - 单个属性

➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：

 2.边框（border）- 连写形式

➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
如：给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？
 border：20px solid blue；

3. 边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值

如：给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？
• border-top：10px dashed yellow；

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

➢ 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高；② 设置border会撑大盒子。
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）

 四、内边距（ padding ）

1.内边距（padding）- 取值

➢ 作用：设置边框与内容区域之间的距离
➢ 属性名：padding
➢ 常见取值：

设置顺序：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！

 

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

➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px

例如：给盒子设置左侧50px的内边距可以通过什么属性设置？padding-left : 50px ;

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

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
•注意点：① 设置width和height是内容的宽高② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）

4.CSS3盒模型（自动内减）

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

五、外边距（margin）

1.外边距（margin）- 取值

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：

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

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

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px

例如：给盒子设置左侧50px的外边距可以通过什么属性设置？
• margin-left : 50px ;

 3.清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：

*{
margin:0;
padding:0;
}

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

➢ 场景：行内元素设置margin和padding时
➢ 结果：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

七、块级盒子水平居中

让一个块级盒子实现水平居中必须：

• 盒子必须指定宽度（width）
• 然后就给左右的外边距都设置为：auto

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center;而且还可以让行内元素和行内块级元素居中对齐。
2. 块级盒子水平居中，左右margin 须设置为 auto。

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就可以了，上下margin都可以 */