HTML盒子模型

div盒子模型

一.盒子模型的介绍

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

三.边框（ border ）

四.内边距（ padding ）

五.外边距（margin）

六.盒子模型常见问题

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

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

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

一.盒子模型的介绍

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布局中无效！