所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”这一术语主要是在布局时使用。
CSS 盒模型（Box Model）规定了处理元素内容、边框、内边距 和 外边距 的方式。
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外填充也叫外边距（margin），边框（border），内填充也叫内边距（padding）和实际内容（content）。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如下 CSS 盒子模型图：
盒子模型的最内层是盒子的实际内容（content），显示文本和图像。直接包围内容的是内边距（padding），清楚内容周围的区域，内边距呈现了元素的背景，会受到框中填充的背景颜色影响。内边距的边缘是边框（border），边框以外是外边距（margin），外边距没有背景颜色，默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。盒模型 就好比一套茶杯，为了避免损坏，每个茶杯的周围都会被填充一些东西，这些填充就是内边距，再用盒子把茶杯装起来，装茶杯的盒子就是边框，一套茶杯不可能只有一个，所有的茶杯会用一个精美包装的大盒子再装起来，那么每个装茶杯的小盒子之间的距离就是外边距。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由浏览器样式表（浏览器缺省值）设置外边距和内边距。因此可以将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素盒子的总尺寸。 为了确保在所有浏览器中元素的宽度和高度设置正确，有必要了解盒模型是如何工作的。
当指定一个 CSS 元素的宽度和高度属性时，只是设置了内容区域的宽度和高度，完全大小的元素，还必须添加内边距，边框和外边距。 如下设置盒子的样式：
1 #box{2 width:200px;3 height:100px;4 padding:20px;5 border:10px solid blue;6 margin:30px;7 } 上面例子中，ID 为 box 的宽为 200 像素，高为 100 像素，内边距为 20 像素，边框为 10 像素，外边距是 30 像素， 下图是在 Firefox 中计算出的布局样式：
那么该元素的总宽度实际为 ： 30+10+20+200+20+10+30= 320px
实际高度为： 30+10+20+100+20+10+30= 220px
最终元素的总宽度计算公式是： 总元素的宽度=内容宽度+左外边距+右外边距+左边框+右边框+左内边距+右内边距。
元素的总高度最终计算公式是： 总元素的高度=内容高度+顶外边距+底外边距+顶边框+底边框+顶内边距+底内边距。
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距，内边距不可以是负值。
margin 属性的值设为负值即负边距，在 CSS 布局中是一个很有用的技巧。当 margin-top 、 margin-left 为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化，这点与 position:relative 的元素设置 top、left 后元素还占据原来位置不同。当 margin-bottom 、 margin-right 设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移。
当元素被设置为绝对定位时，其 top、right、bottom、left 值是指元素自身的边界到最近的已定位祖先元素的距离，这个元素自身的边界指的就是 margin 定义的边界，所以，如果 margin 为正的时候，那它的边界是向外扩的，即下移/右移，如果 margin 为负的时候，则它的边界是向内收的，即上移/左移，利用这点，就有了经典的利用绝对定位来居中的方法：
1 2 3 4 5 垂直居中 6 7 *{padding;margin:0;} 8 #box{ 9 width:200px;10 height:200px;11 margin:10px auto;12 border:1px solid blue;13 position:relative;14 }15 #box .content{16 width:100px;17 height:100px;18 background:green;19 position:absolute;20 top:50%;21 left:50%;22 margin-top:-50px;23 margin-left:-50px;24 }25 26 27 28 盒子29
内容
查看更多关于CSS高级_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111154