【float】与【position】汇总

代码示例：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>三列布局:左右固定列宽，中间列自适应</title>
  6     <style>
  7         .float-left{
  8             background-color:red;
  9             float:left;
 10             width:80px;
 11             height:50px;
 12             border:solid 3px black;
 13             padding-left:80px;
 14             margin-left:150px;
 15         }
 16 
 17         .absolute{
 18             background-color:blue;
 19             position:absolute;
 20             width:80px;
 21             height:50px;
 22             border:solid 3px black;
 23             padding-left: 80px;
 24             margin-left:150px;
 25         }
 26 
 27         .relative{
 28             background-color:yellow;
 29             position:relative;
 30             width:80px;
 31             height:50px;
 32             border:solid 1px black;
 33             padding-left: 80px;
 34             margin-left:150px;
 35             margin-top:2px;
 36         }
 37 
 38         .fixed{
 39             background-color:green;
 40             position:fixed;
 41             width:50px;
 42             height:50px;
 43             border:solid 3px black;
 44             padding-left: 100px;
 45             margin-left:55px;
 46             margin-top: 2px;
 47 
 48         }
 49 
 50         span{
 51             background-color:#DB9395;
 52             width:100px;
 53             height:100px;
 54             border:solid 1px black;
 55             padding-left: 100px;
 56             margin-left:55px;
 57         }
 58     </style>
 59 </head>
 60 <body>
 61     <!--span元素的测试-->
 62     <span>span</span>
 63 
 64     <br><br>
 65 
 66     <!--float的测试-->
 67     <div style="float:left;background-color:red;">float div 1</div>
 68     <div class="float-left">float div 2</div>
 69     <div class="float-left">float div 3</div>
 70     <div style="background-color:#76D8DD;border-bottom: solid 1px orange;">normal div1</div>
 71     <div style="background-color:#76D8DD;">normal div2</div>
 72 
 73     <br/><br/><br/><br/><br/><br/><br/>
 74 
 75     <!--absolute的测试-->
 76     <div style="position:absolute;background-color:blue;">absolute div 1</div>
 77     <div class="absolute">absolute div 2</div>
 78     <div class="absolute">absolute div 3</div>
 79     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div3</div>
 80     <div style="background-color:#76D8DD;">normal div4</div>
 81 
 82 
 83      <br><br><br><br><br><br>
 84 
 85     <!--relative的测试-->
 86     <div style="position:relative;background-color:yellow;">relative div 1</div>
 87     <div class="relative">relative div 2</div>
 88     <div class="relative">relative div 3</div>
 89     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div5</div>
 90     <div style="background-color:#76D8DD;">normal div6</div>
 91 
 92    <!--fixed的测试-->
 93     <br>
 94     <div style="position:fixed;background-color:green;">fixed div 1</div>
 95     <br><br>
 96     <div class="fixed">fixed div 2</div>
 97     <div class="fixed">fixed div 3</div>
 98     <div style="background-color:#76D8DD;border-bottom:1px solid coral;">normal div7</div>
 99     <div style="background-color:#76D8DD;">normal div8</div>
100 
101 
102 </body>
103 </html>
View Code

 

posted @ 2018-06-29 16:13  一分耕耘，一分收获  阅读(142)  评论(0)  编辑  收藏  举报