深刻理解Div和CSS的布局layout盒模型Box Model

熟练掌握Div和CSS的布局(layout)方法，首先要对盒模型(Box Model)有足够的了解。盒子模型是CSS布局网页时很是重要的概念，只有很好地掌握了盒子模型以及其中每一个元素的使用方法，才能熟练使用css的定位方法和技巧。

什么是盒子模型(Box Model)

全部HTML元素能够看做盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

每一个盒子由四个部分(或称区域)组成，其效用由它们各自的边界(Edge)所定义。如图，与盒子的四个组成区域相对应，每一个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

盒模型容许咱们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不一样部分的说明：

内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它一般含有一个背景颜色（默认颜色为透明）或背景图像。

若是 box-sizing 为 content-box（默认），则内容区域的大小可明确地经过 width、min-width、max-width、height、min-height，和 max-height 控制。

内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

内边距的粗细能够由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

边框的粗细由 border-width 和简写的 border 属性控制。若是 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地经过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可经过 CSS 属性 background-clip 来改变。

外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的状况下，因为盒之间共享外边距，外边距不容易弄清楚。

标准盒模型

• 在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

怪异盒子模型（IE盒子模型）

• 在怪异模式下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

如何运用和选择哪一种盒模型

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft本身的标准。 在HTML文档头部定义doctype，即便用标准盒模型。当不对doctype进行定义时，会触发怪异模式。

那么应该选哪一种盒子模型呢？

通常状况下应该遵循W3C标准使用标准盒模型，不少ui框架使用的都是怪异盒模型，好比ionic、vux和bootstrap。

当作一个自适应布局的时候，分别建立两个div，使用flex布局，别设定宽度左20%和右80%，没毛病。 可是新需求是右侧的div须要加padding-left:20px;border-left:1px solid #000，这个时候就尴尬了，右侧宽度会超出容器，逼迫左侧宽度压缩，宽度就不是左20%和右80%了。

而用怪异盒模型，就不会出现这样的问题。

/*标准盒模型：一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)*/
  BoxModel = content width + padding + border + margin
  
  /*怪异盒模型：一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）*/
  BoxModel = content width + margin

复制代码

提示：在盒模型中，外边距能够是负值，并且在不少状况下都要使用负值的外边距。另外 除可替换元素外，对于行内元素来讲，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height 属性决定，即便边框和内边距仍会显示在内容周围。

小编推荐：程序员导航

做为一名码农，随着平时工做的须要，这里收集了国内外不少优秀网站，这其中包括在线工具、在线运行、免费接口、在线资源、在线学习、技术论坛、技术博客等等，知足通常程序员平常需求。