读书笔记：CSS禅意花园-布局细则

      布局要考虑很多内容，例如：排版、图标、分解线、间距留白、一致性、借喻、光、影、形状、空间和色彩等等。

      排版：这是一种起交流作用的表现方式，它拥有内建的层次结构、模式和韵律。通过不同的文字大小、间距和颜色来调整排版。

      图标：设计图标的关键在于要将它尽可能地以某种强烈、一致的方式与其要表达的概念想关联。

      分界线：将页面的不同区域有效的分开，让页面看起来更有韵律，甚至还可以知道维度。

      间距:给文本一些呼吸空间，让用户的视线正对页面内容。

      一致性：设计中用的元素可能不一样，但是使作品的整体达到统一的意境才是最重要的。例如使用单一的色系，用线条围绕悉心调整匹配的区域，将最重要的、起支配作用的元素用艺术线条或者图片表示。

      借喻：用简单的设计元素表示复杂的图像或概念。

      光：可以让元素有立体感，可以让我们浏览网页有看书的感觉，会让我们去寻找光源。

      阴影：增加丰富的视觉效果。

      形状：圆弧一般关联女性和柔和，表示温暖、舒适和爱情等。三角形一般关联男性和阳刚，表示运动、力量和攻击等。而方形给用户有序、逻辑、缜密和安全的感觉。

      空间：正空间和负空间，正空间指作品对象所占空间，负空间指对象背景所占空间。理解这个可以让我们更好的掌握间隔空间和作品融为一体的方法。

      色彩：不同的色彩对应不同的心理、文化等，所以才设计时要考虑色彩比。

      对于布局的溢出，在实际设计中，主要的溢出来自于绝对定位中的元素内容过多，浮动元素尺寸超过其可容纳区域：

   浮动导致内容溢出：

   1、运用空标签清除浮动；例如<div id="clear"> </div>

   2、精确控制浮动；

   3、适当增大浮动元素的容器宽度；

   4、限制内容宽度并注意斜体；

   5、限制内容溢出，使用overflow属性；

  绝对定位导致内容溢出：

   垂直溢出：

   1、使用浮动代替绝对布局；

   2、在设计中尝试避免该问题；

   3、限制溢出，使用overflow属性；（但是太多的滚动条会让用户对页面失去兴趣，所以可以将overflow设置为hidden）

   1、 使用脚本；

   2、用em而不是px作为长度单位；（这个仅适用于用户增大字号时的溢出，对于由于内容的长度溢出却没有效果）

   当然，这些都是权宜之计，根本的办法是在设计是考虑溢出，避免这个问题。