HTML盒子模型

一.盒子模型的介绍

1.盒子的概念
（1）页面中的每一个标签，都可看做是一个 “盒子” ，通过盒子的视角更方便的进行布局
（2） 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
2. 盒子模型
➢ CSS 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
3. 记忆:可以联想现实中的包装盒

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

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

三.边框（ border ）

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

边框（border） - 连写形式
➢ 属性名： border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如： border : 10px solid red;

四.内边距（ padding ）

➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名： padding
➢ 常见取值:
内边距（padding） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名： padding - 方位名词
➢ 属性值：数字 + px
例如：给盒子设置左侧50px的内边距：
• padding-left : 50px;
➢ 不会撑大盒子的特殊情况（块级元素）
（1）如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
（2）此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

五.外边距（margin）

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

➢ 记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
外边距（margin） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名： margin - 方位名词
➢ 属性值：数字 + px
例如：给盒子设置左侧50px的外边距
margin-left : 50px ;
margin单方向设置的应用

六.盒子模型常见问题

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

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

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

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

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

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