CSS（三）

目录

一. 盒子模型

1. 盒子模型的介绍

2. 内容区域的宽度和高度

3. 边框（border）

4. 内边距（padding）

5. 外边距（margin）

---

一. 盒子模型

1. 盒子模型的介绍

1. 盒子的概念

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

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

2. 内容区域的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字+px

3. 边框（border）

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

 连写形式：

        属性名：border
        属性值：单个取值的连写，取值之间以空格隔开
                •   如：border : 10px solid red;
        快捷键：bd + tab

单方向设置：

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

4. 内边距（padding）

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

单方向设置：

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

CSS3盒模型（自动内减）

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大：

解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ;

5. 外边距（margin）

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

 单方向设置：

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

外边距折叠现象 – ① 合并现象

场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
• 只给其中一个盒子设置margin即可

外边距折叠现象 – ② 塌陷现象 

场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动