页面布局
2019-11-07 本文已影响0人
邢走在云端
题目： 假设高度已知，请写出三栏布局，其中左栏右栏高度各为300px,中间自适应
能写出有几种方案？
- 方法一：float 浮动
- 方法二：absoulte 绝对定位
- 方法三：table 表格布局
- 方法四：flex
- 方法五：grid网格布局
<!DOCTYPE html>
<html lang="en">
<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>页面布局</title>
</head>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
<body>
<p>假设高度已知，请写出三栏布局，其中左栏右栏高度各为300px,中间自适应</p>
<div class="section">
<style>
.layout.float div {
height: 100px;
}
.float .side {
width: 300px;
}
.float .left {
float: left;
background: #0f0;
}
.float .right {
float: right;
background: #00f;
}
.float .center {
background: #f00;
}
</style>
<h1>方法一：浮动</h1>
<div class="layout float">
<div class="left side"></div>
<div class="right side"></div>
<div class="center"></div>
</div>
</div>
<div class="section">
<style>
.layout.absolute div {
height: 100px;
}
.absolute .side {
width: 300px;
position: absolute;
}
.absolute .left {
left: 0;
background: #0f0;
}
.absolute .right {
right: 0;
background: #00f;
}
.absolute .center {
background: #f00;
}
</style>
<h1>方法二：绝对定位</h1>
<div class="layout absolute">
<div class="left side"></div>
<div class="right side"></div>
<div class="center"></div>
</div>
</div>
<div class="section">
<style>
.flex {
display: flex;
}
.layout.flex div {
height: 100px;
}
.flex .side {
width: 300px;
}
.flex .left {
background: #0f0;
}
.flex .right {
background: #00f;
}
.flex .center {
flex: 1;
background: #f00;
}
</style>
<h1>方法三：flex 弹性布局</h1>
<div class="layout flex">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
<div class="section">
<style>
.layout.table {
width: 100%;
display: table;
height: 100px;
}
.table > div {
display: table-cell;
}
.table .side {
width: 300px;
}
.table .left {
background: #0f0;
}
.table .right {
background: #00f;
}
.table .center {
background: #f00;
}
</style>
<h1>方法四：table 表格布局</h1>
<div class="layout table">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
<div class="section">
<style>
.grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .side {
width: 300px;
}
.grid .left {
background: #0f0;
}
.grid .right {
background: #00f;
}
.grid .center {
background: #f00;
}
</style>
<h1>方法五：grid 网格布局</h1>
<div class="layout grid">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
</body>
</html>
截图
延伸
每个方案各自的优缺点
- 浮动：
缺点：脱离文档流 要清除浮动
优点：兼容性好 - 绝对定位
缺点：脱离文档流，子元素也脱离
优点：快捷，不易出错 - flex
缺点：IE兼容性不好 不能兼容IE8及以下浏览器。
优点：比较完美 特别是移动端 - table 布局
缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。
优点：兼容性好 - 网格布局
网格布局也是新出的一种布局方式
把高度已知去掉 哪些适用，哪些不适用
- flex和table布局可以用，其他三种不行
