一、居中布局
水平居中
前提要求：父容器和子容器的宽度不定
方案一：inline-block+text-align
优点：兼容性好，在IE67上，用display:inline;zoom:1;模拟inline-block。
缺点：在父容器里设置了text-align：center；所以child也会继承这个属性，child容器里面的文字也会水平居中，因此要在child里重新设置text-align。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{ text-align: center;/*只对行内元素有效*/ } .child{ display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child">用inline-block和text-align实现水平居中DEMO</div> </div> </body> </html>
demo.css如下：
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .parent{background:#ddd;} .child{background:#666;color:#fff;}
方案二：table+margin
设置了display：table的元素的宽度也是由内容决定。
优点：只需要对child进行设置；兼容性较好，display：table能兼容IE8及以上。
.child{ display:table; margin:0 auto; }
方案三：absolute+transform
优点：absolute的元素脱离文档流，不会对其他元素产生影响。
缺点：IE8不支持transform
.parent{ position:relative; } .child{ position:absolute; left:50%; //相对于父容器的50% transform:translateX(-50%); //相对于自身的50% }
方案四：flex+justify-content
缺点：对于display：flex；IE89不支持、IE10部分支持
.parent{ display:flex; //给父元素设置flex属性，那么子元素就是flex-item，子元素的宽度是 auto，即宽度由内容决定 justify-content:center; }
或者
.parent{ display:flex; } .child{ margin:0 auto; }
垂直居中
前提要求：父容器的高度和子容器的高度不定
方案一：table-cell+vertical-align
优点:IE8及以上支持table-cell
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>垂直居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ display: table-cell; vertical-align: middle; /*vertical-align 只对行内元素有效*/ } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
方案二：absolute+transform
优点：子元素设置了绝对定位，不会影响其他元素
缺点：IE8不支持transform
.parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY:-50%; }
方案三：flex+align-items
优点：只需要对父元素设置样式
缺点：兼容性问题。对于display：flex；IE89不支持、IE10部分支持。对于align-items，IE89不支持，IE10部分支持。
.parent{ display:flex; align-items:center; }
水平垂直居中
前提要求：父容器的宽高不定，子容器的宽高不定
方案一：inline-block+text-align+table-cell+vertical-align
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>居中</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 .parent{width:200px;height:300px;} 10 11 .parent{ 12 text-align: center; 13 display: table-cell; /* 此元素会变成一个行内元素,作为一个表格单元格显示（类似 <td> 和 <th>） */ 14 vertical-align: middle; /* 只对行内元素起作用 */ 15 16 .child{ 17 display: inline-block; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="parent"> 23 <div class="child">DEMO</div> 24 </div> 25 </body> 26 </html>
方案二：absolute+transform
.parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
方案三：flex+justify-content+align-items
.parent{ display: flex; justify-content: center; align-items: center; }
做解决方案时，需要了解CSS属性和值的特性，对问题进行分解。
二、多列布局
一列定宽+一列自适应
方案一：float+margin
缺点：IE6里会产生3px bug；当right容器里有清除浮动的时，会产生bug。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left{ 14 float: left; 15 width: 100px; 16 } 17 .right{ 18 margin-left: 120px; 19 } 20 /*模拟bug*/ 21 /*.right p:first-child{ 22 clear:both; 23 background-color: red; 24 }*/ 25 </style> 26 </head> 27 <body> 28 <div class="parent"> 29 <div class="left"> 30 <p>left</p> 31 </div> 32 <div class="right"> 33 <p>right</p> 34 <p>right</p> 35 </div> 36 </div> 37 </body> 38 </html>
方案二：float+margin+(fix)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left{ 14 float: left; 15 width: 100px; 16 position: relative; //提高层级 17 } 18 .right-fix{ 19 float: right; width: 100%; 20 margin-left: -100px; 21 } 22 .right{ 23 margin-left: 120px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="parent"> 29 <div class="left"><p>left</p></div> 30 <!-- 多了一层容器 --> 31 <div class="right-fix"> 32 <div class="right"> 33 <p>right</p><p>right</p> 34 </div> 35 </div> 36 </div> 37 </body> 38 </html>
方案三：float+overflow
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left{ 14 float: left; 15 width: 100px; 16 margin-right: 20px; 17 } 18 .right{ 19 20 overflow: hidden; /* 该设置很重要 ，触发BFC模式 */ 21 } 22 </style> 23 </head> 24 <body> 25 <div class="parent"> 26 <div class="left"> 27 <p>left</p> 28 </div> 29 <div class="right"> 30 <p>right</p> 31 <p>right</p> 32 </div> 33 </div> 34 </body> 35 </html>
方案四：table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>多列布局</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{ display: table; /* table导致容器宽度由内容决定，故需要在下面设置width：100% */ width: 100%; /*table-layout的好处：加速table的渲染；实现了布局优先 fixed 列宽由表格宽度和列宽度设定。*/ table-layout: fixed; } .left,.right{ display: table-cell; /* 以表格单元格的形式呈现，类似td */ } .left{ /*表格的特点就是每一列的宽度之和会等于table的宽度，因此right容器会填充剩余宽度*/ width: 100px; padding-right: 20px; /* 表格中不能用margin设置距离，必须用padding */ } </style> </head> <body> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> </body> </html>
方案五：flex
缺点：1.兼容性问题 2.性能问题，不适合做大范围布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 display: flex; 12 } 13 .left{ 14 width: 100px; 15 margin-right: 20px; 16 } 17 .right{ 18 flex: 1; /* 子元素可伸缩值,使得其占据剩余的所有空间，而不是宽度由内容决定 */ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="parent"> 24 <div class="left"> 25 <p>left</p> 26 </div> 27 <div class="right"> 28 <p>right</p> 29 <p>right</p> 30 </div> 31 </div> 32 </body> 33 </html>
两列定宽+一列自适应
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left,.center{ 14 float: left; 15 width: 100px; 16 margin-right: 20px; 17 } 18 .right{ 19 overflow: hidden; /*很重要、触发BFC模式*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div class="parent"> 25 <div class="left"> 26 <p>left</p> 27 </div> 28 <div class="center"> 29 <p>center</p> 30 </div> 31 <div class="right"> 32 <p>right</p> 33 <p>right</p> 34 </div> 35 </div> 36 </body> 37 </html>
一列不定宽+一列自适应
方案一：float+overflow
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left{ 14 float: left; 15 margin-right: 20px; 16 } 17 .right{ 18 overflow: hidden; 19 } 20 .left p{width: 200px;} 21 </style> 22 </head> 23 <body> 24 <div class="parent"> 25 <div class="left"> 26 <p>left</p> 27 </div> 28 <div class="right"> 29 <p>right</p> 30 <p>right</p> 31 </div> 32 </div> 33 </body> 34 </html>
方案二：table
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 display: table; 12 width: 100%; 13 } 14 .left,.right{ 15 display: table-cell; 16 17 } 18 .left{ 19 width: 0.1%; /*为了让right自适应剩余的宽度，这里不能用1px，因为在IE8里会有bug */ 20 padding-right: 20px; 21 } 22 .left p{ 23 width:200px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="parent"> 29 <div class="left"> 30 <p>left</p> 31 </div> 32 <div class="right"> 33 <p>right</p> 34 <p>right</p> 35 </div> 36 </div> 37 </body> 38 </html>
方案三：flex
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 display: flex; 12 } 13 .left{ 14 margin-right: 20px; 15 } 16 .right{ 17 flex: 1; /* 分配剩余宽度 */ 18 } 19 .left p{width: 200px;} 20 </style> 21 </head> 22 <body> 23 <div class="parent"> 24 <div class="left"> 25 <p>left</p> 26 </div> 27 <div class="right"> 28 <p>right</p> 29 <p>right</p> 30 </div> 31 </div> 32 </body> 33 </html>
两列不定宽+一列自适应
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 12 } 13 .left,.center{ 14 float: left; 15 margin-right: 20px; 16 } 17 .right{ 18 overflow: hidden; 19 } 20 .left p,.center p{ 21 width: 100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="parent"> 27 <div class="left"> 28 <p>left</p> 29 </div> 30 <div class="center"> 31 <p>center</p> 32 </div> 33 <div class="right"> 34 <p>right</p> 35 <p>right</p> 36 </div> 37 </div> 38 </body> 39 </html>
等分布局
方案一：float+box-sizing:border-box
缺点：当列数发生变化时，需要修改结构和样式，即结构和样式具有耦合性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 margin-left: -20px; /*父元素的宽度增加了20px*/ 12 } 13 .column{ 14 float: left; 15 width: 25%; /* 由于设置成了border-box，故这个25%包含padding的宽度*/ 16 padding-left: 20px;/* 只能用padding设置距离 */ 17 box-sizing: border-box; /*box-sizing: content-box|border-box|inherit; 18 content-box 宽度和高度分别应用到元素的内容框。 19 在宽度和高度之外绘制元素的内边距和边框。 20 border-box 为元素设定的宽度和高度决定了元素的边框盒。 21 通过从已设定的宽度和高度分别减去边框和内边 22 距才能得到内容的宽度和高度。 23 */ 24 } 25 </style> 26 </head> 27 <body> 28 <div class="parent"> 29 <div> 30 <div class="column"><p>1</p></div> 31 <div class="column"><p>2</p></div> 32 <div class="column"><p>3</p></div> 33 <div class="column"><p>3</p></div> 34 </div> 35 </div> 36 </body> 37 </html>
方案二：table
优点：结构和样式解耦
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent-fix{ 11 margin-left: -20px; /*为了解决table的宽度增加20px的问题*/ 12 } 13 .parent{ 14 display: table; 15 width:100%; 16 table-layout: fixed; /* 17 假设单元格没有设置宽度，单元格将平分表格宽度 18 fixed 具有布局优先，加速渲染的效果 19 */ 20 } 21 .column{ 22 display: table-cell; 23 padding-left: 20px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="parent-fix"> 29 <div class="parent"> 30 <div class="column"><p>1</p></div> 31 <div class="column"><p>2</p></div> 32 <div class="column"><p>3</p></div> 33 <div class="column"><p>4</p></div> 34 </div> 35 </div> 36 </body> 37 </html>
方案三：flex
此方案与方案一进行比较。flex分配的是除去margin-left后的父容器剩余空间。
优点：结构和样式解耦。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 10 .parent{ 11 display: flex; 12 } 13 .column{ 14 flex: 1; /*如果不设置flex，那么每一列的宽度就由内容决定。 15 设置flex之后，每一列的宽度就是平分了父元素的剩余空间*/ 16 } 17 .column+.column{ 18 margin-left:50px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="parent"> 24 <div class="column"><p>1</p></div> 25 <div class="column"><p>2</p></div> 26 <div class="column"><p>3</p></div> 27 <div class="column"><p>4</p></div> 28 </div> 29 </body> 30 </html>
等高布局
方案一：table
table的特性就是每一列的单元格等宽，每一行的单元格等高。
方案二：flex
flex-items 默认的align-items：stretch，天生的等高。
方案三：float
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>多列布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 p{background: none!important;} 10 .left,.right{background: #444;} 11 .parent{ 12 overflow: hidden; 13 } 14 .left,.right{ 15 /*较难理解的伪等高*/ 16 padding-bottom: 9999px; 17 margin-bottom: -9999px; 18 } 19 .left{ 20 float: left; 21 width: 100px; 22 margin-right: 20px; 23 } 24 .right{ 25 overflow: hidden; 26 } 27 28 </style> 29 </head> 30 <body> 31 <div class="parent"> 32 <div class="left"> 33 <p>left</p> 34 </div> 35 <div class="right"> 36 <p>right</p> 37 <p>right</p> 38 </div> 39 </div> 40 </body> 41 </html>
三、全屏布局
需求1：
方案一：position
缺点：IE6不支持
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>全屏布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 /*overflow:hidden;禁用滚动条*/ 9 html,body,.parent{margin:0;height:100%;overflow:hidden;} 10 body{color:white;} 11 .top{ 12 /*left:0;right:0;能使宽度变成100%*/ 13 position:absolute;top:0;left:0;right:0;height:100px; 14 background:blue; 15 } 16 .left{ 17 position:absolute;left:0;top:100px;bottom:50px;width:200px; 18 background:red; 19 } 20 .right{ 21 position:absolute;left:200px;top:100px;bottom:50px;right:0; 22 background:pink;overflow: auto; 23 } 24 .right .inner{min-height: 1000px;} 25 .bottom{ 26 position:absolute;left:0;right:0;bottom:0;height:50px; 27 background: black; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="parent"> 33 <div class="top">top</div> 34 <div class="left">left</div> 35 <div class="right"><div class="inner">right</div></div> 36 <div class="bottom">bottom</div> 37 </div> 38 </body> 39 </html>
demo.css
1 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 2 header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 3 table{border-collapse:collapse;border-spacing:0;} 4 caption,th{text-align:left;font-weight:normal;} 5 html,body,fieldset,img,iframe,abbr{border:0;} 6 i,cite,em,var,address,dfn{font-style:normal;} 7 [hidefocus],summary{outline:0;} 8 li{list-style:none;} 9 h1,h2,h3,h4,h5,h6,small{font-size:100%;} 10 sup,sub{font-size:83%;} 11 pre,code,kbd,samp{font-family:inherit;} 12 q:before,q:after{content:none;} 13 textarea{overflow:auto;resize:none;} 14 label,summary{cursor:default;} 15 a,button{cursor:pointer;} 16 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} 17 del,ins,u,s,a,a:hover{text-decoration:none;} 18 body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} 19 body{background:#fff;} 20 a,a:hover{color:#333;} 21 .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
方案二：flex
缺点：IE8、9不支持，IE10部分支持
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>全屏布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 html,body,.parent{margin:0;height:100%;overflow:hidden;} 9 body{color: white;} 10 .parent{display: flex;flex-direction: column;} 11 .top{height:100px;background: blue;} 12 .bottom{height:50px;background: black;} 13 /*flex-direction的默认值是row*/ 14 .middle{flex:1;display:flex;} 15 .left{width:200px;background: red;} 16 .right{flex: 1;overflow: auto;background:pink;} 17 .right .inner{min-height: 1000px;} 18 </style> 19 </head> 20 <body> 21 <div class="parent"> 22 <div class="top">top</div> 23 <div class="middle"> 24 <div class="left">left</div> 25 <div class="right"> 26 <div class="inner">right</div> 27 </div> 28 </div> 29 <div class="bottom">bottom</div> 30 </div> 31 </body> 32 </html>
需求2：
把以上两个方案中的单位变成百分比即可。
需求3：
方案一：Flex
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>全屏布局</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 html,body,.parent{margin:0;height:100%;overflow:hidden;} 9 body{color:white;} 10 .parent{display:flex;flex-direction:column;} 11 .top{background:blue;} 12 .bottom{background:black;} 13 .middle{flex:1;display:flex;} 14 .left{background: red;} 15 .right{flex:1;overflow:auto;background: pink;} 16 .right .inner{min-height:1000px;} 17 </style> 18 </head> 19 <body> 20 <div class="parent"> 21 <div class="top">top</div> 22 <div class="middle"> 23 <div class="left">left</div> 24 <div class="right"> 25 <div class="inner">right</div> 26 </div> 27 </div> 28 <div class="bottom">bottom</div> 29 </div> 30 </body> 31 </html>
方案二：Grid
目前大部分的浏览器不能支持，方案略。
以上方案的比较：
