CSS佈局 --- 自適應佈局

網易雲課堂學習筆記二：自適應佈局

定寬+自適應

<div id="app">
	<div class="left"></div>
	<div class="right"></div>
</div>

1.float(absolute)+margin

.left {float: left;width: 200px;}
.right {margin-left: 120px;}

2.float+overflow

.left {float: left;width: 200px;margin-right:20px;}
.right {overflow:hidden;} //產生BFC

3.table

#app {display: table;table-layout:fixed;width:100%;}//佈局優先
.left, .right { display: table-cell;}//預設均分
.left { width:200px; padding-right:20px;} //margin失效

4.flex

#app {display: flex;}
.left { width: 200px;margin-right:20px;}
.right {flex: 1;}

定寬（多列）+自適應

由 定寬+自適應 類推

<div id="app">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

1.float+margin

.left, .center {float: left; width: 100px;margin-right: 20px;}
.right {margin-left: 240px;}

2.float+overflow

.left, .center {float: left; width: 100px;margin-right: 20px;}
.right {overflow: hidden;}

3.table

#app {display: table;table-layout:fixed;width:100%;}
.left, .center, .right { display: table-cell; padding-right: 20px;}
.left, .center{ width:200px;}

4.flex

#app {display: flex;}
.left, .center{ width: 200px;margin-right:20px;}
.right {flex: 1;}

不定寬+自適應

<div id="app">
	<div class="left">我是內容</div>
	<div class="right"></div>
</div>

1.float+overflow

.left {float: left;margin-right:20px;}
.right {overflow:hidden;} //產生BFC

2.table

#app {display: table;width:100%;}//內容優先
.left, .right { display: table-cell;}//預設根據內容比例均分
.left { width:1px; padding-right:20px;} //margin失效

3.flex

#app {display: flex;}
.left {margin-right:20px;}
.right {flex: 1;}

不定寬（多列）+自適應

由 不定寬+自適應 類推