标签：定位 lan 左移 margin color htm top 使用 gre
一、浮动
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>
标签：定位 lan 左移 margin color htm top 使用 gre
原文地址：https://www.cnblogs.com/pandaMeng/p/12334546.html
