3.浮动与定位

Posted pandameng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于3.浮动与定位的主要内容,如果未能解决你的问题,请参考以下文章

浮动与定位

浮动,定位,与透明

浮动布局与定位布局

CSS--浮动与定位

js基础高级3

第3天:CSS浮动定位表格表单总结