1.浮動屬性float
清除浮動clear
overflow屬性
visible:內容不會被修剪,會呈現在元素框之外
hidden:溢出內容會被修剪,並且被修建的內容是不可見的
auto:在需要時產生捲軸,即自適應所要顯示的內容
scroll:溢出內容會被修剪,且瀏覽器會始終顯示滾動條
2.定位屬性position
static:靜態定位
relative:相對定位
absolute:絕對定位
fixed:固定定位
例子如下:
P196
<!doctype html> <html> <head> <meta charset="utf-8"> <title>子元素相对于直接父元素定位</title> <style type="text/css"> body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;} .father{ margin:10px auto; width:300px; height:300px; padding:10px; background:#ccc; border:1px solid #000; position:relative; } .child01,.child02,.child03{ width:100px; height:50px; line-height:50px; background:#ff0; border:1px solid #000; margin:10px 0px; text-align:center; } .child02{ position:absolute; left:50px; top:100px; z-index:1000; } .child03{ position:absolute; left:10px; top:80px; z-index:100; } </style> </head> <body> <div class="father"> <div class="child01">child-01</div> <div class="child02">child-02</div> <div class="child03">child-03</div> </div> </body> </html>
3.製作車載音樂頁紙樣式圖如下圖說明碼
<!doctype html> <html> <head> <meta charset=”utf-8”> <title>车载音乐页面</title> </head> <body> <div> <img src=”images/11.jpg”alt=”车载音乐”> <a href=”#”class=”left”></a> <a href=”#”class=”right”></a> <ul> <li class=”max”></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
更多html+css|元素的浮動與定位相關文章請關注PHP中文網!