盒子模型是CSS技术中一个非常重要的概念。掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对HTML文档的布局也会起到很大的作用。
1.最基本的标准盒模型
对于html来说，每个标签元素都可以理解为一个“盒子”。但是一般来说，盒模型主要适用于块级元素。
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式具备这些属性。
标准模式下面盒模型的宽度width指的是content的宽度，高度也是如此。
标准模式下盒子的实际宽度为：
width + padding-left + padding-right + border-left-width + border-right-width
标准模式下盒子的实际高度为：
heigth + padding-top +padding-bottom + border-top-width + border-bottom-width
内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。这个时候你会发现边框同样也是在背景之上的。
2.什么是标准模式和混杂模式（怪异模式）？
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。
在标准模式下浏览器按照规范呈现页面；
在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。
3.块级元素与行内元素
在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。
display常用的值是none/block/inline/inline-block
4.css3属性box-sizing
box-sizing有两个值一个是content-box，另一个是border-box。
content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。