兩欄自適應(yīng)布局(左邊固定，右邊自適應(yīng))
利用CSS中的calc()方法來動態(tài)設(shè)定寬度
雙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,右邊盒子設(shè)置了一個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>
缺點(diǎn)：
要清除父元素的浮動
要知道左邊盒子的寬度，分別設(shè)置 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的計(jì)算：
左盒子寬度(120px,注意：這里是content-box) + 左盒子的border(10px) + 右盒子距離左盒子的距離(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
}
缺點(diǎn)：
要清除父元素的浮動
要計(jì)算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的計(jì)算：
左盒子寬度(120px,注意：這里是content-box) + 左盒子的border(10px) + 右盒子距離左盒子的距離(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
background: #1da57a;
}
缺點(diǎn)：
父元素?zé)o法清除浮動，只能通過設(shè)置父元素的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; /*解決默認(rèn)值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
三行自適應(yīng)布局
三行自適應(yīng)布局特點(diǎn)：
-上下固定，中間顯示內(nèi)容且只有中間部分有滾動條。
效果圖
三行自適應(yīng)布局.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>
固定頂欄
將導(dǎo)航固定在頂部，不隨滾動條的滑動而消失。
效果圖
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>
雙飛翼布局(使用浮動)
雙飛翼布局特點(diǎn)：
-三列布局，兩邊定寬，中間寬度自適應(yīng)。
-中間欄要在瀏覽器中優(yōu)先展示渲染
-允許任意列的高度最高
效果圖
image.png
步驟：
1.將左右欄設(shè)置一個固定的寬度。
2.將左、右、中間欄都設(shè)置左浮動。
3.將中間欄的寬度設(shè)置為100%。
4.將中間欄的子元素的上下外邊距margin設(shè)置為0，左右外邊距margin設(shè)置為左欄右欄的寬度。
5.將右欄的距左外邊距margin-left設(shè)置為-100%。
6.將左欄的距左外邊距marign-left設(shè)置為負(fù)自身的寬度。
<!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;
/* 設(shè)置為-100%,-100%也就是瀏覽器的寬度 */
margin-left: -100%;
}
.right{
width: 200px;
background-color: rgb(96, 162, 238);
float: left;
/* 設(shè)置為負(fù)自身的寬度 */
margin-left: -200px;
}
</style>
</head>
<body>
<div class="center">
<div class="content">主內(nèi)容區(qū)</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
圣杯布局(使用定位)
效果圖
-全屏
image.png
-最小屏
image.png
步驟：
1.為外容器(包裹中間欄，左右欄的容器)設(shè)置左右內(nèi)邊距padding，為兩邊側(cè)翼留位置。
2.左右欄設(shè)置固定的寬度。
3.將中間欄，左右欄都設(shè)置為左浮動。
4.設(shè)置中間欄的寬度為100%。
5.設(shè)置左欄的距左外邊距margin-left為-100%。
6.設(shè)置右欄的距左外邊距margin-lef為負(fù)自身的寬度。
7.將左右欄的定位position設(shè)置為相對定位relative。且將左欄的left設(shè)置為負(fù)外部容器的寬度，右欄的right設(shè)置為負(fù)外部容器的寬度。
<!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{
/* 設(shè)置外容器的左右內(nèi)邊距，為兩個側(cè)翼留位置 */
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>
圣杯布局的缺陷：當(dāng)中間欄比左右欄的寬度小時，布局會亂掉。
image.png
注意：雙飛翼布局和圣杯布局必須將中間欄的HTML結(jié)構(gòu)放在最前面，以便瀏覽器可以最先渲染中間欄的內(nèi)容。(瀏覽器渲染html是從頭部到底部的方向進(jìn)行渲染)。
