页面布局
题：假设高度已知，请写出三栏布局，其中左栏右栏宽各位300px，中间自适应。
答: 7种方法
1.浮动 2.绝对定位 3.flex 4.table-cell 5.grid(网格布局) 6.圣杯布局 7.双飞翼布局。
-
公共样式
*{ margin:0;padding: 0; } .container{ margin-top: 20px; } article > div { min-height: 100px; } .left,.right{ background: red; width: 300px; } .center{ background: #ccc; }
浮动
<!-- 1.浮动三栏布局 -->
<section class="container float">
<style>
.float .left{
width: 300px;
float: left;
}
.float .right{
width: 300px;
float: right;
}
</style>
<article>
<div class="left">浮动解决方案</div>
<div class="right">浮动解决方案</div>
<div class="center">浮动解决方案</div>
</article>
</section>
<!-- 1.浮动两栏布局 -->
<section class="container float">
<style>
.float .left{
width:100px;
float: left;/*左侧浮动覆盖右侧*/
background: #ccc;
}
.float .right{
overflow: auto;/*形成BFC，形成独立区域*/
background: pink;
}
</style>
<article>
<div class="left">浮动两栏布局</div>
<div class="right">浮动两栏布局</div>
<div class="clear"></div>
</article>
</section>
绝对定位
<!-- 2.绝对定位三栏布局 -->
<section class="container absolute">
<style>
.absolute-container .left{
position: absolute;
left: 0;
width: 300px;
}
.absolute-container .right{
position: absolute;
right: 0;
width: 300px;
}
.absolute-container .center{
position: absolute;
left: 300px;
right: 300px;
}
</style>
<article class="absolute-container">
<div class="left">absolute布局</div>
<div class="center">
absolute布局
</div>
<div class="right">absolute布局</div>
</article>
</section>
<!-- 2.绝对两栏定位布局 -->
<section class="container abs">
<style>
.abs .left{
width:100px;
position: absolute;
left: 0;
background: #ccc;
}
.abs .right{
position: absolute;
right: 0;
left: 100px;
background: pink;
}
</style>
<article>
<div class="left">绝对定位两栏布局</div>
<div class="right">绝对定位两栏布局</div>
</article>
</section>
flex布局
<!-- 3.flex三栏布局 -->
<section class="container flex">
<style>
.flex-container{
display: flex;
}
.flex-container .left,.flex-container .right{
width: 300px;
}
.flex-container .center{
flex: 1;
}
</style>
<article class="flex-container">
<div class="left">flex布局</div>
<div class="center">
flex布局
</div>
<div class="right">flex布局</div>
</article>
</section>
<!-- 3.flex两栏布局 -->
<section class="container flex">
<style>
.flexbox{
display: flex;
}
.flex .left{
flex: 0 0 100px;
background: #ccc;
}
.flex .right{
flex: 1;
background: pink;
}
</style>
<article class="flexbox">
<div class="left">flex两栏布局</div>
<div class="right">flex两栏布局</div>
</article>
</section>
table-cell布局
<!--4. table三栏布局 -->
<section class="container table">
<style>
.table-container{
display: table;
height: 100px;
width: 100%;
}
.table-container > div{
display: table-cell;
}
</style>
<article class="table-container">
<div class="left">table布局</div>
<div class="center">
table布局
</div>
<div class="right">table布局</div>
</article>
</section>
<!--4. table两栏布局 -->
<section class="container table">
<style>
.tablebox{
display: table;
width: 100%;
height: 100%;
}
.table .left{
display: table-cell;
width: 100px;
background: #ccc;
}
.table .right{
display: table-cell;
background: pink;
}
</style>
<article class="tablebox">
<div class="left">table两栏布局</div>
<div class="right">table两栏布局</div>
</article>
</section>
grid布局
<!-- 5.grid三栏布局 -->
<section class="container grid">
<style>
.grid-container{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
</style>
<article class="grid-container">
<div class="left">grid布局</div>
<div class="center">
grid布局
</div>
<div class="right">grid布局</div>
</article>
</section>
<!-- 5.grid两栏布局 -->
<section class="container grid">
<style>
.gridbox{
display: grid;
grid-template-rows: 100px;/*高*/
grid-template-columns: 100px auto;
}
</style>
<article class="gridbox">
<div class="left">grid两栏布局</div>
<div class="right">grid两栏布局</div>
</article>
</section>
圣杯布局
<!-- 6.圣杯布局 -->
<section class="container grail">
<style type="text/css">
.f-left{
float: left;
}
.grail-container{
padding: 0 300px 0 300px;
overflow: hidden;
}
.grail .left,.grail .right{
width: 300px;
position: relative;
}
.grail .left{
margin-left: -100%;
left: -300px;
}
.grail .right{
margin-left: -300px;
position: relative;
right: -300px;
}
.grail .center{
width: 100%;
}
</style>
<article class="grail-container">
<div class="center f-left">圣杯解决方案</div>
<div class="left f-left">圣杯解决方案</div>
<div class="right f-left">圣杯解决方案</div>
</article>
</section>
双飞翼布局
<!-- 7.双飞翼布局 -->
<section class="container wind">
<style type="text/css">
.f-left{
float: left;
}
.wind-container{
/*padding: 0 300px 0 300px;*/
overflow: hidden;
}
.wind .left,.wind .right{
width: 300px;
}
.wind .left{
margin-left: -100%;
}
.wind .right{
margin-left: -300px;
}
.wind .center{
width: 100%;
}
.inner{
margin: 0 300px 0;
}
</style>
<article class="wind-container">
<div class="center f-left">
<div class="inner">双飞翼布局</div>
</div>
<div class="left f-left">双飞翼布局</div>
<div class="right f-left">双飞翼布局</div>
</article>
</section>
-
优缺点
浮动布局
1.center只能放在最下面，而文档的渲染方式是由上而下的，通常center中的内容最重要，应该放在最上面，所以有了圣杯布局和双飞翼布局。
2.浮动影响周围的元素，且脱离文档流，处理好浮动元素和周边元素的关系。
3.不支持不定高列表的浮动。
4.兼容性好绝对定位
1.脱离文档流，子元素也脱离文档流，可适用性较差
2.快flex
css3属性，移动端多用table
1.其中一个单元格高度超出，两侧的也会增高，有时候不需要
2.一定要等到页面加载完成后才能渲染
3.适用于表格grid
代码量少，新技术圣杯布局
宽度太小，会变形双飞翼布局
IE6+兼容性好
去掉高度，flex 和 table 可以用
语义化，不要通篇div
页面布局理解要深刻
css基础要扎实
思维灵活且积极上进（新技术要关注）
代码书写规范
如何让让一个不定宽高的DIV，垂直水平居中？
- css3 transform方法
公共样式
<style>
.uncertainty-box{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<section class="uncertainty-box css3-translate">
<style>
.css3-translate{
position: relative;
}
.css3-translate .uncertainty{
transform: translate(-50%,-50%);
background: red;
position: absolute;
top: 50%;
left: 50%;
}
</style>
<article class="uncertainty">不确定宽高的div</article>
</section>
- flex方法
<section class="uncertainty-box flex">
<style>
.flex{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<article class="uncertainty">不确定宽高的div</article>
</section>
- table-cell方法
<section class="uncertainty-box table-cell">
<style>
.table-cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.table-cell .tabbox{
vertical-align: middle;
}
</style>
<article class="uncertainty">table-cell不确定宽高的div</article>
</section>
