共计 字 • 阅读约
min
1. 浮动布局
方式: 固定的盒子设置固定宽度和浮动,自适应盒子设置浮动
原理: div 默认是占满一整行,让其左浮动,就会自动拥有减去固定宽度盒子的宽
<div class="div1">
<div class="left"></div>
<div class="right"></div>
</div>
.div1{
overflow: hidden;
}
.div1 .left{
width:200px;
height:300px;
background:#f90;
float:left;
}
.div1 .right{
height:300px;
background:#f00;
margin-left:200px;
}
2. 使用 CSS 函数 calc 计算宽度
方式: 固定宽度的盒子设置定宽,自适应的盒子通过 calc 计算获得宽,然后通过浮动让元素成一行显示
原理: calc 可以计算出 100% 宽度减去固定盒子宽的宽,来达到自适应效果
<div class="div2">
<div class="left"></div>
<div class="right"></div>
</div>
.div2{
width:100%;
height:300px;
overflow: hidden;
}
.div2 .left{
width:200px;
height:300px;
background:#f90;
float:left;
}
.div2 .right{
height:300px;
width:calc(100% - 200px); /*calc中运算符两边必须要有空格*/
background:#FF0000;
float:right;
}
3. flex 布局实现(需考虑兼容性)
方式: 父级盒子设置为弹性盒(display:flex),固定盒子设置宽度,自适应盒子设置 flex:1;
原理: 通过 flex 将元素呈现一行显示,并且自适应元素设置 flex:1,让其自动拥有铺满剩下宽度的特性
<div class="div3">
<div class="left"></div>
<div class="right"></div>
</div>
.div3{
width:100%;
display: flex;
}
.div3 .left{
width:200px;
height:300px;
background:#f90;
}
.div3 .right{
flex:1;
height:300px;
background: #ff0000;
left:200px;
top:0;
}
4. table 布局
方式: 父级元素设置为表格盒子,宽度 100%,子元素设置 display:table-cile,固定宽度盒子设置宽
原理: 该方法运用了表格的特性
<div class="div4">
<div class="left"></div>
<div class="right"></div>
</div>
.div4{
display: table;
width:100%;
}
.div4 .left{
width:200px;
height:300px;
background: #f90;
display: table-cell;
}
.div4 .right{
background:#FF0000;
height:300px;
display: table-cell;
}
以上四种方法仅是我个人了解到的,肯定实现方式不止四种
文章更新于: 2021-2-13 15:5:52