概念
box：盒子，每个元素在页面中都会生成一个矩形区域。
盒子的类型
行盒：display为inline的元素（行级元素）。
块盒：deisplay为block的元素（块级元素）。
行盒在页面中不换行，块盒在页面中独占一行。
盒子的组成部分
注意：无论是行盒还是块盒都由以下几个部分组成。
- content（内容区域）
width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸。
- padding（内边距）
元素的内边距在边框和内容区之间。
- border（边框）
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
border: border-style border-width border-color;
- margin（外边距）
围绕在元素边框的空白区域是外边距。
盒模型计算问题
计算可视区宽：width + 2*border + "padding-left" + "padding-right"。
计算可视区高：height + 2*border + "padding-top" + "padding-bottom。
行盒的盒模型
常见的行盒：（包含具体内容的元素）span、strong、em、i、a。
显著特点
- 盒子沿着内容延伸
- 不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型以此来间接调整。
块盒的盒模型
常见的块盒：div、h1~h6、p、header、footer、nav等。
显著特点
- 盒子独占一行
- 可以设置宽高
每个块盒的总宽度，必须刚好等于包含块的宽度。
注意：若宽度、边框、内边距计算后，仍有剩余空间，该剩余空间会被margin-right全部吸收。
行块盒的盒模型
常见的行块盒：img、video、audio。
显著特点
- 不独占一行
- 可以设置宽高
盒模型中的所有尺寸都有效。
面试题
1.盒模型的宽高计算问题。
盒模型分为两种：标准盒模型和怪异盒模型。
标准盒模型（content-box）：
width = contentWidth + 2 * padding + 2 * border；怪异盒模型（border-box）：width = boxWidht；
注意：如果要切换盒模型的模型，就使用css的box-sizing属性，content-box是标准盒模型，border-box就是怪异盒模型。
2. 浏览器默认的margin值是多少？
8px
3.画一个三角形（利用border）。
<style>
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid red;
}
</style>
<div></div>
4.display的属性值有哪些？说说它们的作用？
1.none：元素不会显示，而且改元素现实的空间也不会保留。（但有另外一个visibility:hidden;，是保留元素的空间的。）
2.inline：display的默认属性，将元素显示为内联元素，元素前后没有换行符。一旦将元素的display设置为inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size和padding）。
3.block：将元素显示为块级元素，元素前后会带有换行符。设置block后，元素可以设置height和width。元素独占一行。
4.inline-block：行内块元素。这个属性值融合了inline和block的特性，即它即是内联元素，又可以设置height和width。
5.请给出页面使用display:inline-block;来布局时，出现空白间隙的解决办法。（如何去掉img的间隙？可以不解决，因为上传 的文件都是经过压缩的。）
方法一：去空格（压缩）。
方法二：利用margin把图片往左挪。
方法三：把父元素的font设置为0。
注意：凡是带有inline的元素，都带有文字特性（文本空隙）。
6.display:none;和visibijity:hidden;的区别？
给一个元素设置了display:none;，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，元素所占据的空间也会消失。
给元素设置visibility:hidden;，也可以隐藏这个元素，但是隐藏元素后元素仍占据与未隐藏时一样的空间，也就是说，虽然元素不见了，但是仍然会影响页面布局。
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility:visible;则子元素又会显示出来。
visibility:hidden;不会影响有序列表排列的顺序变化。
注意：css3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果，提高用户体验。
7.css隐藏元素的办法？
1.display:none;将元素设置为display:none;后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
2.visibility:hidden;元素在页面消失后，其占据的空间依旧会保留着，所以，它只会导致浏览器的重绘而不会重排。
3.opacity:0;设置透明度为0后，元素只是隐身了，它依旧存在页面中。
8.浏览器标准模式和怪异模式之间的区别？
由于历史原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在w3c标准出台之前，不同的浏览器在页面的渲染上没有统一的规范，产生了差异，即Quirks mode（怪异模式或兼容模式）；当w3c标准出台之后，不同浏览器对页面的渲染有了统一的标准，即Strict mode（标准模式或严格模式）；这就是两者之间的区别。
- 盒模型的处理差异：
标准css盒模型的宽度和高度等于内容区的宽度和高度，不包含内边距和边框；而IE6之前的浏览器实现的盒模型的宽高计算方式包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型的宽高计算方式是不一样的。
- 行内元素的垂直对齐：
很多早期浏览器对齐图片至包含它们的盒子的下边框，虽然css的规范要求它们被对齐至盒内文本的基线。
标准模式下，基于Gecko的浏览器将会对齐至基线，而在怪异模式下它们会对齐至底部。最直接的例子就是图片的显示。
在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素的下边框之间存在一点小空隙，那是因为标准模式下，图片是基于基线对齐的；而怪异模式下，则不存在这个问题。
- 可以设置行内元素的宽高：
在标准模式下，给span等行内元素设置width和height都不会生效；而在怪异模式下，则会生效。
- 可设置百分比的高度：
在标准模式下，一个元素的高度是有其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
- 用margin：0 auto设置水平居中，在IE下会失效：
使用margin：0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效，怪异模式下的解决办法，用text-align属性设置为center。
怪异模式下设置图片的padding会失效。
怪异模式下table中的字体属性不能继承上层的设置。
怪异模式下white-space:pre;会失效。
