定寬與自適應
浮動 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;
}
可以實現不定寬自適應布局(低版本瀏覽器有兼容性問題)
