CSS布局 --- 自适应布局

版权声明：欢迎转载，转载请注明出处 https://blog.csdn.net/Nate__River/article/details/82053034

网易云课堂学习笔记二：自适应布局

定宽+自适应

<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;}

不定宽（多列）+自适应

由 不定宽+自适应 类推