html+css|元素的浮動與定位
- 高洛峰原創
- 2017-02-09 13:36:482126瀏覽
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中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn