首頁 > 文章 > web前端 > html+css|元素的浮動與定位

html+css|元素的浮動與定位

高洛峰原創: 2017-02-09 13:36:482184瀏覽

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

看更多