CSS之常见布局解决方案
程序员文章站
2022-04-30 11:25:15
...
分享一下我一年前端自学路上的学习笔记。若有侵权,请联系我,我立即删除或标明出处。
CSS布局是每个前端开发工程师的基本功。下面我列出一些常见布局及解决方案。代码不完整,我只写出重要代码。
水平居中布局
//简单的写一下HTML结构
<div class="parent">
<div class="child">水平居中布局</div>
</div>
-
margin+定宽
.child{width: 100px; margin: 0 auto;}
-
table+margin
.child{display: table; margin: 0 auto;}
-
inline-block+text-align
.parent{text-align: center;} .child{display: inline-block}
-
absolute+margin-left
.parent{position: relative;} .child{position: absolute; left: 50%; width: 100px; margin-left: -50px;}
-
absolute+transform
.parent{position: relative;} .child{position: absolute; left: 50%; transform: translateX(-50%);}
-
flex+justify-content
.parent{display: flex; justify-content: center;}
垂直居中布局
//简单的写一下HTML结构
<div class="parent">
<div class="child">垂直居中布局</div>
</div>
-
table-cell+vertical-align
.parent{display: table-cell; vertical-align: middle;}
-
absolute+transform
.parent{position: relative;} .child{position: absolute; top: 50%; transform: translateY(-50%);}
-
flex+align-items
.parent{display: flex; align-items: center;}
水平垂直居中
//简单的写一下HTML结构
<div class="parent">
<div class="child">水平居中布局</div>
</div>
-
absolute+transfrom
.parent{position: relative;} .child{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
-
inline-block+text-align+table-cell+vertical-align
.parent{text-align: center; display: table-cell; vertical-align: middle;} .child{display: inline-block;}
-
flex+justify-content+align-items
.parent{display: flex; justify-content: center; align-items: center;}
两栏布局,一列定宽,一列自适应
//简单的写一下HTML结构
<div class="parent">
<div class="left">一列定宽</div>
<div class="right">一列自适应</div>
</div>
-
float+margin
.left{float: left; width: 100px;} .right{margin-left: 100px;}
-
float+overflow
.left{float: left; width: 100px;} .right{overflow: hidden;}
-
table
.parent{distable: table; width: 100%; table-layout: fixed;} .left{display: table-cell; width: 100px;} .right{display: table-cell;}
-
flex
.parent{display: flex;} .left{width: 100px;} .right{flex: 1;}
三栏布局,左右宽度固定,中间只适应
//简单的写一下HTML结构
<div class="parent">
<div class="child">左右定宽</div>
<div class="center">中间自适应</div>
<div class="right">左右定宽</div>
</div>
-
float
.left{float: left; width: 100px;} .right{float: right; width: 100px;}
-
absolute
.parent{position: relative;} .left{position: absolute; left: 0; width: 100px;} .center{position: absolute; left: 300px; right: 300px;} .right{position: absolute; right: 0; width: 100px;}
-
table
.parent{diaplay: table; width: 100%} .left{display: table-cell; width: 100px;} .right{display: table-cell; width: 100px;}
-
flex
.parent{display: flex} .left{width: 100px;} .center{flex: 1;} .right{width: 100px;}
-
grid
.parent{display: grid; grid-template-columns: 300px auto 300px;}
上面就是一些常见布局及解决方案,但要注意兼容性从而选择最合适的方案解决。
上一篇: (转)[js]js计算两个时间相差天数
下一篇: 检索指定时间范围内的数据与预期不一致