前端佈局很是重要的一環就是頁面框架的搭建,也是最基礎的一環。在頁面框架的搭建之中,又有居中佈局、多列布局以及全局佈局,今天咱們就來總結總結前端乾貨中的CSS佈局。css
1)使用inline-block+text-align
(1)原理、用法html
(2)代碼實例前端
<div class="parent"> <div class="child>DEMO</div> </div>
.child{ display:inline-block; } .parent{ text-align:center; }
(3)優缺點css3
2)使用table+margin
(1)原理、用法web
(2)代碼實例瀏覽器
<div class="parent"> <div class="child>DEMO</div> </div>
.child { display:table; margin:0 auto; }
(3)優缺點:框架
3)使用absolute+transform
(1)原理、用法佈局
(2)代碼實例性能
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { position:relative; } .child { position:absolute; left:50%; transform:translateX(-50%); }
(3)優缺點flex
4)使用flex+margin
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { display:flex; } .child { margin:0 auto; }
(3)優缺點
5)使用flex+justify-content
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { display:flex; justify-content:center; }
(3)優缺點
1)使用table-cell+vertical-align
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { display:table-cell; vertical-align:middle; }
(3)優缺點
2)使用absolute+transform
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { position:relative; } .child { position:absolute; top:50%; transform:translateY(-50%); }
(3)優缺點
3)使用flex+align-items
(1)原理、用法
(1)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { position:flex; align-items:center; }
(3)優缺點
1)使用absolute+transform
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { position:relative; } .child { position:absolute; left:50%; top:50%; transform:tranplate(-50%,-50%); }
(3)優缺點
2)使用inline-block+text-align+table-cell+vertical-align
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { text-align:center; display:table-cell; vertical-align:middle; } .child { display:inline-block; }
(3)優缺點
3)使用flex+justify-content+align-items
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="child>DEMO</div> </div>
.parent { display:flex; justify-content:center; align-items:center; }
(3)優缺點
1)使用float+overflow
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left { float:left; width:100px; margin-right:20px; } .right { overflow:hidden; }
(3)優缺點
2)使用float+margin
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left { float:left; width:100px; } .right { margin-left:120px; }
(3)優缺點
3)使用float+margin(改良版)
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="rigth-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
.left { float:left; width:100px; position:relative; } .right-fix { float:right; width:100%; margin-left:-100px; } .right { margin-left:120px; }
(3)優缺點
4)使用table
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; padding-right:20px; } .right,.left { display:table-cell; }
5)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent { display:flex; } .left { width:100px; margin-right:20px; } .right { flex:1; }
(3)優缺點
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left,.center { float:left; width:100px; margin-right:20px; } .right { overflow:hidden; }
1)使用float+overflow
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p{ width: 200px; }
(3)優缺點
2)使用table
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent{ display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{ width:200px; }
(3)優缺點
3)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent { display:flex; } .left { margin-right:20px; } .right { flex:1; } .left p{ width: 200px; }
(3)優缺點
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left,.center{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p,.center p{ width: 100px; }
公式轉化: l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = (w + g) * n
所以,咱們須要解決兩個問題:
1)使用float
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div>
.parent{ margin-left: -20px;//l增長g } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box;//包含padding區域 w+g }
(3)優缺點
2)使用table
(1)原理、用法
(2)代碼實例
<div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </div>
.parent-fix{ margin-left: -20px;//l+g } .parent{ display: table; width:100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px;//w+g }
(3)優缺點
3)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div>
.parent{ display: flex; } .column{ flex: 1; } .column+.column{ margin-left:20px; }
(3)優缺點
1)使用float
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
p{ background: none!important; } .left,.right{ background: #444; } .parent{ overflow: hidden; } .left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; } .left{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }
(3)優缺點
2)使用table
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; padding-right:20px; } .right,.left { display:table-cell; }
3)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.parent { display:flex; } .left { width:100px; margin-right:20px; } .right { flex:1; }
(3)優缺點
4)使用display
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="left">left</div> <div class="right">right </div> </div>
.parent { width: 100%; display: -webkit-box; } .left { width:100px; margin-right: 20px; } .right { -webkit-box-flex: 1; }
(3)優缺點
1)使用position
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="top">top</div> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> <div class="bottom">bottom</div> </div>
html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color:white; } .top{ position:absolute; top:0; left:0; right:0; height:100px; background:blue; } .left{ position:absolute; left:0; top:100px; bottom:50px; width:200px; background:red; } .right{ position:absolute; left:200px; top:100px; bottom:50px; right:0; background:pink; overflow: auto; } .right .inner{ min-height: 1000px; } .bottom{ position:absolute; left:0; right:0; bottom:0; height:50px; background: black; }
(3)優缺點
2)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="top">top</div> <div class="middle"> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> </div> <div class="bottom">bottom</div> </div>
html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color: white; } .parent{ display: flex; flex-direction: column; } .top{ height:100px; background: blue; } .bottom{ height:50px; background: black; } .middle{ flex:1; display:flex; } .left{ width:200px; background: red; } .right{ flex: 1; overflow: auto; background:pink; } .right .inner{ min-height: 1000px; }
(3)優缺點
1)使用flex
(1)原理、用法
(2)代碼實例
<div class="parent"> <div class="top">top</div> <div class="middle"> <div class="left">left</div> <div class="right"> <div class="inner">right</div> </div> </div> <div class="bottom">bottom</div> </div>
html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color:white; } .parent{ display:flex; flex-direction:column; } .top{ background:blue; } .bottom{ background:black; } .middle{ flex:1; display:flex; } .left{ background: red; } .right{ flex:1; overflow:auto; background: pink; } .right .inner{ min-height:1000px; }
方案 | 兼容性 | 性能 | 是否自適應 |
---|---|---|---|
Position | 好 | 好 | 部分自適應 |
Flex | 較差 | 差 | 可自適應 |
Grid | 差 | 較好 | 可自適應 |
固然,最最最最最後,若是您喜歡這片文章,能夠瘋狂點贊和收藏喔!!