一、多列自适应布局
自适应: 盒子宽度随着屏幕宽度发生变化 百分比
1:两列自适应布局
要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子
2: 三列自适应布局
左右两侧固定宽度,中间盒子自适应
技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排
二、等高布局
height:auto时的现象
height:auto 全部都是内容撑开
每一列盒子高度同时变化,以最高的那列为基准 整个盒子的高度应该取决于最高的那列
等高布局
伪等高 —>内外边距相消法
<style>
* {
padding: 0;
margin: 0;
}
.c {
overflow: hidden;
}
.col1 {
width: 30%;
height: 400px;
background-color: yellow;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.col2 {
width: 40%;
height: 300px;
bac