定宽与自适应
浮动 float + margin
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px;
}
简单的布局方法，左侧设置浮动，右侧设置margin-left（避免环绕左侧）的布局方法
- 优点：容易理解，易于编写
- 缺点：兼容性问题（IE6有三像素Bug）
浮动 float + margin + (fix)
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<!--css-->
.left {
float: left;
width: 100px;
position: relative; //提高层级
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 120px;
}
通过在 html 文件的 right 上套上一层 right-fix，然后对 right-fix 设置浮动可以解决 IE6 的兼容性问题，然后提高 left 的层级设置定位属性为 relative
- 优点：结构和样式更加复杂，不利于理解
- 缺点：兼容性好
浮动 float + overflow
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
通过设置overflow触发 BFC（Block Formatting Context块级格式化文本 ）模式，内容与外界隔离，不受浮动影响（不会环绕浮动元素）
- 优点：设置简单
- 缺点：兼容性问题（IE6 不支持）
table
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.parent {
display: table;
width: 100%;
}
.left,.right {
display: table-cell; //不能设置 margin
table-layout: fixed; //优点 1.加速table渲染。2.实现了布局优先
}
.left {
width:100px;
padding-right: 20px;
}
table特点，每列的宽度之和一定是等于表格宽度的，所以设置left，right会自动填满剩下的宽度
- 缺点：代码较多
flex
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1;
}
flex: 1 => flex: 1,1,0增长因子，收缩因子都是1，基础宽度为0（剩余宽度都分配给了right）
- 缺点：兼容性问题，性能问题（做一些小范围的布局）
不定宽与自适应
浮动 float + margin 与 浮动 float + margin + (fix)
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px;
}
不能完成不定宽自适应，width: 100px;与margin-left: 120px;是强耦合的属性
浮动 float + overflow
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.left {
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p {
width: 200px;
}
可以实现不定宽自适应布局(IE6 有兼容性问题)
table
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.parent {
display: table;
width: 100%;
}
.left,.right {
display: table-cell;
/*table-layout: fixed;*/
}
.left {
/*width: 100px;*/
width: 0.1%;
padding-right: 20px;
}
.left p {
width: 200px;
}
可以实现不定宽自适应布局，如果根据内容适应宽度，应去掉table-layout: fixed,同时更改left宽度width:0.1%(设置 0.1% 有兼容性的考虑，1px 在 IE8 中有问题)，再设置单元格内容（不兼容IE6）
flex
<!--html-->
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<!--css-->
.parent {
display: flex;
}
.left {
width: 200px;
margin-right: 20px;
}
.right {
flex: 1;
}
可以实现不定宽自适应布局(低版本浏览器有兼容性问题)
网友评论