css布局定位解答.ppt

css层叠样式表 布局定位;;; ;position的四个属性值含义;html head style type=text/css h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } /style /head body h2这是位于正常位置的标题/h2 h2 class=pos_left这个标题相对于其正常位置向左移动/h2 h2 class=pos_right这个标题相对于其正常位置向右移动/h2 p相对定位会按照元素的原始位置对该元素进行移动。/p p样式 left:-20px 从元素的原始左侧位置减去 20 像素。/p p样式 left:20px 向元素的原始左侧位置增加 20 像素。/p /body ;html head style type=text/css h2.pos_abs { position:absolute; left:100px; top:150px } /style /head body h2 class=pos_abs这是带 有绝对定位的标题/h2 p通过绝对定位，元素可以 放置到页面上的任何位置。下 面的标题距离页面左侧 100px ，距离页面顶部 150px。/p /body /html ;绝对位置属性： 绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数： 属性名称: top、right、bottom、left 属性值: length|percentage|auto 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 利用以上属性，用户就可以精确定义元素的位置，如： P style=position: relative; margin-right: 10px; left: 10px; I used two red hyphens to serve as a change bar. They will float to the left of the line containing THIS SPAN style=position: absolute; top: auto; left: 0px; color: red;--/SPAN word./P;html head style type=text/css p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } /style /head body p class=one一些文本。/p p class=two更多的文本。/p /body /html;在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方;与float相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：; 浮动详见： /css/css_positioning_floating.asp;; ;list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 table此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 tbody）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 thead）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 tfoot）。 table-row 此元素会作为一个表格行显示（类似 tr）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup）。 table-column 此元素会作为一个单元格列显示（类似 col） table-cell 此元素会作为一个表格单元格显示（类似 td 和 th） table-caption 此元素会作为一个表格标题显示（类似 caption） inherit 规定应该从父元素继承 display 属性的值。;html head style type=text/css span { display: block } /style /head body span本例中的样式表把 span 元素设置为块级元素。/span span两个 span 元素