【css-01】理解盒模型及其content,padding,border和margin

小课堂【武汉第76期】

分享人：张增锋

1.背景介绍

盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版。我们可以把所有HTML元素都可以看作盒子，里面包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

2.知识剖析

盒子的基本要素: content-内容, padding-内边距(填充）, border-边框,margin-外边距,一个盒子实际所占有的宽度（或高度）是由”内容+内边距+边框+外边距“组成的。

最内部的框content是元素的实际内容，也就是元素框。当元素为块级元素或内联块级元素时， 可以设置width，height属性来设定内容区的宽高。而内联非替换元素设置width,height属性无效，其宽度随元素的内容而变化。 当默认情况下，块级元素宽度自动填满其父元素宽度。

Padding属性定义了元素边框与元素内容之间的空间。其值不可为负值，背景图与背景色可以显示在padding上。当在内联非替换元素上设置padding时，不会影响行高计算，但背景色可以显示，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。

border指盒模型的边框，边框的相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)。在默认情况下，背景会延伸到边框所在的区域下面。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设置为background-clip;padding-box.

margin是外边距,与padding不同的是，margin可以为负。两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

3.常见问题

W3C标准模式和IE怪异模式

4.解决方案

标准的盒子模型就是之前介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关。

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容 即总宽=margin+width, 很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用： 1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好 2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

5.编码实战

6.扩展思考

如何进行盒子模型进行布局盒模型是CSS定位布局的核心内容，盒子内部的布局:文本的布局，盒模型本身的布局， 盒子之间的布局:visual formatting，脱离正常流normal flow的盒子的布局，absolute布局下的布局，float布局下的布局，正常流normal flow下的盒子的布局

7.参考文献

参考一：盒子模型理解 http://www.cnblogs.com/clearsky/p/5696286.htmlcss

参考二CSS网页布局的核心内容:CSS盒模型：http://www.jb51.net/css/12323.html

8.更多讨论

了解盒子模型层叠结构