css布局有哪些？css布局可以让页面看起来比较美观整洁，接下来的这篇文章给大家总结了css中常见的几种布局方式，让我们具体的看一看。
水平居中布局
1、margin + 定宽
.child { width: 50px; margin: 0 auto; }Demo
运行结果：
立即学习“前端免费学习笔记（深入）”；
相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的
2、table + margin
.child { display: table; margin: 0 auto; }Demo
运行结果：
display: table 在表现上类似 block 元素，但是宽度为内容宽。
无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为
3、inline-block + text-align
.child { display: inline-block; } .parent { text-align: center; }Demo
兼容性佳（甚至可以兼容 IE 6 和 IE 7）
4、 absolute + margin-left
.parent { position: relative; } .child { position: absolute; left: 50%; width: 100px; margin-left: -50px; /* width/2 */ }Demo
宽度固定
相比于使用transform ，有兼容性更好
5、absolute + transform
.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }Demo
绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题
6、flex + justify-content
.parent { display: flex; justify-content: center; }Demo
只需设置父节点属性，无需设置子元素
flex有兼容性问题
垂直居中：
1、table-cell + vertical-align
.parent { display: table-cell; vertical-align: middle; }Demo
兼容性好(IE 8以下版本需要调整页面结构至 table
2、absolute + transform
强大的absolute对于这种小问题当然也是很简单的
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }Demo
绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中
3、flex + align-items
如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题
.parent { display: flex; align-items: center; }Demo
水平垂直居中：
1、absolute + transform
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }Demo
绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题
2、inline-block + text-align + table-cell + vertical-align
.parent { text-align: center; display: table-cell; vertical-align: middle; } .child { display: inline-block; }Demo
兼容性好
3、flex + justify-content + align-items
.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /*垂直居中*/ }Demo
只需设置父节点属性，无需设置子元素
蛋疼的兼容性问题
一列定宽，一列自适应
1、float + margin
.left { float: left; width: 100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ }left
right
HMCSS通用企业网站系统1.0查看详情HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
right
IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：
.left { float: left; width: 100px; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ }left
right
right
此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
傲娇的程序员应该放弃太低版本的浏览器
2、float + overflow
.left { float: left; width: 100px; } .right { overflow: hidden; }left
right
right
设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6
3、table
.parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell; /*宽度为剩余宽度*/ }left
right
right
table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距
4、flex
.parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; }left
right
right
低版本浏览器兼容问题
性能问题，只适合小范围布局
我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应 这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的
等分布局：
1、float
.parent { margin-left: -20px; } .column { float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }1
2
3
4
此方法可以完美兼容 IE8 以上版本
2、flex
.parent { display: flex; } .column { flex: 1; } .column+.column { /* 相邻兄弟选择器 */ margin-left: 20px; }1
2
3
4
强大简单，有兼容问题
3、table
.parent-fix { margin-left: -20px; } .parent { display: table; width: 100%; /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/ table-layout: fixed; } .column { display: table-cell; padding-left: 20px; }1
2
3
4
等高布局
1、table
table 的特性为每列等宽，每行等高可以用于解决此需求
.parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell /*宽度为剩余宽度*/ }left
right
right
2、flex
.parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; }left
right
right
注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
3、float
.parent { overflow: hidden; } .left, .right { padding-bottom: 9999px; margin-bottom: -9999px; } .left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; }left
right
right
此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差。
相关文章推荐：
常见css水平自适应布局_html/css_WEB-ITnose
DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose
CSS常用布局实现方法_html/css_WEB-ITnose
以上就是CSS布局有哪些？css常见的布局方式（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611010.html
微信扫一扫 
支付宝扫一扫 
