页面布局
注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何
三栏自适应布局,左右两侧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;
}