CSS网页布局与定位

文档流（Document Flow）
文档流是浏览器解析网页的一个重要概念，对于一个
XHTML网页，body元素下的任意元素，根据其前后顺序，
组成了一个个上下关系，这便是文档流。 浮动的定位 浮动的清理（clear）
何时选用浮动定位
简单来讲，当需要网站有较强的对分辨率及内容大小的适应
能力的时候，就需要采用浮动定位。
浮动定位能帮我们将布局浮动在窗口之中，而不是固定在窗 口的某个位置，所以其目的主要是针对非固定类型的网页进 行设计。
距中布局
对一个元素距中，是相对于它的左右两个边而言。如果浏览
器窗口的宽度不固定，那么就需要用div，采用针对左右
margin的auto设置，以便让元素距中浮动。
横向宽度可百分比缩放
（盒状）互相贴近显示而已。浏览器通过这些盒状物的大小 和浮动方式来判断下一个盒状物是贴近显示，还是下一行显 示，还是其他方式显示。任何一个CSS布局的网页，都是由 许多不同大小的盒子所构成。
盒模型的细节
为了使布局工作更细致，更具有可控性，在CSS的盒模型设
计中，它的宽度和高度不仅仅由width和height来控制，而是
如果有一个二列宽度自适应布局，当左列的宽度无法固定时，
则右列的位置也就无法固定，因此右列必须浮动到左列的右
边贴近，才可以适应左列宽度的随时变化。 需要借助margin、Байду номын сангаасadding、border等属性。
绝对定位与相对定位
绝对定位：
相对于浮动来说，绝对定位是一种很好的理解的定位方式。
凡是采用position:absolute;之后，对象便开始进行绝对定位， 绝对定位主要通过设置对象的top、right、bottom、left四个方 向的边距来实现。一旦对象被设置绝对定位，它就完全脱离 了文档流与浮动模型，独立于其他对象而存在。
相对定位使得被设置元素保持与其原始位置相对，并不破坏 其原始位置的信息。
绝对定位与相对定位
深度
在定位中，会出现一个问题，即元素的重叠。在这种情况下，
CSS允许我们通过设置对象的z-index属性，以设置其重叠的 先后顺序，也就是z轴的顺序。 以z-index的数值大小为准，大值对象的层级位于小值对象之 上。
绝对定位与相对定位
相对定位：
相对行为就是浮动定位与绝对定位的扩展方式。
由一组属性值组合而成，对于盒模型而言，CSS还提供了内 边距（padding）、外边距（margin）、边框（border）三个 属性，用于控制一个对象的显示细节。
浮动（Float）
浮动是CSS布局中重要的理论，大部分都是采用浮动来达到
分栏效果的。CSS网页布局只能以两种方式存在：一种是浮
动式布局，另一种则是定位布局。 这两种定位方式的核心都脱离于文档流的控制。
CSS网页布局与定位
盒模型详解（Box Model）
盒模型是CSS中的一个核心概念。
W3C对盒模型的定义相当准确，由于浏览器设计的原因，在
不同的浏览器下面，盒模型的实际表现不一样。
什么是盒模型
盒模型是指CSS布局中的每一个元素，在浏览器的解释中，
都被当作一个盒状物。无论任何布局，它们都是几个方块
绝对定位与相对定位
#a,#b,#c,#d
{ background-color:#CCCCCC; border:2px solid #FF0000; width:100px; height:100px; margin:2px 2px 2px 0; float:left; }
#b{ position:absolute; top:80px; left:100px;} #d{ position:absolute; top:80px; left:210px;}