兩欄自適應布局(左邊固定，右邊自適應)
利用CSS中的calc()方法來動態設定寬度
雙float布局
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮動*/
}
.left,.right{
box-sizing: border-box;
float: left;
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
width: calc(100% - 140px);
/*左邊盒子總寬度為120px,右邊盒子設置了一個marign-left為20px,則右邊盒子的總 寬度為:
父容器的寬度100% - 左邊盒子寬度(120px)+右盒子margin-left(20px)*/
}
<div class="wrap">
<div class="left">左左左左左左左左左左左<br /><br /><br /><br /><br />xixi</div>
<div class="right">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</br>
右右右右右右右右右右右右右右右右右右右右右右右右
</div>
</div>
缺點：
要清除父元素的浮動
要知道左邊盒子的寬度，分別設置 box-sizing,要知道兩個盒子間的距離
block元素的水平寬度會隨著父容器的改變而流動的特性
float + margin-left
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮動*/
}
.left {
width: 120px;
border: 5px solid #ddd;
float: left;
}
.right {
/*margin-left: 150px的計算：
左盒子寬度(120px,注意：這里是content-box) + 左盒子的border(10px) + 右盒子距離左盒子的距離(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
}
缺點：
要清除父元素的浮動
要計算margin-left
效果圖：
image.png
absolute + margin-left
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
min-height: 50px;
}
.left {
width: 120px;
border: 5px solid #ddd;
position: absolute; /*開啟BFC*/
}
.right {
/*margin-left: 150px的計算：
左盒子寬度(120px,注意：這里是content-box) + 左盒子的border(10px) + 右盒子距離左盒子的距離(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
background: #1da57a;
}
缺點：
父元素無法清除浮動，只能通過設置父元素的min-height來解決
效果圖：
image.png
float + BFC
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮動*/
}
.left {
width: 120px;
border: 5px solid #ddd;
margin-right: 20px;
float: left;
}
.right {
border: 5px solid #ddd;
background: #1da57a;
margin-left: 0;
overflow: auto; /*開啟BFC*/
}
image.png
flex布局
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
display: flex;
align-items: flex-start; /*解決默認值stretch列等高的問題，讓子盒子的高度自動*/
}
.left {
width: 120px;
border: 5px solid #ddd;
flex: 0 0 auto;
}
.right {
border: 5px solid #ddd;
background: #1da57a;
margin-left: 20px;
flex: 1 1 auto;
}
效果圖
image.png
三行自適應布局
三行自適應布局特點：
-上下固定，中間顯示內容且只有中間部分有滾動條。
效果圖
三行自適應布局.png
--
HTML主要代碼
<div class="header"></div>
<div class="main">
<div class="content">
<h3>hello</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, maiores, aspernatur distinctio, possimus consectetur delectus corporis ipsum minima eligendi obcaecati ut. Vitae pariatur deleniti ducimus sunt esse saepe, illum quam minima, asperiores mollitia molestiae non reiciendis a perspiciatis. Molestias in impedit minima mollitia facere ipsa incidunt quae hic perspiciatis necessitatibus.</p>
<div class="footer"></div>
--
CSS主要代碼
<style>
body{
padding: 0;
margin: 0;
}
.header{
background-color: gray;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
.main{
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
.footer{
background-color: gray;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
</style>
固定頂欄
將導航固定在頂部，不隨滾動條的滑動而消失。
效果圖
2018-12-06_094334.png
--
HTML主要代碼
<div class="nav"></div>
<div class="main">
</div>
--
CSS主要代碼
<style>
body{
padding: 0;
margin: 0;
}
.nav{
background-color: crimson;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
.main{
margin-top: 100px;
background-color: rgb(195, 209, 247);
}
</style>
雙飛翼布局(使用浮動)
雙飛翼布局特點：
-三列布局，兩邊定寬，中間寬度自適應。
-中間欄要在瀏覽器中優先展示渲染
-允許任意列的高度最高
效果圖
image.png
步驟：
1.將左右欄設置一個固定的寬度。
2.將左、右、中間欄都設置左浮動。
3.將中間欄的寬度設置為100%。
4.將中間欄的子元素的上下外邊距margin設置為0，左右外邊距margin設置為左欄右欄的寬度。
5.將右欄的距左外邊距margin-left設置為-100%。
6.將左欄的距左外邊距marign-left設置為負自身的寬度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雙飛翼布局 demo</title>
<style>
body{
padding: 0;
margin: 0;
}
.center{
background-color: rgb(153, 103, 233);
float: left;
width: 100%;
}
.center .content{
margin: 0 200px;
}
.left{
width: 200px;
background-color: rgb(85, 238, 154);
float: left;
/* 設置為-100%,-100%也就是瀏覽器的寬度 */
margin-left: -100%;
}
.right{
width: 200px;
background-color: rgb(96, 162, 238);
float: left;
/* 設置為負自身的寬度 */
margin-left: -200px;
}
</style>
</head>
<body>
<div class="center">
<div class="content">主內容區</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
圣杯布局(使用定位)
效果圖
-全屏
image.png
-最小屏
image.png
步驟：
1.為外容器(包裹中間欄，左右欄的容器)設置左右內邊距padding，為兩邊側翼留位置。
2.左右欄設置固定的寬度。
3.將中間欄，左右欄都設置為左浮動。
4.設置中間欄的寬度為100%。
5.設置左欄的距左外邊距margin-left為-100%。
6.設置右欄的距左外邊距margin-lef為負自身的寬度。
7.將左右欄的定位position設置為相對定位relative。且將左欄的left設置為負外部容器的寬度，右欄的right設置為負外部容器的寬度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局 demo</title>
<style>
body{
padding: 0;
margin: 0;
}
.wrapper{
/* 設置外容器的左右內邊距，為兩個側翼留位置 */
padding: 0 100px;
}
.center{
background-color: rgb(172, 245, 112);
width: 100%;
float: left;
}
.left{
background-color: rgb(107, 245, 233);
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
background-color: rgb(245, 128, 245);
width: 100px;
float: left;
margin-left: -100px;
position: relative;
right: -100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
圣杯布局的缺陷：當中間欄比左右欄的寬度小時，布局會亂掉。
image.png
注意：雙飛翼布局和圣杯布局必須將中間欄的HTML結構放在最前面，以便瀏覽器可以最先渲染中間欄的內容。(瀏覽器渲染html是從頭部到底部的方向進行渲染)。
