CSS 6 CSS 盒子模型

CSS

6 CSS 盒子模型

6.1 盒子模型的介绍

6.1.1 盒子的概念

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

6.1.2 盒子模型

CSS 中规定每个盒子分别由:

• 内容区域(content)
• 内边距区域(padding)
• 边框区域(border)
• 外边距区域(margin)

构成，这就是盒子模型

联想现实中的包装盒

6.2 内容区域的宽度和高度

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

属性: width / height

常见取值:数字+px

6.3 边框 (border)

• 属性名: border
• 属性值:单个取值的连写，取值之间以空格隔开
  • 如: border : 10px solid red;

单个属性:

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

需求:盒子尺寸400*400，背景绿色，边框10px实线黑色，如何完成?

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

盒子尺寸 = width / height + 边框线

当盒子被border 撑大后，通过改变宽高，即可重新满足需求

6.5 内边距(padding)

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

属性名: padding

常见取值:

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

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

属性名:padding -方位名词

属性值:数字＋px

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

【不会撑大盒子的特殊情况】

不会撑大盒子的特殊情况(块级元素)

1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

6.6 外边距(margin)

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

属性名:margin

常见取值:

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

属性名: margin -方位名词

属性值:数字＋px

【清除默认内外边距】

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

6.7 W3cSchool 又叫框模型

所有 HTML 元素都可以视为方框。

在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

对不同部分的说明：

• 内容 - 框的内容，其中显示文本和图像。
• 内边距 - 清除内容周围的区域。内边距是透明的。
• 边框 - 围绕内边距和内容的边框。
• 外边距 - 清除边界外的区域。外边距是透明的。

【元素的宽度和高度】

元素的总宽度应该这样计算：

• 元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

• 元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

就那个意思吧。