2018-02-08

大家好，我是IT修真院北京分院第30期的学员黄苏威，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，如何使用如何理解css盒子模型？

undefined_腾讯视频

目录

1.背景介绍

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

早期的盒子模型还分为WC3盒子跟IE盒子，后来没有了。变成了 content-box盒子跟border-box盒子

2.知识剖析

盒子模型是由四部分组成，按照从里往外的顺序，分别为内容区，内边距，边框，外边距。

1.内容区：内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的，

.内容区有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!

.边框的宽度： 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 值来设置边框颜色。

外边距：指的是两个盒子之间的距离。

外边距的书写原则基本与 内边距相同

有个别问题不一样，

外编剧无论如何都不算在盒子宽度内，但是他却占着位置

外边距没有颜色，内边距有颜色，

外边距可以是负值，内边距不可以是负值

外边据在有些情况下可以重叠，而内边距不可以

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.编码实战

在实战的过程中border-box跟content盒子时最常遇到的的问题，这都是老生常谈的问题

细小的border则会经常被人忽视，就算是1px，如果你不给他算进宽度他也经常会被覆盖

所以一定要运用好父子级的box-sizing以免被覆盖

6.扩展思考

如何给marging上色 ，这个问题也是大家经常遇到的问题，

不能使用padding的情况下又需要给他上颜色 

解决的方法是 给他的父级上颜色，或者讨一个父级

7.参考文献

盒子模型https://baike.baidu.com/item/CSS%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/9814562?fr=aladdin

框模型

http://www.w3school.com.cn/css/css_boxmodel.asp

8.更多讨论

1.什么是line-box跟inline-box

每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。

https://segmentfault.com/a/1190000005155084

2.有没有padding-box，跟border-box区别是什么

有padding-box跟border-box的区别是padding-box的width不包含border的宽度

https://www.cnblogs.com/zhp404/articles/4186373.html

3.vw跟100%两个单位有什么区别

100vw其实=100%视口宽度

100vw不换视口宽度的就不会变而100%则是等于父级的宽度

就算父级直接是body也会存在100vw不等于100%的情况，因为如果有magrin存在的话就占去一部分的宽度,而且所有浏览器其基本都是默认存在marging的

鸣谢

感谢大家观看

BY :黄苏威

PPT链接：http://github.com/ptteng/WEB/blob/master/ppt/css-01%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html

视频链接:http://v.qq.com/x/page/u0548h47duv.html