最近幾個月一直用vue在寫手機端的專案，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足，所以複習一下布局方法。
.box1 .left
.box1 .right
兩列自適應
.box1
.box1 .left
.box1 .right
.box1
.box1 .left
.box1 .right
聖杯布局給最外面加padding, 讓 padding-left 和 padding-right 的數值等於left 和 right 的寬度，然後利用相對定位把他們再移動在兩旁。
.box
.box .middle
.box .left
.box .right
middle
left
right
.box
.middle-wrap
.middle-wrap .middle
.left
.right
CSS布局說 兩欄布局 三欄布局（聖杯 雙飛翼）
5.三欄布局 小知識點 內聯元素從左向右 塊級元素從上向下 各佔一行 position屬性，有6大類 這是標準盒子模型，可以看到width的長度等於content的寬度 而當將box sizing的屬性值設定成border box時，盒子模型的width border padding content...
CSS聖杯布局（雙飛翼布局）
我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...
CSS布局 聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...