總結前端知識點后的隨筆...
頁面樣式
頁面代碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0px; border: 0px; box-sizing:border-box; } div{ border: 1px solid black; } .left{ height: 100px; width: 100px; background-color: red; } .right{ height: 100px; width: 100px; background-color: blue; } .center{ height: 100px; } .floatDiv .left{ float: left; } .floatDiv .right{ float: right; } .floatDiv .center{ } .positionDiv .left{ position: absolute; left: 0px; } .positionDiv .right{ position: absolute; right: 0px; } .positionDiv .center{ margin-left: 100px; margin-right: 100px; } .tableDiv{ display: table; width:100%; } .tableDiv .left{ display: table-cell; } .tableDiv .right{ display: table-cell; } .tableDiv .center{ display: table-cell; } .flexDiv{ display:flex; } .flexDiv .left{ } .flexDiv .right{ } .flexDiv .center{ flex:1; } .gridDiv{ display: grid; width: 100%; grid-template-rows:100px; grid-template-columns:100px auto 100px; } .gridDiv .left{ } .gridDiv .right{ } .gridDiv .center{ } </style> </head> <body> <h1>float實現布局</h1> <div class="floatDiv"> <div class="left"></div> <div class="right"></div> <div class="center"> float布局時，居中的div必須要放在最后。居中的div的模型寬度為整個頁面，但是展示的時候會在可視范圍內展示。即不會展示大屏居左或者居右的div下面。 <strong> 因為float的初衷是實現文字環繞圖片 </strong> ，當我們縮小瀏覽器的寬度時，會發現文字會環繞在居左和居右的div周圍。 </div> </div> <br/><br/> <h1>position實現布局</h1> <div class="positionDiv"> <div class="left"></div> <div class="right"></div> <div class="center"> position布局時，居中的div必須放到最后。 <strong> 與float不同的事，文字會被左右的div遮蓋 </strong> ，所以需要使用margin-left:100px;來調整div </div> </div> <h1>table + table-cell實現布局</h1> <div class="tableDiv"> <div class="left"></div> <div class="center"> 使用display:table實現左中右時， <strong> 居中的div必須放中間 </strong> 。另外，父元素必須設置width:100%; 。並且，居中的div的寬度不再為頁面的寬度 </div> <div class="right"></div> </div> <h1>flex實現布局</h1> <div class="flexDiv"> <div class="left"></div> <div class="center"> 使用flex實現左中右時，居中的div設置flex:1，居中的div的寬度不再為頁面的寬度 </div> <div class="right"></div> </div> <h1>grid實現布局</h1> <div class="gridDiv"> <div class="left"></div> <div class="center"> 使用grid實現左中右時，網格內部的div的寬度和高度都由父標簽設置！ </div> <div class="right"></div> </div> </body> </html>