定位和布局.pptVIP

position: static; 没有定位，默认值 position: relative; 相对定位的元素相对于它原来的位置进行定位。 相对定位的元素没有脱离文档流，只是按照 left、right、top、bottom 值进行了位置的偏移。 元素相对定位后，仍然在文档流中占据原来的空间。 元素相对定位后，如果不设置宽度，则宽度保持原来的大小。如果使用百分比设置宽度，则宽度根据文档流中父元素的宽度进行计算。 元素相对定位后，如果未设置 left、right、top、bottom 值，则保持原来位置，且对文档流中的其它元素无影响。 position: absolute; 绝对定位的元素相对于最近的已定位的祖先元素进行定位。如果不存在已定位的祖先元素，则相对于浏览器窗口进行定位。 元素绝对定位后，将脱离文档流，不再占据原来的空间。 元素绝对定位后，如果未设置宽度，则收缩到最小。如果使用百分比设置宽度，则宽度根据定位参照物的宽度进行计算。 绝对定位的元素包含 margin、border 和 padding。 元素绝对定位后，如果未设置left、right、top、bottom 值，则保持原来位置，但文档流中的其它元素将占据它的空间。 元素绝对定位后，可以用 z-index 属性设置层叠顺序。 布局示例：两列浮动布局 body div id=“container” div id=“header”…/div div id=“sidebar”…/div div id=“content”…/div div id=“footer”…/div /div /body 两列布局的逻辑结构 方法一： #sidebar { width: 240px; float: left; } #content { margin-left: 240px; } #footer { clear:both; } 方法二： #sidebar { float: left; width: 240px; } #content { float: right; width: 500px; } #footer { clear:both; } 布局示例：三列浮动布局 三列布局的逻辑结构 body div id=“container” div id=“header”…/div div id =“sidebar1”…/div div id=“content”…/div div id=“sidebar2”…/div div id=“footer”…/div /div /body 方法一： …… #sidebar1 { float: left; width: 170px; } #content { float: left; width: 400px; } #sidebar2 { float: right; width: 170px; } #footer { clear:both; } …… ?2012 Inspur Group Inspur Education Inspur Education ?2012 Inspur Group ?2012 Inspur Group Inspur Education Page ? * 讲解要点： 讲解要点： 讲解要点： s 第6章 定位与布局 知识点回顾 掌握使用CSS掌握背景效果，边距效果，列表效果 掌握伪类的概念，设置超级链接效果 本章目标 掌握定位的基础知识 掌握DIV+CSS布局,掌握两栏布局，三栏布局 本节教学内容 CSS定位 Div+CSS布局 定位（positon） 元素相对于参照物，按照 left、right、top、bottom 值定位。 定位的四种方式 : static、absolute、relative、fixed 取值 说明 参照物 position : static 静态定位 默认值。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 position : relative 相对定位 自己原来的位置 position : absolute 绝对定位 已定位的祖先元素 / 浏览器视口 position : fixed 固定定位 浏览器视口（并不是所有的浏览器都支持） position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定