小课堂【萌新】

【CSS-TASK1】如何理解盒子模型？

分享人：汪胜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

网页是由大小不同的盒子组成的，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

2.知识剖析

盒子模型是由四部分组成，按照从里往外的顺序，分别为内容区，内边距，边框，外边距。
1.内容区：内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。
2.内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。 当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。
内边距：指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。
1.CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值。
。
2.单边内边距属性 ： 通过使用下面四个单独的属性，可以分别设置上、右、下、左内边距，各边均可以使用不同的单位或百分比值： 上内边距padding-top 右内边距 padding-right 下内边距 padding-bottom 左内边距padding-left

例如，为h1设置四个内边距 h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2px; padding-left: 20%; }

这种写法还可以简写： h1 {padding: 10px 0.25em 2px 20%;}

两种写法的结果是相同的

简写规则：从上内边距 (top) 开始围着元素顺时针旋转，即按照上、右、下、左的顺序分别设置各边的内边距。各边均可以使用不同的单位或百分比值
说明：内边距一共有四个，需要用哪个就用哪个。此外，需要多大写多大，单位可选择。
如果元素的各边都有 10 像素的内边距，只需要这样：padding: 10px;

内边距的百分比数值: 内边距百分数值是相对于其父元素的 width的10% 计算的。如果父元素的 width 改变，它们也会改变。

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度的10%设置，而不是相对于高度!

例子1： padding:10px 5px 15px 20px; 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px
例子2： padding:10px 5px 15px; 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px
例子3： padding:10px 5px; 上内边距和下内边距是 10px 右内边距和左内边距是 5px
例子4： padding:10px; 所有 4 个内边距都是 10px

例5： padding：3px 5px 5px 3px; 上内边距是 3px 右内边距是 5px 下内边距是 5px 左内边距是 3px

注意：这种情况四边要全部写出来！

浏览器支持

所有浏览器都支持 padding 属性。

边框：边框是围绕元素内容和内边据的一条或多条线。
1.CSS border 属性定义元素的边框。每个边框有 3 个方面：样式、宽度、颜色。
2.边框的样式: 样式是边框最重要的一个方面，如果没有样式，就没有边框。
定义多种样式 ： 可以为一个边框定义多个样式，例如： p.aside {border-style: solid dotted dashed double;} 上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。 我们又看到了这里的值采用了 top-right-bottom-left 的顺序。

定义单边样式 ：为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性： border-top-style（上边框样式） border-right-style（右边框样式） border-bottom-style（下边框样式） border-left-style（左边框样式）

例如: (1) p {border-style: solid solid solid none;} (2) p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none!

2.边框的宽度： border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
定义多边宽度: 按照 top-right-bottom-left 的顺序设置元素的各边边框： p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为： p {border-style: solid; border-width: 15px 5px;}

定义单边宽度：为元素框的某一个边设置边框宽度，而不是设置所有 4 个边的边框宽度，可以使用下面的单边边框宽度属性。

border-top-width(上边框宽度)， border-right-width(右边框宽度)， border-bottom-width(下边框宽度)， border-left-width(左边框宽度)

3.没有边框： 在前面的例子中，如果希望显示某种边框，就必须设置边框样式，比如 solid 。 如果把 border-style 设置为 none 会出现什么情况： p {border-style: none; border-width: 50px;} 尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？ 这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。 因此，如果希望边框出现，就必须声明一个边框样式。
4.边框的颜色： 设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。 可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值： p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }

定义单边颜色： 还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同： border-top-color border-right-color border-bottom-color border-left-color

例如，要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定： h1 { border-style: solid; border-color: black; border-right-color: red; }

透明边框： 刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下可以创建一个不可见的边框。 CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子： h1 { border-style: solid; border-width: 5px; border-color: transparent; }

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。 重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

浏览器支持

所有浏览器都支持 border 属性。

外边距：指的是两个盒子之间的距离。
1.CSS margin 属性定义元素的外边距。 margin 属性接受任何长度单位，可以是像素、英寸或 em。

例如，为h1设置四个外边距 h1 { margin-top: 15px; margin-right: 0.35em; margin-bottom: 10ex; margin-left: 20%; }

这种写法可以简写： h1 {margin: 15px 0.35em 10ex 20%;}

简写规则: 与内边距的设置相同，从上外边距 (top) 开始围着元素顺时针旋转，即按照上、右、下、左的顺序分别设置各边的外边距。各边均可以使用不同的单位或百分比值。

说明：外边距一共有四个，需要用哪个就用哪个。此外，需要多大写多大，单位可选择。
另外，还可以为 margin 设置一个百分比数值，与内边距的设置相同。 百分数是相对于父元素的 width 的10%计算的。 margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
例子 1： margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px
例子 2： margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px
例子 3: margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px
例子 4: margin:10px; 所有 4 个外边距都是 10px

例 5: margin：3px 5px 5px 3px; 上外边距是 3px 右外边距是 5px 下外边距是 5px 左外边距是 3px

注意：这种情况四边要全部写出来！

浏览器支持

所有浏览器都支持 margin 属性。

3.常见问题

外边距合并

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。这句话的意思是 margin-top和margin-bottom会发生外边距合并，margin-left和margin-right不会发生外边距合并。

外边距合并有三种情况

1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开),它们的上和下外边距也会发生合并

3.外边距也可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。这种情况比较少见

说明：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

外边距合并具有一定意义。以由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和，这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

4.解决方案

防止外边距合并的解决方法：

1. 用内层元素的margin通过外层元素的padding代替；

2.设置元素绝对定位 postion:absolute;或float:left;或display:inline-block;

5.编码实战

demo

6.扩展思考

7.参考文献

盒子模型

框模型

8.更多讨论

鸣谢

感谢大家观看

By 汪胜