居中布局
水平居中
![4c7c878f69768533652c21651c76f07d.png](https://i-blog.csdnimg.cn/blog_migrate/03e0514bf7c78ded9d79dfe514b8bbd1.jpeg)
子元素于父元素水平居中,子元素与父元素宽度均可变。
inline-block + text-align
![af9c13af2b1bca83b7f5935005ad4212.png](https://i-blog.csdnimg.cn/blog_migrate/95c0f585e94e79be4b7c0040cf7ed155.jpeg)
优点
- 兼容性佳(甚至可以兼容 IE 6 和 IE 7)
table + margin
![065c7285b7aae34bf3453ec57f773815.png](https://i-blog.csdnimg.cn/blog_migrate/2599209201aa6759806d9c6fe7e5061a.jpeg)
![0589968be78110315d7451a2584f14bb.png](https://i-blog.csdnimg.cn/blog_migrate/089ca7d1e61678c6558d81593b10097b.jpeg)
display: table 在表现上类似 block 元素,但是宽度为内容宽。
优点
- 无需设置父元素样式 (支持 IE 8 及其以上版本)
absolute + transform
![d1acd7b2bb9cd1fa51439bc87954c21e.png](https://i-blog.csdnimg.cn/blog_migrate/29c04157876e4d574bfebd921c1725a1.jpeg)
![794c1ee9ba57b98d9a452c72ddd08399.png](https://i-blog.csdnimg.cn/blog_migrate/31084b85c01eb8585a1828a685adbb16.jpeg)
优点
- 绝对定位脱离文档流,不会对后续元素的布局造成影响。
缺点
- transform 为 CSS3 属性,有兼容性问题
flex + justify-content
![6ce02c0895e3425d1062382f62868ce2.png](https://i-blog.csdnimg.cn/blog_migrate/fa7965572303325c42f3045fe0964973.jpeg)
![e29958bd53f30cdf69f8f909e4950f3b.png](https://i-blog.csdnimg.cn/blog_migrate/d3cafda409545bd0d1e16b253b3cb34b.jpeg)
优点
- 只需设置父节点属性,无需设置子元素
缺点
- 有兼容性问题
垂直居中
子元素于父元素垂直居中且其(子元素与父元素)高度均可变。
table-cell + vertical-align
![af2f703a5a597ad661971d56d5dfae94.png](https://i-blog.csdnimg.cn/blog_migrate/2979f57694fb077cfd149a0a9297a2b3.jpeg)
![fe5f2a088b65eb2b6ee3136a15539d69.png](https://i-blog.csdnimg.cn/blog_migrate/82c605a817ce296f5fe6991365ec70ae.jpeg)
优点
- 兼容性好(支持 IE 8)
absolute + transform
![04a2b7074f09edc60c813b1197292404.png](https://i-blog.csdnimg.cn/blog_migrate/071acb173d436f648284396c7d663d9d.jpeg)
![0502ca5a4cff7a4eec12822842070087.png](https://i-blog.csdnimg.cn/blog_migrate/2c89fbb9b542047a17770ff188b66b97.jpeg)
优点
- 绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度(文中添加了300px,方便查看)。
缺点
- transform 为 CSS3 属性,有兼容性问题
flex + align-items
![e4295b82fceb2c01963a68d10ac5885f.png](https://i-blog.csdnimg.cn/blog_migrate/4799d7bb7d84786c576eefca6f1f9499.jpeg)
![8f642a8083570808e2b1433e7274b6cc.png](https://i-blog.csdnimg.cn/blog_migrate/3d0e0c41bc00ede78ebce407316992cd.jpeg)
优点
- 只需设置父节点属性,无需设置子元素
缺点
- 有兼容性问题
水平与垂直 都居中
![e1a8d930ecd0ca5fb3c46fc03d18ec59.png](https://i-blog.csdnimg.cn/blog_migrate/b77d5d115c13d27abb850add371a7e31.jpeg)
子元素于父元素垂直及水平居中且其(子元素与父元素)高度宽度均可变。
inline-block + text-align + table-cell + vertical-align
![c673e9dcec66cd52f8f3092b45128a97.png](https://i-blog.csdnimg.cn/blog_migrate/d2e312fa24fdd0befcbd4fc6682f3bf2.jpeg)
优点
- 兼容性好
absolute + transform
![b82e5fb88012b9009456a26d601620dd.png](https://i-blog.csdnimg.cn/blog_migrate/3681a5b1eeb32ac018df5e9dff433221.jpeg)
优点
- 绝对定位脱离文档流,不会对后续元素的布局造成影响。
缺点
- transform 为 CSS3 属性,有兼容性问题
flex + justify-content + align-items
![10641f7998b4b12dcb292782c7810c9a.png](https://i-blog.csdnimg.cn/blog_migrate/68c421267b39e404cfda8b98176d6dcf.jpeg)
优点
- 只需设置父节点属性,无需设置子元素
缺点
- 有兼容性问题
多列布局
多列布局在网页中非常常见(例如两列布局),多列布局可以是两列定宽,一列自适应, 或者多列不定宽一列自适应还有等分布局等。
一列定宽,一列自适应
![58d45b87dbefb4c8827025a66fefabfd.png](https://i-blog.csdnimg.cn/blog_migrate/66f5faad3b171c7883e1deb552e53810.jpeg)
float + margin
![b88c3746520c1b83c8a4f6fc9baf1262.png](https://i-blog.csdnimg.cn/blog_migrate/d864b7b1fe1f99434bbb4dff4fab4a07.jpeg)
IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px。
float + margin + (fix) 改造版
![aff6951796222e188462ca563b913688.png](https://i-blog.csdnimg.cn/blog_migrate/e4b0fc2dc2fe4e7f6023ed96e05dcef1.jpeg)
此方法不会存在 IE 6 中3像素的 BUG,但 .left 不可选择, 需要设置 .left {position: relative} 来提高层级。 此方法可以适用于多版本浏览器(包括 IE6)。缺点是多余的 HTML 文本结构。
float + overflow
![513eb5785114dd957988b5aed256dde6.png](https://i-blog.csdnimg.cn/blog_migrate/f98614e1e674003006dc07d8ee175d1a.jpeg)
设置 overflow: hidden 会触发 BFC 模式(Block Formatting Context)块级格式化文本。 BFC 中的内容与外界的元素是隔离的。
优点
- 样式简单
缺点
- 不支持 IE 6
table
![5e3c61305d5cd570b3e0ce6e4e6c3788.png](https://i-blog.csdnimg.cn/blog_migrate/9c5142a83e926ccc218fdf4296c9c340.jpeg)
table 的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染,也是设定布局优先。
table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。
flex
![8e931112b1d62f4ef6eba947b5275653.png](https://i-blog.csdnimg.cn/blog_migrate/7685f075575e0f32637f255cf36b8909.jpeg)
flex-item 默认为内容宽度。
缺点
- 低版本浏览器兼容问题
- 性能问题,只适合小范围布局。
两列定宽,一列自适应
![d318b3486db072bc75b439b0ff6687bf.png](https://i-blog.csdnimg.cn/blog_migrate/ae079e2cf1e97353a653c58d3924a089.jpeg)
![5dc1a50312478c54a6c99b71396c5231.png](https://i-blog.csdnimg.cn/blog_migrate/e01b8de048482a23983f81285d46ddce.jpeg)
多列定宽的实现可以更具单列定宽的例子进行修改与实现。
一列不定宽加一列自适应
![65d51b24ca476540a2faa1c21edbc351.png](https://i-blog.csdnimg.cn/blog_migrate/bef1ab4493b83bc42879c14a673f7b57.jpeg)
不定宽的宽度为内容决定,下面为可以实现此效果的方法:
- float + overflow,此方法在 IE6 中有兼容性问题
- table,此方法在 IE6 中有兼容性问题
- flex,此方法在 IE9及其以下版本中有兼容性问题
多列不定宽加一列自适应
![d318b3486db072bc75b439b0ff6687bf.png](https://i-blog.csdnimg.cn/blog_migrate/ae079e2cf1e97353a653c58d3924a089.jpeg)
其解决方案同一列不定宽加一列自适应相仿。
多列等分布局
![d14d4013cbbf7322d1ec4fc9387afbcb.png](https://i-blog.csdnimg.cn/blog_migrate/21bef51f8b3f94b76aa99910e90ce293.jpeg)
每一列的宽度和间距均相等,下面为多列等分布局的布局特定。
![9700a2edf571c0a7a3d84408e869dbc7.png](https://i-blog.csdnimg.cn/blog_migrate/134f12230ac0862916b88f9aaf715916.jpeg)
父容器宽度为 C,C = W * N + G * N - G => C + G = (W + G) * N。
![0ba4f3a133fa1ae945ced86ae1deaa0d.png](https://i-blog.csdnimg.cn/blog_migrate/78be7aabe24e42d9d60f25bd0c897e7b.jpeg)
float
![1da3b11bf8193a2c7250096452457832.png](https://i-blog.csdnimg.cn/blog_migrate/c3f177bf7cb4f03780ccac0a5fc7ab9a.jpeg)
![dbf3c75257b8b471b26a891454c5eb23.png](https://i-blog.csdnimg.cn/blog_migrate/5b291f9556689d0777e0fcee70d2240c.jpeg)
此方法可以完美兼容 IE8 以上版本。 NOTE+:此方法结构和样式具有耦合性。
table
![955bf7aaa637e194ccff63409244542c.png](https://i-blog.csdnimg.cn/blog_migrate/78830c1e0ffbe47248562e8a030056d8.jpeg)
缺点是多了文本结果
flex
![2613b76f6bdc3bdcc4827cd65adbb2df.png](https://i-blog.csdnimg.cn/blog_migrate/ba04139590807aaaa13f4bc3ec6a571c.jpeg)
flex 的特性为分配剩余空间。 NOTE+:兼容性有问题。
![220592274190a72e9c700de7a7695cb5.png](https://i-blog.csdnimg.cn/blog_migrate/147f435774402cbe8c21410c33955d9b.jpeg)
table
table 的特性为每列等宽,每行等高可以用于解决此需求。
![d16c9f6d6336c7a7395b2dde781b7d54.png](https://i-blog.csdnimg.cn/blog_migrate/6e502fbe981f3d2f1dc8695c091d1ae8.jpeg)
flex
![e81deb3656390ab8f62996ba59ff9e49.png](https://i-blog.csdnimg.cn/blog_migrate/3d037abb2a4d53c251efd3c0f1c08d8f.jpeg)
flex 默认的 align-items 的值为 stretch。
float
![d492ca6f02eeec0c790f7f6d7708019b.png](https://i-blog.csdnimg.cn/blog_migrate/b11ac1ff4076008cbc4e62934f99da75.jpeg)
此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 此方法兼容性较好。
欢迎关注