常用CSS布局方案

时间：2023-03-30 14:15:17 CSS

水平居中布局1.margin+固定宽度Demo

以前肯定见过，这个定宽水平居中，我们也可以用下面的实现变宽2.table+marginDemo

display:table在性能上类似于块元素，但是width是内容的宽度。无需设置父元素样式（支持IE8及以上）兼容IE8及以下版本需要调整为3.inline-block+text-align演示良好的兼容性（甚至兼容IE6和IE7）4.absolute+margin-leftDemostyle>.parent{位置：相对；}.child{位置：绝对；左：50%；宽度：100px；左边距：-50px；/*width/2*/}与使用transform相比，fixedwidth具有更好的兼容性5.absolute+transformDemo绝对定位脱离文档流，不会影响后续元素的布局。transform是CSS3属性，存在兼容性问题。6.flex+justify-content演示只需设置父节点属性，无需设置子元素flex垂直居中的兼容性问题1.table-cell+vertical-alignDemo兼容性好（IE8以下版本需要调整页面结构为table2.absolute+transform强大的absolute对于这种小问题当然很简单Demo绝对定位脱离了文档流，不会影响后续元素的布局。但是如果绝对定位元素是唯一元素，那么父元素的高度也会丢失。transform是CSS3的属性，存在兼容性问题和是水平居中，这个用margin-top也可以实现，原理是水平居中3.flex+align-items如果absolute厉害，那flex就笑了，因为他是最强的。。。但是它有兼容性问题Demo水平和垂直居中1.absolute+transformDemo绝对定位脱离文档流，不会影响后续元素的布局。transform是CSS3属性，存在兼容性问题2.inline-block+text-align+table-cell+vertical-alignDemo兼容性好3.flex+justify-content+align-itemsDemo只需要设置父节点属性，无需设置子元素痛苦的兼容性问题一列定宽，一列自适应1.float+margin

left

right

这种方法没有IE63-pixel的bug，但是.left不能选中，需要设置.left{position:relative}增加层级请注意，此方法添加了不必要的HTML文本结构。傲娇程序员应该放弃版本太低的浏览器2.float+overflow

left

右

设置overflow:hidden会触发BFC模式（BlockFormattingContext）块级格式化上下文。什么是BFC。通俗地说，在BFC里面做什么，在外面都不会受到影响。此方法样式简单但不支持IE63.table

left

右

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

left

right

低版本浏览器的兼容性问题性能问题，只适合小规模布局学习了一栏定宽和一栏自适应布局的布局后，我们也可以轻松实现多栏定宽，一列自适应多列变宽加一列自适应这里就不一一解释了，自己试试吧，也可以巩固前面学过的等分布局1.float

功能强大简单，存在兼容性问题3.table

等高布局1.tabletable的特点是每列等宽，每行等高可以用来解决这个需求。

left

right

2.flex

left

right

请注意这里实际上使用了align-items:stretch,flex的默认align-items值为stretch3。浮动

left

right

这种方法是伪等高（只是背景显示高度相等），左右真实高度不等，兼容性更好。至此，我们了解了常见的布局解决方案。这些只是参考。有很多方法可以实现相同的布局。主要用到position,flex,table（很久以前我们就放弃table布局页面了，但是display:table;非常强大），float等属性。目前flex兼容性差，狂妄的程序员应该放弃太多低版本浏览器转自：CSS常见布局解决方案

上一篇：图片适配

下一篇：html和css开发规范

常用CSS布局方案相关文章