水平居中布局
首先我们来看看水平居中
1.margin + 定宽
Demo.child{width:100px;margin:0auto; }
相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的
2. table + margin
Demo.child{display: table;margin:0auto; }
display: table在表现上类似block元素，但是宽度为内容宽。
无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为
3.inline-block + text-align
Demo.child{display: inline-block; }.parent{text-align: center; }
兼容性佳（甚至可以兼容 IE 6 和 IE 7）
4. absolute + margin-left
Demo.parent{position: relative; }.child{position: absolute;left:50%;width:100px;margin-left: -50px;/* width/2 */}
宽度固定
相比于使用transform，有兼容性更好
5. absolute + transform
Demo.parent{position: relative; }.child{position: absolute;left:50%;transform:translateX(-50%); }
绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform为 CSS3 属性，有兼容性问题
6. flex + justify-content
Demo.parent{display: flex;justify-content: center; }
只需设置父节点属性，无需设置子元素
flex有兼容性问题
垂直居中
1.table-cell + vertical-align
Demo.parent{display: table-cell;vertical-align: middle; }
兼容性好(IE 8以下版本需要调整页面结构至table)
2.absolute + transform
强大的absolute对于这种小问题当然也是很简单的
Demo.parent{position: relative; }.child{position: absolute;top:50%;transform:translateY(-50%); }
绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中
3.flex + align-items
如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题
Demo.parent{display: flex;align-items: center; }
水平垂直居中
1. absolute + transform
Demo.parent{position: relative; }.child{position: absolute;left:50%;top:50%;transform:translate(-50%, -50%); }
绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform为 CSS3 属性，有兼容性问题
2. inline-block + text-align + table-cell + vertical-align
Demo.parent{text-align: center;display: table-cell;vertical-align: middle; }.child{display: inline-block; }
兼容性好
3. flex + justify-content + align-items
Demo.parent{display: flex;justify-content: center;/* 水平居中 */align-items: center;/*垂直居中*/}
只需设置父节点属性，无需设置子元素
蛋疼的兼容性问题
##一列定宽，一列自适应
1.float + margin
left
right
right
.left{float: left;width:100px; }.right{margin-left:100px/*间距可再加入 margin-left */}
IE 6 中会有3像素的 BUG，解决方法可以在.left加入margin-left:-3px当然也有解决这个小bug的方案如下：
left
right
right
.left{float: left;width:100px; }.right-fix{float: right;width:100%;margin-left: -100px; }.right{margin-left:100px/*间距可再加入 margin-left */}
此方法不会存在 IE 6 中3像素的 BUG，但.left不可选择， 需要设置.left {position: relative}来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
2.float + overflow
left
right
right
.left{float: left;width:100px; }.right{overflow: hidden; }
设置overflow: hidden会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6
3 .table
left
right
right
.parent{display: table;width:100%;table-layout: fixed; }.left{display: table-cell;width:100px; }.right{display: table-cell;/*宽度为剩余宽度*/}
table的显示特性为每列的单元格宽度和一定等与表格宽度。table-layout: fixed可加速渲染，也是设定布局优先。table-cell中不可以设置margin但是可以通过padding来设置间距
4. flex
left
right
right
.parent{display: flex; }.left{width:100px;margin-left:20px; }.right{flex:1; }
低版本浏览器兼容问题
性能问题，只适合小范围布局
我们在学会一列定宽，一列自适应的布局后也可以方便的实现多列定宽，一列自适应多列不定宽加一列自适应这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的
等分布局
1. float
1
2
3
4
.parent{margin-left: -20px; }.column{float: left;width:25%;padding-left:20px;box-sizing: border-box; }
此方法可以完美兼容 IE8 以上版本
2. flex
1
2
3
4
.parent{display: flex; }.column{flex:1; }.column+.column{/* 相邻兄弟选择器 */margin-left:20px; }
强大简单，有兼容问题
3. table
1
2
3
4
.parent-fix{margin-left: -20px; }.parent{display: table;width:100%;/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/table-layout: fixed; }.column{display: table-cell;padding-left:20px; }
等高布局
1.table
table的特性为每列等宽，每行等高可以用于解决此需求
left
right
right
.parent{display: table;width:100%;table-layout: fixed; }.left{display: table-cell;width:100px; }.right{display: table-cell/*宽度为剩余宽度*/}
2.flex
left
right
right
.parent{display: flex; }.left{width:100px;margin-left:20px; }.right{flex:1; }
注意这里实际上使用了align-items: stretch，flex 默认的align-items的值为stretch
3. float
left
right
right
.parent{overflow: hidden; }.left,.right{padding-bottom:9999px;margin-bottom: -9999px; }.left{float: left;width:100px;margin-right:20px; }.right{overflow: hidden; }
此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。兼容性较好。
到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差傲娇的程序员应该放弃太低版本的浏览器
网友评论