公用的高度和宽度的CSS代码
.w {
width: 300px;
}
.h {
height: 200px;
}
1.浮动式布局
- html中的代码如下
<div class="left w h"></div>
<div class="right w h"></div>
<div class="center h"></div>
- css代码如下
.left {
float: left;
background-color: red;
}
.right {
float: right;
background-color: green;
}
.center {
background-color: #ccc;
}
优点：兼容性比较好
缺点：浮动是脱离文档流的,有些时候需要清除浮动，需要很好的处理浮动周边元素的关系
以下html代码为另外四种方法的公用代码
<section class="box">
<div class="left w h"></div>
<div class="center h"></div>
<div class="right w h"></div>
</section>
2.绝对定位布局
.sec2 {
position: relative;
}
.sec2 div {
position: absolute;
}
.center {
left: 300px;
right: 300px;
background-color: #ccc;
}
.left {
left: 0;
background-color: red;
}
.right {
right: 0;
background-color: green;
}
优点：快捷，比较不容易出问题
缺点：该布局脱离文档流，所以子元素也必须脱离文档流，因此可使用性比较差
3.flex布局
.box{
display: flex;
width: 100%;
}
.center{
flex:1;
background-color: #ccc
}
.left{
background-color: red;
}
.right{
background-color: green;
}
优点：非常有效的解决了浮动和绝对定位的问题，去掉以知高度仍然可用
缺点：兼容性比较差(css3的属性)，不兼容IE8及以下
4.表格布局
.box{
display: table;
width: 100%;
}
.box div{
display: table-cell;
}
.center{
background-color: #ccc;
}
.left{
background-color: red;
}
.right{
background-color: green;
}
优点 :兼容性非常好，补缺了flex布局兼容的问题
缺点 :操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整(不符合某些场景)
5.网格布局
.box{
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
}
.center{
background-color: #ccc;
}
.left{
background-color: red;
}
.right{
background-color: blue;
}
优点：新技术，简洁明了
缺点：兼容性差
