php页⾯布局，调整页⾯布局的⼏种⽅法1.使⽤浮动布局
优点：兼容性⽐较好。
缺点：浮动后，元素是脱离⽂档流的，需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系
页⾯布局
* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.
layout article p{
min-height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
浮动解决⽅案
1.这是三栏布局中间部分
1.这是三栏布局中间部分
注意：最要注意的⼀点是，中间列⼀定要放在左右两列的后⾯
2.使⽤绝对定位布局
优点：布局相对迅速
缺点：定位的元素脱离了⽂档流，意味着其⼦元素也要脱离⽂档流，所以这种⽅式的可使⽤性⽐较差
页⾯布局
* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.layout article p{
min-height: 100px;
}
.layout.absolute .left-right-center{
position: relative;
}
.layout.absolute .left{
position: absolute;
left: 0;
width: 300px;
background: red;
}
.layout.absolute .right{
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.layout.absolute .center{
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}
绝对定位解决⽅案
1.这是三栏布局绝对定位解决⽅案
1.这是三栏布局绝对定位解决⽅案
3.使⽤flex布局
优点： 很好的解决了浮动和绝对定位的缺点，现在移动端基本都是⽤flex布局
ie8以下 不⽀持flex
.layout.flex .left-right-center{
display: flex;
margin-top: 140px;
}
.layout.flex .left{
flex: 0 0 300px;
width: 300px;
background: red;
}
.layout.flex .right{
flex: 0 0 300px;
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: yellow;
}
Flexbox解决⽅案
1.这是三栏布局flexbox解决⽅案
1.这是三栏布局flexbox解决⽅
注意： 中间列要放在中间
4.使⽤表格布局
优点：兼容性还不错
缺点：其中⼀栏内容⾼度增加，另外两栏的⾼度也会增加，有时我们并不需要他们同时增⾼；不利于搜索引擎抓取信息；.layout.table .left-right-center{
width: 100%;
display: table;
height: 100px;
html的flex布局}
.layout.table .left{
display: table-cell;
width: 300px;
background: red;
}
.layout.table .right{
display: table-cell;
width: 300px;
background: blue;
}
.layout.table .center{
display: table-cell;
background: yellow;
}
表格布局解决⽅案
1.这是三栏布局表格布局解决⽅案
1.这是三栏布局表格布局解决⽅案
5.⽹格布局
.id .left-right-center{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px; }
.id .left{
background: red;
}
.id .right{
background: blue;
}
.id .center{
background: yellow;
}
⽹格布局解决⽅案
1.这是三栏布局⽹格布局解决⽅案
1.这是三栏布局⽹格布局解决⽅案
假如把⾼度已知去掉或者⾼度超出
1.flex布局⾼度可以⾃适应
2.表格布局奥杜可以⾃适应
3.浮动，绝对定位，⽹格布局不能⾃适应⾼度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。