了解 CSS 中属性的值及其特性, 透彻分析问题和需求才可以选择和设计最适合的布局解决方案。
居中布局
水平居中
子元素于父元素水平居中且其(子元素与父元素)宽度均可变。
inline-block + text-align
优点
兼容性佳(甚至可以兼容 IE 6 和 IE 7)
table + margin
NOTE:display: table在表现上类似block元素,但是宽度为内容宽。
优点
无需设置父元素样式 (支持 IE 8 及其以上版本)
NOTE:兼容 IE 8 一下版本需要调整为<table>的结果
absolute + transform
优点
绝对定位脱离文档流,不会对后续元素的布局造成影响。
缺点
transform为 CSS3 属性,有兼容性问题
flex + justify-content
优点
只需设置父节点属性,无需设置子元素
缺点
有兼容性问题
垂直居中
子元素于父元素垂直居中且其(子元素与父元素)高度均可变。
table-cell + vertical-align
优点
兼容性好(支持 IE 8,以下版本需要调整页面结构至table)
absolute + transform
优点
绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
缺点
transform为 CSS3 属性,有兼容性问题
flex + align-items
优点
只需设置父节点属性,无需设置子元素
缺点
有兼容性问题
水平与垂直居中
子元素于父元素垂直及水平居中且其(子元素与父元素)高度宽度均可变。
inline-block + text-align + table-cell + vertical-align
优点
兼容性好
absolute + transform
优点
绝对定位脱离文档流,不会对后续元素的布局造成影响。
缺点
transform为 CSS3 属性,有兼容性问题
flex + justify-content + align-items
优点
只需设置父节点属性,无需设置子元素
缺点
有兼容性问题
多列布局
多列布局在网页中非常常见(例如两列布局),多列布局可以是两列定宽,一列自适应, 或者多列不定宽一列自适应还有等分布局等。
一列定宽,一列自适应
float + margin
NOTE:IE 6 中会有3像素的 BUG,解决方法可以在.left加入margin-left:-3px。
float + margin + (fix) 改造版
NOTE:此方法不会存在 IE 6 中3像素的 BUG,但.left不可选择, 需要设置.left {position: relative}来提高层级。 此方法可以适用于多版本浏览器(包括 IE6)。缺点是多余的 HTML 文本结构。
float + overflow
设置overflow: hidden会触发 BFC 模式(Block Formatting Context)块级格式化文本。 BFC 中的内容与外界的元素是隔离的。
优点
样式简单
缺点
不支持 IE 6
table
table的显示特性为每列的单元格宽度合一定等与表格宽度。table-layout: fixed;可加速渲染,也是设定布局优先。
NOTE:table-cell中不可以设置margin但是可以通过padding来设置间距。
flex
NOTE:flex-item默认为内容宽度。
缺点
低版本浏览器兼容问题
性能问题,只适合小范围布局。
两列定宽,一列自适应
多列定宽的实现可以更具单列定宽的例子进行修改与实现。
一列不定宽加一列自适应
不定宽的宽度为内容决定,下面为可以实现此效果的方法:
float+overflow,此方法在 IE6 中有兼容性问题
table,此方法在 IE6 中有兼容性问题
flex,此方法在 IE9及其以下版本中有兼容性问题
多列不定宽加一列自适应
其解决方案同一列不定宽加一列自适应相仿。
多列等分布局
每一列的宽度和间距均相等,下面为多列等分布局的布局特定。
父容器宽度为 C,C = W * N + G * N - G=>C + G = (W + G) * N。
float
NOTE:此方法可以完美兼容 IE8 以上版本。 NOTE+:此方法结构和样式具有耦合性。
table
NOTE:缺点是多了文本结果
flex
NOTE:flex的特性为分配剩余空间。 NOTE+:兼容性有问题。
#
table
table的特性为每列等宽,每行等高可以用于解决此需求。
flex
NOTE:flex 默认的align-items的值为stretch。
float
NOTE:此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 NOTE+:此方法兼容性较好。
全屏布局
例如管理系统,监控与统计平台均广泛的使用全屏布局。
定宽需求
实现方案
Position 常规方案
Flex CSS3 新实现
Position
Position 兼容
此方法不支持 IE6 可以使用下面的方法解决兼容问题。
Flex
<div class="parent">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="right">
<div class="inner"></div>
</div>
</div>
<div class="bottom"></div></div><style media="screen">
html,
body,
parent {
height: 100%;
overflow: hidden;
}
.parent {
display: flex;
flex-direction: column;
}
.top {
height: 100px;
}
.bottom {
height: 50px;
}
.middle {
// 居中自适应
flex: 1;
display: flex;
/*flex-direction: row 为默认值*/
}
.left {
width: 200px;
}
.right {
flex: 1;
overflow: auto;
}
.right .inner {
min-height: 1000px;
}</style>
Flex 兼容性
CSS3 中的新概念所有 IE9 及其也行版本都不兼容。
百分比宽度需求
只需把定宽高(px为单位的值)的实现改成百分比(%)既可。
内容自适应
只有右侧栏占据剩余位置,其余空间均需根据内容改变。 所以 Postion 的定位方法不适合实现此方案。下面列出了两种布局方案:
Flex
Grid,W3C 草案并不稳定,浏览器支持也并不理想
Flex
只有不为宽高做出限制,既可对其中的内容做出自适应的布局。
<div class="parent">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="right">
<div class="inner"></div>
</div>
</div>
<div class="bottom"></div></div><style media="screen">
html,
body,
parent {
height: 100%;
overflow: hidden;
}
.parent {
display: flex;
flex-direction: column;
}
.middle {
// 居中自适应
flex: 1;
display: flex;
/*flex-direction: row 为默认值*/
}
.right {
flex: 1;
overflow: auto;
}
.right .inner {
min-height: 1000px;
}</style>
方案比较
最后
“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,53763,
1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”