HTML:Arranging Elements

flow

本章涉及到流的概念，流就是HTML组织文本的方式，对block element来说，它们是从上到下排列；而inline element是从左到右排列，若浏览器的宽度不够则自动往下排。对于熟悉Word的读者应该对这些概念不陌生。

两个inline element的间隔是两个相邻的margin之和；两个相邻的block element的间隔是取决于最大的margin，因为两个block element的margin是可以重叠的

float

游离状态

几种页面展示的方法

method advantage disadvantage float layout float显得很灵活，能根据float这个CSS参数来定位 当我们需要在手机端浏览页面时，float的内容会优先在主要内容前面显示；第二个缺点是我们无法生成两个并列的float。 jello layout 将整个网页固定住，不管浏览器大小如何变化都不会影响网页的整体比例 有人会认为页面无法随浏览器自由调整并填满整个页面是个缺点 absolute layout 我们可以使用position精确地将区块定位在理想的地方 当浏览器扩大时，由于absolute element的位置不会影响其他元素的展示，所以此时absolute element会覆盖其他element table display layout 结构清晰，还可以建立多个列 几近完美>_<

*position的元素可能会覆盖另一个position元素，这是我们可以使用参数“z-index”来定义哪个position覆盖哪个，数值越高，越优先显示。

*position element的部分甚至可以隐藏入浏览器的边框：

#coupon {    position: fixed;    top: 350px;    left: -90px;}

注意left是负值。只要left数值足够大，我们也能将这个position element完全隐藏起来。