一、兩欄布局
一欄固定，一欄自适應
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
- 固定寬度端float：left；另一端使用margin-left留出與左邊側欄的寬度。或者将另外一邊設定為overflow：hidden。
.left{
width:200px;
height:200px;
background:red;
float:left;
}
.right{
height:200px;
margin-left:200px;
background:blue;
}
- 固定寬度端設定為position：absolute；另外一端使用margin-left留出位置。同上。
- 兩欄的容器設定display:flex 固定寬度一邊flex:0 0 寬度 ； 另外一邊flex:1 1。
#container{
height:500px;
dispaly:flex;
}
#left{
background:red;
flex:0 0 300px;
}
#right{
background:blue;
flex : 1 1;
}
二、三欄式布局
-
聖杯布局：核心是左右定寬，中間自适應。
但是此時寫HTML結構時要先寫左右兩邊然後在寫中間欄。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { margin: 0; padding: 0; }
.left {
background: yellow;
float: left;
width: 180px;
}
.middle {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
-
雙飛翼布局
實作方式與聖杯布局差不多，但在解決中間欄div.middle部分的思路不一緻。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { width: 100%; margin: 0; padding: 0; }
.header,
.footer {
clear: both;
width: 100%;
background-color: #ccc;
text-align: center;
}
.left,
.main,
.right {
float: left;
height: 150px;
text-align: center;
}
.left,
.right {
width: 220px;
}
.left {
margin-left: -100%;
background-color: yellow;
}
.main {
width: 100%;
}
.middle {
min-height: 150px;
margin: 0 220px;
background-color: blue;
}
.right {
margin-left: -220px;
background-color: red;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
二者的對比：主要是針對于中間div.middle的處理思路不一樣；聖杯布局是先留白，在用margin讓兩邊過去，利用了相對布局；雙飛翼布局多建立一個div，包裹middle，利用margin為負值來布局。
三、靜态布局（static layout）
即定寬，指不管浏覽器尺寸具體是多少， 網頁布局始終按照最初寫代碼時的布局顯示。正常的pc網站都是靜态布局顯示的；
設定了min-width .隻要小于這個寬度就會出現滾動條； 如果大于這個寬度内容居中顯示，外加背景。
（網頁最外層容器（outer）有固定的大小，所有的内容以該容器為标準。超出容器高寬的部分以滾動條overflow：scroll來實作滾動查閱）
優點：不存在相容性問題（css2）
缺點：移動端不可以使用pc端的布局，兩個頁面的布局不一緻，移動端需要自己設定一個布局，并使用不同域名呈現。
四、流式布局
又叫百分比布局，随着螢幕大小的改變，頁面布局不會發生較大的變化，可以進行适配調整。
優點：元素高寬用百分比作為機關，高寬變化按螢幕分辨率調整，布局不會發生變化。
缺點：螢幕尺度跨度過大的時候，布局不能正常顯示。
常用的設計模闆：
1，左側固定，右側自适應
2，兩邊固定，中間自适應
五、自适應布局
1、布局特點
螢幕分辨率變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法
使用 @media 媒體查詢給不同尺寸和媒體的裝置切換不同的樣式。
在優秀的響應範圍設計下可以給适配範圍内的裝置最好的體驗，在同一個裝置下實際還是固定的布局。
六、響應式布局
響應式布局可以為不同終端的使用者提供更加舒适的頁面和更好的使用者體驗。
優點：面對不同分辨率裝置 的靈活性強； 能快捷解決多裝置顯示适應問題；
缺點：不能相容所有的浏覽器，代碼累贅，會出現隐藏無用元素，加載時間加長
一定程度上改變了使用者原有的布局結構，會出現使用者混淆的情況
實作原理：是通過css的Media Query(媒介查詢) @media功能來判斷我們終端的裝置寬度在多少像素内，然後執行與之對應的css布局。
七、Flex 布局
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 布局。
注意，設為 Flex 布局以後，子元素的float、clear和vertical-align屬性将失效。
Flex布局詳解：https://blog.csdn.net/weixin_43307658/article/details/86629318
原文連結：https://blog.csdn.net/weixin_43572937/article/details/88430233
![新款現代索納塔官圖釋出，外觀全面更新，NLine版本更具運動氣息！1、外觀方面，全新索納塔強調長引擎蓋和寬前端布局，并集[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)