定位和布局

第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定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。z-index设置元素的层叠顺序。与定位相关的属性position:static;没有定位，默认值静态定位示例position:relative;相对定位的元素相对于它原来的位置进行定位。相对定位的元素没有脱离文档流，只是按照left、right、top、bottom值进行了位置的偏移。元素相对定位后，仍然在文档流中占据原来的空间。元素相对定位后，如果不设置宽度，则宽度保持原来的大小。如果使用百分比设置宽度，则宽度根据文档流中父元素的宽度进行计算。元素相对定位后，如果未设置left、right、top、bottom值，则保持原来位置，且对文档流中的其它元素无影响。相对定位position:relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。相对定位相对定位示例top:20pxleft:20pxposition:absolute;绝对定位的元素相对于最近的已定位的祖先元素进行定位。如果不存在已定位的祖先元素，则相对于浏览器窗口进行定位。元素绝对定位后，将脱离文档流，不再占据原来的空间。元素绝对定位后，如果未设置宽度，则收缩到最小。如果使用百分比设置宽度，则宽度根据定位参照物的宽度进行计算。绝对定位的元素包含margin、border和padding。元素绝对定位后，如果未设置left、right、top、bottom值，则保持原来位置，但文档流中的其它元素将占据它的空间。元素绝对定位后，可以用z-index属性设置层叠顺序。绝对定位position:absolute;表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。绝对定位绝对定位示例top:20pxleft:20px本节教学内容CSS定位Div+CSS布局在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。关于浮动图片左浮动，后面的文字围绕在图片的右侧float属性脱离常规文档流而表现为向右或向左浮动float属性的取值rightleftnone浮动属性left向左浮动right向右浮动none不浮动浮动属性styletype=text/css#first,#second,#third{width:100px;height:50px;border:1px#333solid;margin:5px;}/style......divid=first第1块div/divdivid=second第2块div/divdivid=third第3块div/div没有浮动的divstyletype=text/css#first,#second,#third{float:left;width:100px;height:50px;border:1px#333solid;margin:5px;}/style......divid=first第1块div/divdivid=second第2块div/divdivid=third第3块div/div浮动属性5-3向左浮动，脱离常规文档流向左浮动styletype=text/css#first,#second,#third{float:right;width:100px;height:50px;border:1px#333solid;margin:5px;}/style......divid=first第1块div/divdivid=second第2块div/divdivid=third第3块div/div浮动属性5-4向右浮动，脱离常规文档流向右浮动styletype=text/css#first,#second,#third{float:right;width:100px;height:50px;border:1px#333solid;margin:5px;}#first{height:80px;}/style......divid=first第1块div/divdivid=second第2块div/divdivid=third第3块div/div浮动属性5-5均向右浮动，但third被卡住向右浮动imgsrc=images/fruit.jpgalt=水果id=fruit/imgsrc=images/coat.jpgalt=服装id=coat/divid=example这是一个例子br/一个服装图片br/一个水果图片br/这是一个例子br/一个服装图片br/一个水果图片/div#fruit{float:left;}#coat{float:right;}默认不清除浮动的效果未使用清理属性(clear)imgsrc=images/fruit.jpgalt=水果id=fruit/imgsrc=images/coat.jpgalt=服装id=coat/divid=example这是一个例子br/一个服装图片br/一个水果图片br/这是一个例子br/一个服装图片br/一个水果图片/div#fruit{float:left;}#coat{float:right;}#example{clear:left;}清除文本左侧的浮动使用清理属性(clear)imgsrc=images/fruit.jpgalt=水果id=fruit/imgsrc=images/coat.jpgalt=服装id=coat/divid=example这是一个例子br/一个服装图片br/一个水果图片br/这是一个例子br/一个服装图片br/一个水果图片/div#fruit{float:left;}#coat{float:right;}#example{clear:both;}清除文本两边的浮动使用清理属性(clear)使用清理属性(clear)布局示例：两列浮动布局bodydivid=“container”divid=“header”…/divdivid=“sidebar”…/divdivid=“content”…/divdivid=“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;}布局示例：三列浮动布局三列布局的逻辑结构bodydivid=“container”divid=“header”…/divdivid=“sidebar1”…/divdivid=“content”…/divdivid=“sidebar2”…/divdivid=“footer”…/div/div/body方法一：……#sidebar1{float:left;width:170px;}#content{float:left;width:400px;}#sidebar2{float:right;width:170px;}#footer{clear:both;}……方法二：……#sidebar1{float:right;width:170px;}#content{float:right;width:400px;}#sidebar2{float:left;width:170px;}#footer{clear:both;}……Div+CSS布局的综合示例总结定位的基础知识DIV+CSS布局,两栏布局，三栏布局谢谢！