水平居中布局
margin+定宽
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.child {
width:100px;
margin:0auto;
}
</style>
-
想必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽
table+margin
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.child {
display: table;
margin:0auto;
}
</style>
-
display:table在表现上类似block元素，但是宽度为内容宽。 -
无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为
<table>
inline-block+text-align
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.child {
display:inline-block;
}
.parent {
text-align: center;
}
</style>
兼容性佳（甚至可以兼容IE6和IE7）
absolute+margin-left
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
width:100px;
margin-left:-50px; /* width/2 */
}
</style>
-
宽度固定
-
相比与使用
transform兼容性更好
absolute+transform
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
transform: translateX(-50%);
}
</style>
-
绝对定位脱离文档流，不会对后续元素的布局造成影响
-
transform为CSS3属性，有兼容性问题
flex+justify-content
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
-
只需设置父节点属性，无需设置子元素
-
flex有兼容性问题
垂直居中
table-cell+vertical-align
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
-
兼容性好(IE 8以下版本需要调整页面结构至 table)
absolute+transform
强大的absolute对于这种小问题当然是很简单的
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top:50%;
transform: translateY(-50%);
}
</style>
-
绝对定位脱离文档流，不会对后续元素的布局造成影响，但如果绝对定位元素是唯一的元素，则父元素也会失去高度。
-
transform为CSS3属性，有兼容性问题
同水平居中，这也可以使用margin-top实现，原理水平居中
flex+align-items
如果说 absolute强大，那 flex只是笑笑，因为他才是最强的，但有兼容性问题
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
水平垂直居中
absolute+transform
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
-
绝对定位脱离文档流，不会对后续元素的布局造成影响
-
transform为CSS3属性，有兼容性问题
inline-block+text-align+table-cell+vertical-align
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display:inline-block;
}
</style>
-
兼容性好
flex+justify-content+align-items
<divclass="parent">
<divclass="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;/* 水平居中 */
align-items: center;/*垂直居中*/
}
</style>
-
只需设置父节点属性，无需设置子元素
-
还是存在兼容性问题
一列定宽，一列自适应
这种布局最常见的就是中后台类型的项目，如下图：
float+margin
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width:100px;
}
.right {
margin-left:100px
/*间距可再加入 margin-left */
}
</style>
IE6中会有3px的BUG,解决方法可以在 .left加入 margin-left:-3px当然下面的方案也可以解决这个bug:
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right-fix">
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width:100px;
}
.right-fix {
float: right;
width:100%;
margin-left:-100px;
}
.right {
margin-left:100px
/*间距可再加入 margin-left */
}
</style>
float+overflow
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width:100px;
}
.right {
overflow: hidden;
}
</style>
设置overflow:hidden会出发BFC模式（block formatting context）块级格式上下文。BFC是什么呢？用通俗的江就是，随便你在BFC里面干什么，外面都不会手段哦影响。此方法样式简单但不支持 IE 6
table
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width:100%;
table-layout:fixed;
}
.left {
display: table-cell;
width:100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>
table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout:fixed 可加速渲染，也是设定布局优先。 table-cell 中不可以设置 margin但是可以通过 padding 来设置间距
flex
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width:100px;
margin-left:20px;
}
.right {
flex:1;
}
</style>
-
低版本浏览器兼容性问题
-
性能问题，只是适合小范围布局
以上就是常见的几种布局。
网友评论