第27章 CSS布局.pptVIP

第27章 CSS布局 用CSS布局是现在主流布局方式，也是W3C标准支持的，学好CSS布局对网站的设计、制作非常大的好处。本章来介绍布局中常用到的一些属性，这些属性是非常重要的，也是在布局中常用到的几个属性，这些属性使网页增添不少色彩。 学习本章，将要了解以下内容。 设置层的漂移 清除层的漂移范围 设置层的可视区域 内容超过层大小时 鼠标指针的不同表示 设置对象是否隐藏 设置对象是否显示 27.1 设置层的漂移 属性在CSS中，用来设置层的漂移，层与层之间在默认情况下从不在同一水平线上显示，只有垂直显示。在网页设计中，需要多个层在同一水平线上时，按默认的值是不能达到的多层在同位置上的。要设置多个层处于同一水平线上平行，需要对层设置成为向左或者向右漂移，当层确定宽度后，多个层总宽度没有超过父对象的宽度时，会出现层漂移。设置层漂移用float表示，其后接left或right，默认值是none，下面是完整语法。 float:none|left|right 属性float表示对象的漂移方向，后面的值有3个，默认的是none，表示不漂移，其他两个属性值各有一个方位，其介绍如下所述。 参数none：默认值。对象不飘浮。 参数left：文本流向对象的右边。 参数right：文本流向对象的左边。 需要注意的是，在使用float属性时要确定对象的宽度，默认情况层对象的宽度为100%，即使使用了float也不会漂移，因为它没有多余的空间给下一个对象漂移，而设置对象的宽度后，剩下的宽度可以让给其他对象漂移到此位置，前提是有足够的空间。 27.2 清除层的漂移范围 使用float不当，会出现网页不对齐，多过向左或向右漂移，这点也是很多使用table布局的设计者头痛的地方，出现这种问题，需要了解clear的用法，用来清除不同方位的漂移，clear用法是相对flaot的。 clear : none | left | right | both 从上面可知，语法clear表示控制float漂移的，可以设置float的方向漂移对设置的方面对象有效性，如下是表示各属性值的用法。 参数none：默认值。允许两边都可以有浮动对象。 参数left：不允许左边有浮动对象。 参数right：不允许右边有浮动对象。 参数both：不允许有浮动对象。 27.3 设置层的可视区域 属性clip用来设置对象的可视区域，而区域外的部分是透明的。属性clip其后可接两个参数，默认值为auto，表对象无剪切，而rect参数表示坐标的位置，里面有4个数值，其语法如下所示。 clip : auto | rect ( number number number number ) 这个属性很有意思，特别是在网页中做特效，其两值所表达出不同的功能，下面是对这两个参数的解释。 参数auto：默认值，对象无剪切。 参数rect：依据上右下左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 将两个相同而色彩不同的文字重合在一起，通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生两种不同的色彩，代码27.3表示了在两行文字中如何进行剪切成一行特效文本。 27.4 内容超过层大小时 本小节来介绍布局时常用的属性之一overflow，属性overflow表示内容超过其指定高度及宽度时如何管理内容，在实际项目中，有的文本超过对象的宽度，或有的文本超过对象的高度，这时设置对象的overflow属性来管理是否显示滚动条，下面是overflow的完整语法。 overflow : visible | auto | hidden | scroll 属性overflow所接有4个参数，分别表示为visible，auto，hidden和scroll，下面是对其的解释。 参数visible：默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且clip属性设置将失效 。 参数auto：在必需时对象内容才会被裁切或显示滚动条 。 参数hidden：不显示超过对象尺寸的内容 。 参数scroll：总是显示滚动条。 27.5 鼠标指针的不同表示 本属性在网页中应用也非常广泛，表示在对象上移动的鼠标指针采用的光标形状，在对象中，设置不同的参数所显示的光标状态不同， cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-t