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

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

高洛峰
發布: 2017-02-09 13:36:48
原創
2277 人瀏覽過

1.浮動屬性float

清除浮動clear

overflow屬性

visible:內容不會被修剪,會呈現在元素框之外

hidden:溢出內容會被修剪,並且被修建的內容是不可見的

auto:在需要時產生捲軸,即自適應所要顯示的內容

scroll:溢出內容會被修剪,且瀏覽器會始終顯示滾動條

2.定位屬性position

static:靜態定位

relative:相對定位

absolute:絕對定位

fixed:固定定位

例子如下:

P196

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!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.製作車載音樂頁紙樣式圖如下圖說明碼

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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
最新問題
無法在 HTML、CSS 中正確定位某個部分
來自於 1970-01-01 08:00:00
0
0
0
絕對位置但相對於父級
來自於 1970-01-01 08:00:00
0
0
0
新標題:確保頁腳始終位於頁面底部
來自於 1970-01-01 08:00:00
0
0
0
使用 Flexbox 將元素左對齊和居中對齊
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板