CSS之常见布局解决方案

最新推荐文章于 2022-03-21 02:41:16 发布

山间有风

最新推荐文章于 2022-03-21 02:41:16 发布

阅读量374

点赞数

分类专栏： CSS 文章标签： CSS布局

本文链接：https://blog.csdn.net/zuoypx/article/details/82157090

版权

2 篇文章 0 订阅

订阅专栏

分享一下我一年前端自学路上的学习笔记。若有侵权，请联系我，我立即删除或标明出处。

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;}

上面就是一些常见布局及解决方案，但要注意兼容性从而选择最合适的方案解决。