一、自适应布局
1、头尾固定高度中间高度自适应布局:
(1) 绝对定位:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>头尾固定高度中间高度自适应布局</title> 6 <style> 7 html,body{ 8 margin:0;padding:0;height:100%; 9 } 10 .head{ 11 width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;top:0;z-index:5;text-align:center; 12 } 13 .box{ 14 width:100%;background:orange;overflow:auto;position:absolute;top:45px;bottom:45px; 15 } 16 .foot{ 17 width:100%;height:45px;line-height:45px;background:#ccc;position:absolute;z-index:5;bottom:0;text-align:center; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="head">头部</div> 23 <div class="box"> 24 <div class="content">中间自适应部分<br> 25 <p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content1</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content2</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content3</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content4</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p><p>content5</p> 26 </div> 27 </div> 28 <div class="foot">尾部</div> 29 </body> 30 </html>
(2) 利用boxsizing改变盒子模型:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>头尾固定高度中间高度自适应布局</title> 6 <style type="text/css"> 7 *{ 8 margin:0;padding:0; 9 } 10 html{ 11 -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:45px 0;overflow:hidden; 12 } 13 html,body{ 14 height:100%; 15 } 16 .top{ 17 height:45px;background:#ccc;text-align:center;position:relative;top:-45px; 18 } 19 .side{ 20 width:200px;height:100%;background:#fc0;overflow:auto;float:left;top:-45px;position:relative; 21 } 22 .main{ 23 height:100%;background:#f30;overflow:auto;top:-45px;position:relative; 24 } 25 .bottom{ 26 height:45px;background:#ccc;text-align:center;clear:both;top:-45px;position:relative; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="top"> top </div> 32 <div class="side"> side <br /> 33 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 34 </div> 35 <div class="main"> main <br /> 36 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 37 </div> 38 <div class="bottom"> bottom </div> 39 </body> 40 </html>
(3) 设置主体部分的box-sizing:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>头尾固定高度中间高度自适应布局</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 html, body{ 11 height:100%;width:100%;overflow:hidden 12 } 13 .top{ 14 height:45px;width:100%;background:#ccc;position:absolute;top:0;left:0;z-index:10;text-align:center; 15 } 16 .footer{ 17 height:45px;width:100%;background:#ccc;position:absolute;bottom:0;left:0;z-index:10;text-align:center; 18 } 19 .main{ 20 background:#f60;width:100%;height:100%;overflow:auto;position:absolute;top:0;z-index:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-top:45px solid #fff;border-bottom:45px solid #fff; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="top">头部</div> 26 <div class="main"> 27 中间自适应部分<br> 28 <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> <p>content1</p> 29 <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> <p>content2</p> 30 <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> <p>content3</p> 31 <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> <p>content4</p> 32 <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> <p>content5</p> 33 <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> <p>content6</p> 34 </div> 35 <div class="footer">尾部</div> 36 </body> 37 </html>
2、左固定右自适应宽度:
方法1:右侧用margin-left,左侧float:left; 就可以实现:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左侧固定宽度右侧自适应</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 .left{ 11 width:200px;height:300px;float:left;background:#ccc; 12 } 13 .right{ 14 height:300px;margin-left:200px;background:orange; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="left">left</div> 20 <div class="right">right</div> 21 </body> 22 </html>
方法2:右侧同样用margin-left,左侧采用绝对定位:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左侧固定宽度右侧自适应</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 .box{ 11 position:relative; 12 } 13 .left{ 14 width:200px;height:300px;background:#ccc;position:absolute;left:0;top:0; 15 } 16 .right{ 17 height:300px;margin-left:200px;background:orange; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="box"> 23 <div class="left">left</div> 24 <div class="right">right</div> 25 </div> 26 </body> 27 </html>
方法3:左侧浮动且用负margin值:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左侧固定宽度右侧自适应</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 .wrapL{ 11 width:200px;background:#ccc;float:left;margin-right:-200px; 12 } 13 .wrapR{ 14 width:100%;float:right; 15 } 16 .left{ 17 height:300px; 18 } 19 .right{ 20 height:300px;margin-left:200px;background:orange; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"> 26 <div class="wrapL"> 27 <div class="left">left</div> 28 </div> 29 <div class="wrapR"> 30 <div class="right">right</div> 31 </div> 32 </div> 33 </body> 34 </html>
3、左固定右固定中间自适应宽度:
方法1:左右侧采用浮动,中间采用margin-left 和 margin-right方法:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左固定右固定中间自适应宽度</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 .left{ 11 width:200px;height:300px;float:left;background:#ccc; 12 } 13 .right{ 14 width:200px;height:300px;float:right;background:orange; 15 } 16 .main{ 17 height:300px;margin-left:200px;margin-right:200px;background:#ddd; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="left">left</div> 23 <div class="right">right</div> 24 <div class="main">main</div> 25 </body> 26 </html>
方法2:左右两侧采用绝对定位,中间同样采用margin-left 和 margin-right方法:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左固定右固定中间自适应宽度</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 .left{ 11 width:200px;height:300px;position:absolute;top:0;left:0;background:#ccc; 12 } 13 .right{ 14 width:200px;height:300px;position:absolute;top:0;right:0;background:orange; 15 } 16 .main{ 17 height:300px;margin-left:200px;margin-right:200px;background:#ddd; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="left">left</div> 23 <div class="main">main</div> 24 <div class="right">right</div> 25 </body> 26 </html>
二、垂直居中
1、单行文字垂直居中
利用 line-height 即可轻松实现,如下示例:
1 height:45px;line-height:45px;
2、多行文本固定高度垂直居中1
利用 display:table-cell; vertical-align:middle; 即可实现,不过对IE7及IE7以下不兼容,如下示例:
1 <div style="height:350px;background:#ddd;display:table;"> 2 <div style="display:table-cell;vertical-align:middle;"> 3 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。 4 </div> 5 </div>
3、多行文本固定高度垂直居中2
利用绝对定位来实现,兼容ie7+,如下示例:
1 <div style="height:350px;background:#ddd;position:relative;"> 2 <div style="height:80px;position:absolute;top:50%;margin-top:-40px;"> 3 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。 4 </div> 5 </div>
4、多行文本未知高度垂直居中
利用绝对定位来实现和 display:table-cell; vertical-align:middle; 兼容ie低版本写法来实现:
1 <style> 2 html,body{height:100%;} 3 #div1{height:100%;display:table;background:#ddd;*+position:relative;} 4 #div1 #div2{display:table-cell;vertical-align:middle;padding:10px;*+position:absolute;*+top:50%;} 5 #div1 #div2 #content{*+position:relative;*+top:-50%;} 6 </style> 7 8 <div id="div1"> 9 <div id="div2"> 10 <div id="content"> 11 披绣闼,俯雕甍,山原旷其盈视,川泽纡其骇瞩。闾阎扑地,钟鸣鼎食之家;舸舰迷津,青雀黄龙之舳。云销雨霁,彩彻区明。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨,雁阵惊寒,声断衡阳之浦。 12 </div> 13 </div> 14 </div>
5、内容块绝对居中(水平垂直居中)
方法1:利用绝对定位和 margin:auto; 来实现,兼容ie8+,如下示例:
1 .box{ 2 100px; 3 height:100px; 4 background:#ddd; 5 border-radius:5px; 6 overflow:auto; 7 position:absolute; 8 top:0;left:0;right:0;bottom:0; 9 margin:auto; 10 } 11 <div class="box">hello you!</div>
方法2:利用绝对定位和 负margin值 来实现,兼容ie7+,如下示例:
1 .box{ 2 100px; 3 height:100px; 4 background:#ddd; 5 border-radius:5px; 6 position:absolute; 7 top:50%;left:50%; 8 margin-top:-50px; 9 margin-left:-50px; 10 } 11 <div class="box">hello you!</div>
方法3:利用绝对定位和 css3的transform属性实现,兼容ie9+,如下示例:
1 .box{ 2 padding:10px; 3 background:#ddd; 4 border-radius:5px; 5 position:absolute; 6 top:50%;left:50%; 7 transform:translate(-50%,-50%); 8 } 9 <div class="box"> 10 内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~内容块的宽高不固定~ 11 </div>
方法4:利用弹性盒子(justify-content:center;和align-items:center;)实现,只测试了Chrome,如下示例:
1 .container{ 2 300px; 3 height:300px; 4 background:#f1f1f1; 5 display:flex; 6 justify-content:center; 7 align-items:center; 8 } 9 .box{ 10 50px; /*宽度任意*/ 11 height:50px; /*高度任意*/ 12 border:1px solid #333; 13 } 14 <div class="container"> 15 <div class="box"></div> 16 </div>
方法5:利用弹性盒子(margin:auto;)实现,只测试了Chrome,如下示例:
1 .container { 2 300px; 3 height:300px; 4 background:#f1f1f1; 5 display:flex; 6 } 7 .item { 8 50px; /*宽度任意*/ 9 height:50px; /*高度任意*/ 10 margin:auto; 11 border:1px solid #333; 12 } 13 <div class="container"> 14 <div class="item">item</div> 15 </div>