從我看到的，知道的，全面的總結一下。CSS常見布局。
一、單列布局
單列布局，通常定寬(可以使用%，可以實作自适應，也可以直接确定寬度大小)并利用margin: auto進行水準居中
.main {
width: 90%;
height: 2000px;
background-color: aqua;
margin: 0 auto;
}
二、雙列布局
1. 定寬雙列布局
常見利用float 進行布局左邊左浮動，右邊右浮動。(或均為左浮動)
需要清除浮動。
可以修改盒子模型為border-box
.main {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.left {
width: 1000px;
height: 1500px;
float: left;
background-color: aqua;
}
.right {
width: 1000px;
height: 1500px;
float: right;
background-color: aqua;
}
2. 左側固定，右側自适應
建立基本的html布局,要求：兩個div之間相距20px，左側div寬120px
雙inline-block
.main {
padding: 15px 20px;
border: 1px dashed #ff6c60;
font-size: 0;
}
.left {
margin-right: 20px;
display: inline-block;
width: 120px;
height: 500px;
font-size: 14px;
border: 1px solid #ddd;
vertical-align: top;
box-sizing: border-box;
}
.right {
display: inline-block;
width: calc(100% - 140px);
height: 1000px;
font-size: 14px;
border: 1px solid #ddd;
vertical-align: top;
box-sizing: border-box;
}需要準确确定子容器的寬度，需要border-box模型
需要消除空格的影響，需要父容器font-size : 0
使頂端對齊，`vertical-align: top
雙float
.main {
overflow: hidden;
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
margin-right: 20px;
}
.right {
width: calc(100% - 140px);
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
}
float+ margin-left左邊左浮動
右邊計算margin-left
清除浮動。
.main {
overflow: hidden;
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
}
.right {
width: calc(100% - 140px);
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
margin-left: 140px;
}
absolute+margin-left左邊絕對定位(父元素設定position)
右邊計算margin-left。
.main {
padding: 15px 20px;
border: 1px dashed #ff6c60;
position: relative;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
position: absolute;
}
.right {
width: calc(100% - 140px);
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
margin-left: 140px;
}
注意：沒有清除絕對定位的方法，若左側盒子高于右側盒子，就會超出父容器的高度。是以隻能通過設定父容器的min-height來防止這種情況。
使用float+BFC
上面的方法都是需要通過左邊盒子的寬度來計算某一個值，下面的三個方法不需要計算。
将右邊盒子BFC。
flex方案
.main {
padding: 15px 20px;
border: 1px dashed #ff6c60;
display: flex;
align-items: flex-start;
}
.left {
width: 120px;
height: 500px;
border: 1px solid #ddd;
flex: 0 0 auto;
margin-right: 20px;
}
.right {
height: 1000px;
border: 1px solid #ddd;
flex: 1 1 auto;
}
flex容器的一個預設屬性值:align-items: stretch;。這個屬性導緻了列等高的效果。 為了讓兩個盒子高度自動，需要設定: align-items: flex-start;
grid方案
暫時沒有進行學習，今日不适合學習，待續。。。
三、三列布局
1. 兩側定寬，中間自适應
使用float浮動設定父元素寬度，
設定左左右浮動。
中間元素用到calc()來計算所需寬度，達到自适應。
使用margin調整間距，也可以全部左浮動。
需要清除浮動帶來的影響。
.main {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.left {
width: 200px;
height: 1500px;
float: left;
background-color: aqua;
margin: 0 10px;
}
.right {
width: 200px;
height: 1500px;
float: right;
background-color: aqua;
margin: 0 10px;
}
.middle {
width: calc(100% - 460px);
height: 1500px;
float: left;
background-color: aqua;
margin: 0 10px;
}
使用定位為父元素設定relative定位。
分别定位各個子元素
确定間距。
(不建議使用，因為使用絕對定位，後面加入内容的時候會被覆寫)
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.left {
width: 200px;
height: 1500px;
position: absolute;
left: 10px;
background-color: aqua;
}
.right {
width: 200px;
height: 1500px;
position: absolute;
right: 10px;
background-color: aqua;
}
.middle {
width: calc(100% - 460px);
height: 1500px;
position: absolute;
left: 230px;
background-color: aqua;
}
padding+負margin(聖杯布局)
此原理來自這篇文章。
這篇文章給出了一個不一樣的解決方案，在此我有一些修改，清除浮動的方式改為了overflow: hidden;
要求：左邊寬度為 200px，右邊150px，中間自适應。
基本的結構如下：
基本的css樣式如下(為了更好的顯示，是以設定了邊框，将box-sizing設定為border-box模型)：
#container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
border: 1px dashed #ff6c60;
}
#container .column {
border: 1px solid #ff6c60;
box-sizing: border-box;
}
#center {
width: 100%;
height: 1000px;
}
#left {
width: 200px;
height: 100px;
}
#right {
width: 150px;
height: 100px;
}
将左側弄到上面去
#left {
position: relative;
margin-left: -100%;
right: 200px;
}
#right {
margin-right: -150px;
}
就OK了！
【注】為了使其更加完美，可以在body上加入,防止因浏覽器視窗過小，而導緻布局失效。
body {
min-width:..;
}
需要添加一些padding讓布局更加的完美。隻需要将left和right 的寬度保持住就可以。
雙飛翼實作三列布局
雙飛翼和聖杯是一樣的道理，隻是實作的原理不一樣，是以起了不同的名字。
對于聖杯，我們沒有添加額外的标簽，而雙飛翼需要為center加一個額外的div，首先我們先将頁面的基本結構搭建起來。
和聖杯布局一樣，隻不過需要将，padding 用 margin來進行實作。
css代碼如下：
#header {
width: 100%;
height: 50px;
background-color: aliceblue;
}
#container {
overflow: hidden;
border: 1px dashed #ff6c60;
}
#footer {
width: 100%;
height: 50px;
background-color: aliceblue;
}
.column {
float: left;
}
#center {
width: 100%;
}
#inner-center {
height: 1000px;
margin-left: 200px;
margin-right: 150px;
background-color: aqua;
}
#left {
width: 200px;
height: 100px;
margin-left: -100%;
background-color: aqua;
}
#right {
width: 150px;
height: 100px;
margin-left: -150px;
background-color: aqua;
}
四、等分布局
1. 正常實作
我們用四個子元素來進行等分。父元素預設100%寬度， 子元素要平均分為四份。間距為10px;
基本的html結構如下：
子元素設定浮動。
設定margin-right: 10px,寬度則為calc(25% - 10px)
父元素清除浮動。使用負邊距，将最後一個margin-left清除。
.father {
overflow: hidden;
margin-right: -10px;
}
.son {
width: calc(25% - 10px);
height: 500px;
float: left;
margin-right: 10px;
background-color: aqua;
}
關于負邊距更多的探讨，計劃下篇文章總結一下。
2. flex 實作
同樣需要父容器使用負邊距來進行清除帶來的影響。
html基本代碼同上
.father {
display: flex;
margin-right: -10px;
}
.son {
flex: 1 1 auto;
align-items: flex-start;
height: 500px;
border: 1px solid #ff6c60;
margin-right: 10px;
}
(完)
![單列變雙列css_CSS常用布局方式-兩列布局、三列布局[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)