XML和Web数据管理第六章 层叠样式表CSS.ppt

CSS 分类 CSS position 属性 position属性可把一个元素放置到一个静态的、相对的、绝对的、或固定的位置中。 继承性：No 可能的值 static默认。位置被设置为static的元素，它始终会处于页面流给予的位置（一个static元素会忽略任何top、bottom、left或right声明）。 relative位置被设置为relative的元素，可将其移至相对于其正常位置的地方，因此“left:20”会将元素移至元素正常位置左边20个像素的位置。 absolute位置被设置为absolute的元素，可被定位于相对于包含它的元素的指定坐标。此元素的位置可通过“left”、“top”、“right”以及“bottom”属性来规定。 fixed位置被设置为fixed的元素，可被定位于相对于浏览器窗口的指定坐标。此元素的位置可通过left、top、right以及bottom属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于IE7（strict模式）。 CSS 分类 例6.73 本例演示如何相对于一个元素的正常位置来对其定位。 例6.74 本例演示如何使用绝对值来对元素进行定位。例6.75本例演示如何相对于浏览器窗口来对元素进行定位。 例6.76 本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。 例6.77 Z-index可被用于将在一个元素放置于另一元素之后。 例6.78 上面的例子中的元素已经更改了Z-index。 CSS 分类 CSS visibility 属性 visibility属性可设置某元素是否可见或不可见。 提示：即使不可见的元素也会占据页面上的空间。请使用display属性来创建不占据页面空间的不可见元素。 继承性：No 可能的值 visible元素是可见的 hidden元素是不可见的 例6.79 本例演示如何使元素不可见。 CSS 定位 CSS 定位属性 CSS定位属性允许你对元素进行定位。 CSS 定位 CSS bottom 属性 bottom属性可规定某个元素的底部边缘。 注释：如果position属性的值为static，那么设置bottom属性不会产生任何效果。 提示：即使不可见的元素也会占据页面上的空间。请使用display属性来创建不占据页面空间的不可见元素。 继承性：No 可能的值 auto默认。通过浏览器计算底部的位置。 %设置元素的底边到最近一个具有定位设置父元素的底部边缘的百分比位置。 length使用px、cm等单位设置元素的底边到最近一个具有定位设置父元素的底部边缘的位置。可使用负值。 例6.80 本例演示如何使用像素值设置图像的底部边缘 例6.81 本例演示如何使用百分比值设置图像的底部边缘 CSS 定位 CSS clip 属性 clip属性可设置元素的形状。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？clip属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 继承性：No 可能的值 shape设置元素的形状。合法的形状值是：rect (top, right, bottom, left) auto默认。浏览器可设置元素的形状。 例6.82 本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。 CSS 定位 left设置元素的左边与其父元素的右边或左边的的距离。 auto % length right设置元素的右边距父元素右边的左侧或右侧的距离 auto % length top设置元素的顶边距父元素的顶边的上方或下方的距离 auto % length CSS 定位 CSS overflow 属性 overflow属性可设置当某个元素的内容溢出其区域时发生的事情。 继承性：No 可能的值 visible默认。内容不会被修剪，会呈现在元素之外。 hidden内容会被修剪，但是浏览器不会显示供查看内容的滚动条。 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 例6.83本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。 例6.84本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置overflow属性来隐藏其内容。 例6.85本例演示如何设置浏览器来自动地处理溢出。 CSS 定位 CSS vertical-align 属性 vertical-align属性可设置元素的垂直排列。 继承性：No 可能的值 baseline默认。元素被放置在父元素的基线上。 sub垂直