【修真院 web（职业）小课堂】如何理解盒模型及其 content、padding、border、margin？

开场语：

大家好，我是 IT 修真院 郑州分院第 14 期的学员 王亚龙，今天给大家分享一下，修真院官网 css深度思考中的知识点——如何理解盒模型及其 content、padding、border、margin？

（1）背景介绍：

盒子模型简单点理解就是外边距 (margin)+ 边框 (border)+ 内边距 (padding)+ 内容 (content)，页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个 “外在盒子” 和一个 “内在盒子”，其中 “外在盒子” 负责元素是一行显示还是换行显示，而 “内在盒子” 则负责宽高、内容展现。

（2）知识剖析：

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。盒子占位 width =  2margin + 2padding + 2*border, 高度与之一样。

• width(包括 min-width,     max-width)：宽

• height(包括 min-height,     max-height)：高

• padding：内边距

• border：边框

• margin：外边距

上面五大属性，除了 width 和 height 以外，padding、border 和 margin 属性都是由四边组成的，每边都可以设置自己的单独值，还可以简写。这里以 margin 为例具体讲解下简写的取值模式。

在讲解之前，我们先说下盒模型的四边，方向分别为上、下、左、右，而 CSS 中表示就分别是 top、bottom、left、right

• margin-top：top 方向单个值

• margin-right：right     方向单个值

• margin-bottom：bottom     方向单个值

• margin-left：left 方向单个值

• margin：总的，四个方向的值

/* 简写之前 */ .box {

 margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

 } /* 简写之后 */ .

box {

margin: 10px 20px 30px 40px; /* 注意顺序以top开始，顺时针方向 */

}

margin: 10px;，表示四个方向的值都是 10px

margin: 10px 20px;，表示 top 和 bottom 方向是 10px，left 和 right 方向是 20px

这种取值模式其实并不是 margin 所独有的，同样 padding 也是按照这个模式来的。而且是一模一样的。另外的话在写html的还要注意，页面默认的话有8个像素的外边距，可以在body里面用 margin=0。来声明。

内边距影响盒子的尺寸，会将盒子撑大。宽和高都会将增加 padding 设置的值。所以我们在做页面的时要注意，所以要保证盒子原来的大小，在宽度和高度上要做相应的减少。

而 border 相对来说还要更复杂点，border 的简写，其简写模式为：border: 1px solid #ccc;

border 的简写其实是由 border-width，border-style，border-color 三个属性组合而成的。1px 就是 border-width，solid 就是 border-style，#ccc 就是 border-color。

而这三个属性，它们如果单独来写，其取值模式就和 margin 是一样的了，都可以设置 1-4 个值，如：

.box {

 border-color: #f00 #ccc #ccc; /* top left和right bottom */

border-width: 2px 1px; /* top和bottom left和right*/

border-style: solid; /* all */

}

除此之外，border 当然也有表示方向的属性，如border-left: 1px solid #f00;，则表示左边框为 1px 红色的实线。同样还有 border-top，border-right，border-bottom

（3）常见问题：

1，什么时候使用内边距，什么时候使用外边距，

2.设置边距borde的时候，高度或者说宽度发生改变

（4）解决方案：

1,什么时候使用内边距，什么时候使用外边距，

     对于一个 “块”（比如说 div）要设置他与外部 “块” 间的距离用 margin，要设置他与内部内容间的距离用 padding

2.设置边距borde的时候，高度或者说宽度发生改变

这方面大家可以往前看一下，盒子的宽度或者高度是由content+padding+border+margin组成的，在具体设置过程中，这一部分大家要把这一部分算进去。

（5）编码实战：

内容：content

.{
    : }
.{
    : }

上面的话主要演示的是一个盒子，其中内容背景是黄色的，边框是蓝色，中间空白部分就是padding内边距，而外面比较大的空白部分就是外边距。可以仔细思考下看下

（6）拓展思考：

外边距重叠

 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。

防止外边距重叠解决方案：

                虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

 外层元素 padding 代替

             内层元素透明边框 border:1px solid transparent;

            外层元素 overflow:hidden;

            内层元素 加 float:left; 或 display:inline-block;

             内层元素 padding:1px;

（7）参考文献：

1,http://www.hujuntao.com/web/css/css-margin-overlap.html

 2,           菜鸟教程

（8）更多讨论：

Q1：问题1：垂直居中又几种办法？
A1：我：这里列举几个最常见的

1，line-height居中

 2，flex布局居中

align-items: center;

3.利用绝对定位或者是相对定位来居中

Q2：问题2：导航栏定高和不定高的区别
A2：我：定高的话内容不会随着导航栏内容的增多而增加，会造成一部分内容显示不出来，不定高可以随着内容的增加而变化

Q1：问题1：box-sizing 属性

A1：我： box-sizing，属性值常用又连两个

content-box：默认值，让元素维持 W3C 的标准盒模型。Height = border+padding+content width/height

border-box：让元素维持 IE6 及以下版本盒模型，Width/Height =width /height-border-padding

（9）鸣谢：

感谢韩筠宜师姐 ，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~