读书笔记：CSS禅意花园-布局方法

     在介绍布局之前，我们应该先清楚布局的法则，虽然这个是在Web布局之前出现的，但是这里也是延伸了它的规则。

    在任何一种以图画作为表达方式的艺术品中，布局的作用都是-有效的组织内容，但是在Web布局还有个作用就是辅助实现页面的功能。

    布局基础：

    对于布局我们必需精通的两种主要的布局方法，它们有利有弊，也可以相辅相成：第一种是使用CSS中四种定位选项（static、relative、absolute、fixed）中的absolute绝对定位，它可以将元素从原来的位置上移除，并重新定位在任何期望的地方。第二种是使用CSS的浮动（Float）概念，其主要是为元素分配一定的空间，然后让文档的其他部分围绕在起周围。其一般是和清除浮动（Clear）成双出现。

    在大多数情况下绝对定位是布局的明智之选，但是对于那些需要考虑页脚或者是页面的其他元素需要了解周围元素的布局来说，使用浮动是不二之选。

    现在主体来说分为两类布局：固定布局和流式布局。

    固定布局：指页面有着固定的宽度，居左、居右（这个比较少）对齐，或者居中，但是页面的宽度不随着浏览器窗口的宽度变化而改变。其优势在于固定了大小，在布局页面时游刃有余，在图文混排模式时，一行中的文字长度易于控制。我认为其最好的一点就是一致性。其劣势主要是容易导致视觉失衡，解决办法一般是让作品水平居中，把空白留在左右两边。

    使作品居中方法：

    1、使用自动外边距居中；2、使用text-align的居中属性（这个我试过，在div之类的块元素上不适用）；3、自动外边距和text-align一起使用；4、负外边距方案（这个是个极好的方案）；

    流式布局：指页面的宽度用百分比设定，不是固定的宽度值，所以页面会随着浏览器窗口的宽度变化而变化，甚至会填满窗口。其优势在于最大限度的利用空间，避免了页面空白部分，使之更均衡。我认为其最好的就是灵活性，针对不同的分辨率实现不同的展现。其劣势在于我们无法精确掌握行长、页面布局和元素的位置。这个至今没有完美的解决方案，只有靠经验来具体问题具体分析。