前端进阶系列(二):css常见布局解决方案
水平居中布局
margin+定宽
<div class="parent"> <div class="child">Demo</div> </div> <style> .child { width: 100px; margin: 0 auto; } </style>
- 想必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽
table+margin
<div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: table; margin: 0 auto; } </style>
display:table
在表现上类似block
元素,但是宽度为内容宽。- 无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为
<table>
inline-block+text-align
<div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: inline-block; } .parent { text-align: center; } </style>
兼容性佳(甚至可以兼容IE6和IE7)
absolute+margin-left
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { position: relative; } .child { position: absolute; left: 50%; width: 100px; margin-left: -50px; /* width/2 */ } </style>
- 宽度固定
- 相比与使用
transform
兼容性更好
absolute+transform
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } </style>
- 绝对定位脱离文档流,不会对后续元素的布局造成影响
transform
为CSS3属性,有兼容性问题
flex+justify-content
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; justify-content: center; } </style>
- 只需设置父节点属性,无需设置子元素
flex
有兼容性问题
垂直居中
table-cell+vertical-align
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: table-cell; vertical-align: middle; } </style>
- 兼容性好(IE 8以下版本需要调整页面结构至 table)
absolute+transform
强大的absolute对于这种小问题当然是很简单的
<div class="parent"> <div class="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
只是笑笑,因为他才是最强的,但有兼容性问题
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; align-items: center; } </style>
水平垂直居中
absolute+transform
<div class="parent"> <div class="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
<div class="parent"> <div class="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
<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /*垂直居中*/ } </style>
- 只需设置父节点属性,无需设置子元素
- 还是存在兼容性问题
一列定宽,一列自适应
这种布局最常见的就是中后台类型的项目,如下图:
float+margin
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="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:
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="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
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="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
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="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
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; } </style>
- 低版本浏览器兼容性问题
- 性能问题,只是适合小范围布局
以上就是常见的几种布局。
参考文章:
- CSS 布局:40个教程、技巧、例子和最佳实践
- CSS常见布局及解决方案
- CSS display属性详解
- 史上最全Html和CSS布局技巧
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18