css布局(一).pptVIP

CSS排版 原理篇 浏览器如何排列元素？ 行级元素从左到右 块级元素从上到下 XHTML代码如下： html head……/head body h1…./h1 h2…./h2 p…../p h2…./h2 p…../p p…../p p…../p /body /html 如何“浮动”元素 1、使用div，定义ID选择符 2、设定width 3、设定float属性为left或right #amazing{ Width:200px; Float:right; } 如何形成“两列”布局 确定浮动元素（float:left或者float:right），给它设定Width，为解决IE BUG设置display:inline； 给非浮动元素设置合适margin。 清除浮动影响clear:left或clear:right或clear:both 左浮CSS： #sidebar{ float:left; width:150px; display:inline; } #content{ margin:0 0 0 150px; } #footer{clear:left;} 如何形成“三列”布局 确定浮动元素（float:left和float:right），给它设定Width，为解决IE BUG设置display:inline； 给中间元素设置合适的左margin和右margin。 清除浮动影响clear:both #left{ float:left; width:150px; display:inline; } #right{ float:right; width:150px; display:inline; } #center{ margin:0 150px 0 150px; } #footer{clear:both;} 绝对定位 Position：absolute 设置top bottom left right 绝对定位需注意的问题 位置是，相对于包含它的元素的指定坐标 坐标的计算 * * h1 h2 p h2 p p p span text /span text h1 h2 p p p span text /span h2 text text p id=”amazing” XHTML代码如下： html head……/head body h1…./h1 h2…./h2 p id=“amazing”…../p h2…./h2 p…../p p…../p p…../p /body /html div id=“sidebar” 左浮 div id=“content” 设置 左Margin div id=“footer” div id=“left” 左浮 div id=“center” 设置 左右Margin div id=“right” 右浮 div id=“footer” (0,0) X轴 Y轴 div id=“header” div id=“main” div id=“footer” text div id=“sidebar” div id=“header” div id=“main” div id=“footer” div id=“sidebar” div id=“tv” 100px 100px div id=“sidebar” div id=“tv” …….. /div /div #tv{ position:absolut; top:100px; left:100px; width:100px; } 绝对定位需注意的问题