标签：css
要掌握 CSS 技术，核心就是要掌握元素定位，只有这样才能用 CSS 创造出专业水准的页面布局。决定元素位置的因素主要有：盒模型、position、display，以及float和clear。
所谓盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中，position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多栏布局。
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。如果元素没有设置width和height的话，width和height等于父节点元素的width和height减去外边距、边框和内边距——这里暂不讨论IE的怪异模式
决定盒模型大小的CSS属性主要有width、height、padding、border和margin，网友飘零雾雨整理了一份详细的CSS参考手册——列举了每个CSS属性的可用元素、默认值、可选值、继承性、兼容性等等，在学习或者有疑问的时候，直接参考这份手册即可。
盒模型属性不一定适用于所有的元素，一些属性只适用于某一类元素。而且不同类型的元素的盒模型大小计算方式不同，有的会占据一行，有的水平一个挨着一个，下面介绍一下元素的主要分类：
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。一旦为页面设置了恰当的 DTD，大多数浏览器都会按照这个规则来呈现内容，然而 IE 5 和 6 的呈现却是不正确的——如果页面包含某些HTML文件类型描述，则Internet Explorer 6及以上版本不受该缺陷的影响。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
更多详情可参考IE盒模型缺陷。
CSS 推荐标准并未明确规定 border-width 几个文本值 thin、 medium 和 thick 的确切宽度，实际显示的宽度可能会因浏览器而异。对于边框样式（border-style） ，除了 solid 值（实线）之外， CSS 规范也没有明确规定。因此 dashed 值（虚线）在不同浏览器中的短划线长度和线间距也可能会不一样。
浮动与清除是用来组织布局的一柄利剑，这柄剑的剑刃便是 float 和 clear属性。设置了浮动的元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列，用 clear 属性设置清除。
在后文的常见问题里会提到清除的运用
CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。
TODO…
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：css
原文地址：http://blog.csdn.net/zhbhun/article/details/47316215
