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　像素

fixed:   跟着滚动条一起滚动

永远都以浏览器为参照　　放置在浏览器的边缘

练习代码：

 

 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             #box{
13                 width:200px;
14                 height:200px;
15                 background:pink;
16                 margin-top:50px;
17                 margin-left:300px;
18                 position:relative;
19                 right:80px;
20             }
21             
22             #die{
23                 width:800px;
24                 height:800px;
25                 background:#ABCDEF;
26                 position:relative;
27                 
28             }
29             #son{
30                 width:200px;
31                 height:200px;
32                 background:pink;
33                 position:absolute;
34                 left:40px;
35                 top:40px;                
36             }
37             
38         </style>
39     </head>
40     <body>
41         <img src="../video/lanhua1.jpg" width="200">
42         <div id="box"></div>
43         <div id="die">
44             <div id="son"></div>
45         </div>
46     </body>
47 </html>

 三、实战-导航

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset='utf-8'>
 5     <title>实战-导航</title>
 6     <style>
 7         *{padding:0px;margin:0px;}
 8         body{font-family:微软雅黑}
 9         a{text-decoration:none;color:#133B68;}
10         ul{list-style:none;}
11         ul li{
12             float:left;
13             width:100px;
14             height:50px;
15             border:1px solid #133B68;
16             text-align:center;
17             line-height:50px;
18             margin-right:10px;
19             margin-left:10px;
20             position:relative;
21         }
22         li a{
23             width:100px;
24             height:50px;
25             display:block;
26         }
27         li a:hover{
28             background:#133B68;
29             color:#FFF;
30         }
31         .uu{
32             position:absolute;
33             left:-11px;
34             top:50px;
35             display:none;
36         }
37         li:hover ul{
38             display:block;
39         }
40         
41         
42     </style>
43   </head>
44   <body>
45     <ul>
46       <li><a href="">首页</a></li>
47       <li>
48         <a href="">关于我们</a>
49         <ul class="uu">
50             <li>谢谢</li>
51             <li>不客气</li>
52         </ul>
53       </li>
54       <li><a href="">产品展示</a></li>
55       <li><a href="">用户介绍</a>
56         <ul class="uu">
57             <li>你好</li>
58             <li>请进</li>
59         </ul>
60       </li>
61     </ul>
62     
63   </body>
64 </html>

 

posted @ 2020-02-20 11:52  微忆  阅读(113)  评论(0)    收藏  举报