1.一列定寬，一列自適應（兩列在同一行(第乙個元素必須脫離或半脫離文件流），右邊一列要佔滿剩餘的寬度（塊級元素寬高會自動預設充滿剩下螢幕））
預設左邊先顯示：
float+margin
float+負外邊距：
右側主體自適應區塊
左側定寬200px區塊
/*先顯示的放在前面，需要外加一層包裹；*/
.main
.right
.left
右側主體自適應區塊
左側定寬200px區塊
.left
.right
右側主體自適應區塊
左側定寬200px區塊
.left
.right
#box
float+bfc:
右側主體自適應區塊
左側定寬200px區塊
.left
.right
#box
float+負外邊距(中間先顯示)：
中間自適應區塊
左側定寬200px區塊
右側定寬300px區塊
.left
.right
#box
.mid
左側定寬200px區塊
右側定寬300px區塊
中間自適應區塊
.left
.right
.mid
中間自適應區塊
左側定寬200px區塊
右側定寬300px區塊
.left
.right
.mid
中間自適應區塊
左側定寬200px區塊
右側定寬300px區塊
#box
.left
.right
.mid
三個屬性：column-count(列數)、column-gap(列間距)、break-inside(為了控制文字塊分解成單獨的列，以免專案列表的內容跨列)
.masonry
@media screen and (min-width: 400px)
}@media screen and (min-width: 600px)
}@media screen and (min-width: 800px)
}@media screen and (min-width: 1100px)
}.item
.masonry
@media screen and (min-width: 400px)
}@media screen and (min-width: 600px)
}@media screen and (min-width: 800px)
}@media screen and (min-width: 1100px)
}.item
@media mediatype and|not|only(media feature)media feature：
device-height/width:輸出裝置的寬高
height/width:輸出螢幕的寬高
max-height/width:輸出螢幕的最大可見寬高
min-height/width:輸出螢幕的最小可見寬高
CSS布局總結
css布局模型有三種，分別為流動模型 flow 浮動模型和層模型。流動模型 為預設模型，當未設定其他模型時使用。塊狀元素在包含其的父元素內部，從上到下順序排列，每個一行 設定寬度時按設定的寬度顯示 內聯元素和內聯塊狀元素都會在包含其的元素內從左到右水平順序顯示。無法通過設定left right to...
CSS布局總結
對於css的學習來說，布局和定位可以說使最關鍵的一部分，也是最基礎的部分，布局和定位方面在學習的時候應該要系統，要自己總結一遍，如果只是草草的過一遍，就直接開始做demo，會遇到很多坑，反而得不償失。因此我寫下這篇部落格，讀者如果發現問題，望不吝賜教。在講布局和定位之前，先總結一下盒子模型。盒模型是...
CSS常見布局總結
元素水平居中 行內元素水平居中 text align center 塊元素水平居中 margin 0 auto 注意 margin 是復合屬性，也就是說 margin auto 其實相當於 margin auto auto auto auto margin 0 auto 相當於 margin 0 a...