前端进阶系列（二）：css常见布局解决方案

时间：2023-04-02 12:45:09 HTML

水平居中布局边距+固定宽度Demo

应该是看过了吧。此固定宽度水平居中。我们也可以使用下面的实现变宽table+marginDemo

display:table在性能上类似于块元素，但宽度为内容宽度。无需设置父元素样式（支持IE8及以上）兼容IE8及以下版本需要调整为inline-block+text-alignDemo良好的兼容性（甚至兼容IE6和IE7）absolute+margin-leftDemo固定宽度比使用transformabsolute+transformDemo绝对定位出来的文档流不会影响后续元素的布局。transform是CSS3属性，存在兼容性问题。flex+justify-content演示只需要设置父节点的属性，不需要设置子元素flex有兼容性问题verticalcenteringtable-cell+vertical-align演示兼容性好（IE8以下版本需要调整页面结构为table）absolute+transform强大的absolute对于这个小问题当然很简单Demo绝对定位脱离文档流，不会影响后续元素布局，但如果绝对定位元素是唯一元素，父元素也会失去高度transform是CSS3属性，存在兼容性问题。使用margin-top也可以实现相同的水平居中。水平居中的原理是flex+align-items。如果说absolute很强大，那么flex只是笑笑，因为它是最强的，但是兼容性问题Demo水平垂直居中absolute+transformDemo绝对定位脱离了文档流，不会影响后续元素的布局transform是一个具有兼容性的CSS3属性问题inline-block+text-align+table-cell+vertical-align演示兼容性好flex+justify-content+align-items演示只需要设置父节点属性，不需要设置子元素，否则存在兼容性问题。一列宽度固定，一列自适应。这种布局最常见的就是居中背景类型的项目，如下图：float+margin

left

right

float+overflow

left

right

settingoverflow:hidden会启动BFC模式(blockformattingcontext)blockformattingcontextBFC是什么？用普通的姜来说，在BFC里做什么，都不会受到外面手段的影响。此方法样式简单但不支持IE6table

left

右

表格的显示特性是每列的单元格宽度和表格的宽度。table-layout:fixed可以加快渲染速度，也可以设置布局优先级。table-cell中不能设置margin，但是可以通过padding设置间距flex

left

右

低版本浏览器的兼容性问题性能问题，只适合小范围布局以上是常见的布局。参考文章：CSSLayout:40Tutorials,Tips,ExamplesandBestPracticesCSS常见布局及解决方案CSSDisplay属性详解史上最全的Html和CSS布局技巧

上一篇：好程序员教你HTML5开发基础

下一篇：流程图在线生成，有哪些简单的流程图软件

前端进阶系列（二）：css常见布局解决方案相关文章