第3章css基础分析.ppt

相对定位 html head style type=text/css h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } /style /head body !--div style= width : 600px;height:400px; position:relative;left:100px; top :120px -- h2这是位于正常位置的标题/h2 h2 class=pos_left这个标题相对于其正常位置向左移动/h2 h2 class=pos_right这个标题相对于其正常位置向右移动/h2 p相对定位会按照元素的原始位置对该元素进行移动。/p p样式 left:-20px 从元素的原始左侧位置减去 20 像素。/p p样式 left:20px 向元素的原始左侧位置增加 20 像素。/p !--/div -- /body /html CLIP rect (top,?right,?bottom,?left) OverFlow html head style type=text/css div { background-color:#00FFFF; width:150px; height:150px; overflow:scroll } /style /head body p如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。/p div 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 /div /body /html vertical-align html head style type=text/css img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} /style /head body p 这是一幅img class=top border=0 src=logo.jpg /位于段落中的图像。 /p p 这是一幅img class=bottom border=0 src=logo.jpg /位于段落中的图像。 /p /body /html Z-index html head style type=text/css img.x { position:absolute; left:0px; top:0px; z-index:-1 } /style /head body h1这是一个标题/h1 img class=x src=/i/eg_mouse.jpg / p默认的 z-index 是 0。Z-index -1 拥有更低的优先级。/p /body /html display visibility margin 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： 简单浮动 html head style type=text/css span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } /style /head body p spanT/spanhis is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is s