頁面佈局
注意方案多樣性、各自原理、各自優缺點、如果不定高呢、相容性如何
三欄自適應佈局,左右兩側300px,中間寬度自適應
(1) 給出5種方案
- 方案一: float (左右浮動,中間不用給寬,設定margin左右留出位置)
html部分,center放到後面
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
<div class="content">content</div>
</section>
css部分
.wrapper {
height: 100px;
}
.left {
float: left;
width: 300px;
height: 100%;
background: red;
}
.right {
float: right;
width: 300px;
height: 100%;
background: yellow;
}
.content {
background: skyblue;
height: 100%;
margin: 0 300px;
}- 方案二: position定位 (中間設定left 300 right 300 ,寬度就自適應了)
html不變
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
<div class="content">content</div>
</section>
css部分
.wrapper {
position: relative;
height: 100px;
}
.left {
position: absolute;
left: 0;
width: 300px;
height: 100%;
background: red;
}
.right {
position: absolute;
right: 0;
width: 300px;
height: 100%;
background: yellow;
}
.content {
position: absolute;
left: 300px;
right: 300px;
background: skyblue;
height: 100%;
}- 方案三: flex伸縮佈局
html不變
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
<div class="content">content</div>
</section>
css部分
.wrapper {
display: flex;
height: 100px;
}
.left {
width: 300px;
height: 100%;
background: red;
}
.right {
width: 300px;
height: 100%;
background: yellow;
}
.content {
flex: 1;
background: skyblue;
height: 100%;
}
- 方案四: 表格佈局 (設定父元素為display:table,子元素都是display:table-cell;然後給兩邊設定width,中間不設定就自動了,記得父元素給width:100%)
html部分,將center改到中間位置
<section class="wrapper">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</section>css部分
.wrapper {
display: table;
width: 100%;
height: 100px;
}
.left {
display: table-cell;
width: 300px;
height: 100%;
background: red;
}
.right {
display: table-cell;
width: 300px;
height: 100%;
background: yellow;
}
.content {
display: table-cell;
background: skyblue;
height: 100%;
}
- 方案五: 網格佈局 Grid第一個專門為解決佈局問題而建立的CSS模組 (設定容器型別,然後設定列寬和行高)
html部分不變,center居中
<section class="wrapper">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</section>
css部分十分簡潔
.wrapper {
display: grid;
width: 100%;
grid-template-rows: 200px 100px 10px;
grid-template-columns: 300px auto 300px;
}
.left {
background: red;
}
.right {
background: yellow;
}
.content {
background: skyblue;
}(2) 各自的優缺點。
方案一、方案二:
float和position方案的有點是相容性好,因為都是比較老的解決方案了,
缺點是float之後需要清除浮動造成的影響,
定位的話就是絕對定位之後脫離文件流了,你要注意用position:relative包裹一下
方案三:
flex是目前移動端主流的方案,css的語法,缺點就是IE8以下不支援。
方案四:
語義化不太好,
方案五:
有嚴重的相容性問題
(3) 如果不定高,哪些方案會有問題
如果不定高float / 定位的方案會有問題
三欄自適應佈局,上下固定,中間高度自適應 (自適應的地方設定top300 bottom300,高度就自適應了)
方案一: 定位
html
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</section>
css
.wrapper {
height: 800px;
position: relative;
}
.top {
position: absolute;
top: 0;
height: 100px;
width: 100%;
background: red;
}
.bottom {
position: absolute;
bottom: 0 ;
height: 100px;
width: 100%;
background: blue;
}
.content {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
background: skyblue;
}方案二: flex佈局
html
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</section>css
.wrapper {
display: flex;
height: 700px;
flex-direction: column;
}
.top {
height: 100px;
background: red;
}
.bottom {
height: 100px;
background: blue;
}
.content {
flex: 1;
background: skyblue;
}方案三: 網格佈局grid (設定grid-template-rows: 300px auto 300px)
html不變
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</section>css
.wrapper {
display: grid;
height: 700px;
grid-template-rows: 100px auto 100px;
}
.top {
background: red;
}
.bottom {
background: blue;
}
.content {
background: skyblue;
}兩欄自適應,右側固定,左側自適應
方案一: 利用BFC的渲染規則,BFC不會和浮動的元素互相重疊
html
<section class="wrapper">
<div class="right">right</div>
<div class="left">left</div>
</section>css 避免左側侵入到右側,給左側div建立一個BFC,因為BFC的渲染機制就是獨立的容器,不會和浮動的元素重疊
.left {
height: 200px;
background: red;
overflow: hidden;
}
.right {
float: right;
width: 300px;
background: blue;
}
方案二: 定位
html
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</section>css
.wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
right: 300px;
background: red;
}
.right {
position: absolute;
width: 300px;
right: 0;
background: blue;
}
方案三: flex
html
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</section>css
.wrapper {
display: flex;
}
.left {
flex: 1;
background: red;
}
.right {
width: 300px;
background: blue;
}方案四: 表格佈局,注意給父元素表格要設定width:100%
html
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</section>
css
.wrapper {
display: table;
width: 100%;
}
.left {
display: table-cell;
background: red;
}
.right {
display: table-cell;
width: 300px;
background: blue;
}
方案五: grid網格佈局
css
.wrapper {
display: grid;
grid-template-columns: auto 300px;
}
.left {
background: red;
}
.right {
background: blue;
}
html
<section class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</section>兩欄自適應,上側固定,下側自適應
方案一: 定位
設定content部分的top: 100px botton: 0
html
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
</section>css
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.top {
position: absolute;
top: 0;
height: 100px;
background: red;
width: 100%;
}
.content {
position: absolute;
width: 100%;
top: 100px;
bottom: 0;
background: skyblue;
}
方案二: flex
top高度100px,然後content設定flex: 1
html
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
</section>css
display: flex;
height: 800px;
}
.top {
height: 100px;
background: red;
}
.content {
flex: 1;
background: skyblue;
}
方案三: grid網格佈局
思路,就是設定display:grid後 設定列寬或者行高,有多少列就設定多少個引數,多少行就設多少引數。
html
<section class="wrapper">
<div class="top">top</div>
<div class="content">content</div>
</section>css
.wrapper {
display: grid;
height: 800px;
grid-template-rows: 100px auto;
}
.top {
background: red;
}
.content {
background: skyblue;
}