摘要：到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用从很久很久以前起，我们就抛弃了布局页面，但是异常强大等属性目前兼容性较差傲娇的程序员应该放弃太低版本的浏览器转自常见布局解决方案
水平居中布局 1.margin + 定宽
Demo
相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的
2. table + marginDemo
display: table 在表现上类似 block 元素，但是宽度为内容宽。
无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 兼容性佳（甚至可以兼容 IE 6 和 IE 7） 宽度固定 相比于使用transform ，有兼容性更好 绝对定位脱离文档流，不会对后续元素的布局造成影响。 transform 为 CSS3 属性，有兼容性问题 只需设置父节点属性，无需设置子元素 flex有兼容性问题 兼容性好(IE 8以下版本需要调整页面结构至 table 强大的absolute对于这种小问题当然也是很简单的 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。 transform 为 CSS3 属性，有兼容性问题 如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题 绝对定位脱离文档流，不会对后续元素的布局造成影响。 transform 为 CSS3 属性，有兼容性问题 兼容性好 只需设置父节点属性，无需设置子元素 蛋疼的兼容性问题 1.float + margin left right right IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下： left right right 此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。 left right right 设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6 left right right table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距 left right right 低版本浏览器兼容问题 性能问题，只适合小范围布局 1 2 3 4 此方法可以完美兼容 IE8 以上版本 1 2 3 4 强大简单，有兼容问题 1 2 3 4 table 的特性为每列等宽，每行等高可以用于解决此需求 left right right left right right 注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch left right right 此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。 到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/50840.html 摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警
一劳永逸的搞定 flex 布局
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不... 摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。
问题：
已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1... 摘要：到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用从很久很久以前起，我们就抛弃了布局页面，但是异常强大等属性目前兼容性较差傲娇的程序员应该放弃太低版本的浏览器转自常见布局解决方案
水平居中布局
1.margin + 定宽
Demo
.child {
width: 100px;
margin: 0 auto;
}
... 阅读 1505·2021-09-22 15:35 阅读 1985·2021-09-14 18:04 阅读 858·2019-08-30 15:55 阅读 2434·2019-08-30 15:53 阅读 2653·2019-08-30 12:45 阅读 1170·2019-08-29 17:01 阅读 2556·2019-08-29 15:30 阅读 3490·2019-08-29 15:09
3.inline-block + text-align
Demo
Demo
Demo
Demo
Demo
Demo
同水平居中，这也可以用margin-top实现，原理水平居中
水平垂直居中
1. absolute + transform
Demo
Demo
Demo
Demo
傲娇的程序员应该放弃太低版本的浏览器
我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应 这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的
等高布局
1.table
2.flex
转自：CSS常见布局解决方案
相关文章
前端-CSS3&H5
常见的面试问题：【CSS】已知高度，写出三栏布局
CSS常见布局解决方案
发表评论
0条评论
starsfun
男|高级讲师
TA的文章
阅读更多
基于主机名的虚拟主机服务怎么实现-虚拟主机怎么登陆图解？
LAMP Web一键安装脚本 – Linux服务器安装Apache/MySQL/PHP网站环境
字蛛font-spider报错,<web font not found>,碰到的最新问题
布局总结-水平居中布局的实现
两列自适应布局方案整理
JavaScript的数据类型及其检测
前端面试题1（HTML篇）
伪类和伪元素的区别
最新活动
阅读需要支付1元查看
