3.浮动与定位

一、浮动

float:　　left 　right　左右浮动

①.使用float的标签脱离当前的文档流（好像张了小翅膀一样飞起来）

div　不设置高度　　默认里面内容的高度就是这个div的高度

②.清除浮动

clear: left　　right　　both(同时清除左右浮动)

　　1、告诉无辜div，给浮动那些留地方

　　2、多个浮动的时候希望在哪里换行　就在哪里写

练习代码：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>浮动</title>
 6         <style>
 7             .{
 8                 width:200px;
 9                 height:500px;
10                 background:red;
11             }
12             .d2{
13                 width:200px;
14                 height:200px;
15                 background:pink;
16                 float:left;
17             }
18             .d3{
19                 width:200px;
20                 height:200px;
21                 background:green;
22                 float:left;
23             }
24             .die{
25                 width:500px;
26                 height:200px;
27                 border:2px solid black;
28             }
29             .son2{
30                 width:200px;
31                 height:200px;
32                 background:pink;
33                 float:left;
34             }
35             .son3{
36                 width:200px;
37                 height:200px;
38                 background:yellowgreen;
39                 float:left;
40             }
41             .nine{
42                 width:100px;
43                 height:100px;
44                 background:red;
45                 border:2px solid gold;
46                 float:left;
47             }
48         </style>
49     </head>
50     <body>
51         <div class="die">
52             <div class="son2"></div>
53             <div class="son3"></div>
54         </div>
55         <hr>
56         <div style="clear:both;"></div>
57         <div class="d2"></div>
58         <div class="d3"></div>
59         <div style="width:100px;height:210px;background:red;clear:both"></div>
60         <hr>
61         <div class="nine"></div>
62         <div class="nine"></div>
63         <div class="nine"></div>
64         <div class="nine" style="clear:both;"></div>
65         <div class="nine"></div>
66         <div class="nine"></div>
67         <div class="nine" style="clear:both;></div>
68         <div class="nine"></div>
69         <div class="nine"></div>
70         <div class="nine"></div>
71     </body>
72 </html>

二、定位

position:　static　relative　absolute(绝对定位)　fixed

absolution

参照物：找含有position属性的祖辈　拿他当做参照物　如果一直到最上面都找不到以浏览器为参照物

配合：

top:　距离浏览器顶部的距离　XXX　像素

left:　距离浏览器顶部的距离　XXX　像素

right:　距离浏览器顶部的距离　XXX　像素

bottom:距离浏览器顶部的距离　XXX　像素

relative 相对的是自己原来的位置

配合：

top:　参照原来的位置向下移动 XXX　像素

left:　参照原来的位置　向右移动 XXX　像素

right:　参照原来的位置　向左移动 XXX　像素

bottom:参照原来的位置　向上移动 XXX　像素

练习代码：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>定位</title>
 6         <style>
 7             img{
 8                 position:absolution;
 9                 top:10px;
10                 right:10px;
11             }
12             #die{
13                 width:500px;
14                 height:500px;
15                 background:#ABCDEF;        
16             
17             }
18             #box{
19                 width:200px;
20                 height:200px;
21                 background:pink;
22                 margin-top:50px;
23                 margin-left:300px;
24                 position:absolute;
25                 left:40px;
26                 top:40px;                
27             }
28             
29         </style>
30     </head>
31     <body>
32         <img src="../video/lanhua1.jpg" width="200">
33         <div id="die"></div>
34         <div id="box"></div>
35         <>
36     </body>
37 </html>

猜你喜欢