看完慕课网HTML+CSS基础课程+《CSS权威指南》之后，尝试做了个Blog静态页面，通过动手深入理解了CSS盒子模型，float，position布局。记住以下原则，使用纯CSS排版布局时，思路就应该清晰多了。

盒子模型

关于盒子模型，首先要理解的一点是:==元素的width并不是元素的实际宽度==.width指的是元素中内容区的宽度，而内容区是被矩形盒子包裹着的。元素实际的宽度，是矩形盒子的宽度。比如我们定义了以下元素和内容

<body>
    <div>
        <p style="display:inline">我是内容</p>
        <p style="display:inline">我是内容</p>
    </div>
</body>

它们的实际位置关系如下

p元素的width是红框（内容区）的宽度；实际宽度是黑色虚线框的宽度，其值=width+左右两侧的(margin+border+padding)。

其次，正常文档流中，相邻两元素以margin边界对齐。

最后一点，对于正常文档流中的block父元素，其width=一行中所有子元素实际宽度之和。即div元素的width为图中虚线框国的宽度。

浮动

float会使元素脱离正常文档流，包含块是其距离最近的父元素。

absolute、fixed会使元素脱离正常文档流，relative不会。