CSS布局篇
在前端CSS的学习过程中，布局是很重要的一部分，因此，我也通过搜集和整理资料来写了这篇博文，来简述一下有关于布局的各种方式，对自己有关于CSS布局的知识做一下梳理，也希望能给其他需要学习到布局知识的朋友一些帮助。
实现左右布局
假设布局左侧部分宽度固定，右侧部分宽度随浏览器宽度的变化而自适应变化
利用flex方法实现左右布局
<div class="container"> ???<div class="initial">左侧部分宽度固定</div> ???<div class="flex1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div></div>.container { ???/* background-color: red; */ ???display: flex; ???height: 100px;}.initial { ???width: 300px; ???background-color: red;}.flex1 { ???background-color: palevioletred; ???flex:1;}利用float方法实现左右布局
<div class="container2 clearfix"> ???????<div class="initial2">左侧部分宽度固定</div> ???????<div class="float1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div></div>.container2 { ???height: 100px;}.clearfix::after { ???content: ‘‘; ???display: block; ???clear: both;}.initial2 { ???height: inherit; ???width: 300px; ???float: left; ???background-color: rosybrown;}.float1 { ???height: inherit; ???margin-left: 300px; ???background-color: gray;}实现左中右布局
假设布局两部分宽度固定，其中一部分宽度随浏览器宽度的变化而自适应变化
利用flex方法实现左中右布局
<div class="container3"> ???<div class="three_1">第一列</div> ???<div class="three_2">第二列</div> ???<div class="three_3">第三列</div></div>.container3 { ???display: flex; ???height: 100px;}.three_1 { ???width: 200px; ???height: inherit; ???background-color: indigo;}.three_2 ?{ ???flex: 1; ???height: inherit; ???background-color:darkcyan;}.three_3 { ???width: 200px; ???height: inherit; ???background-color: darkorchid;}利用float方法实现左中右布局
<div class="container4" ???<div class="three_1_1">第一列</div> ???<div class="three_3_3">第三列</div> ???<div class="three_2_2">第二列</div></div>.container4 { ???height: 100px;}.three_1_1 { ???width: 200px; ???float: left; ???height: inherit; ???background-color: forestgreen;}.three_2_2 { ???margin-left: 200px; ???margin-right: 200px; ???height: inherit; ???background-color: tomato;}.three_3_3 { ???width: 200px; ???float: right; ???height: inherit; ???background-color: salmon;}实现水平居中
内联元素水平居中
<div class="center-children"> ???This is center</div>.center-children { ?text-align: center;}块级元素水平居中
块级元素水平居中又分为两种情况
- 块级元素宽高已确定
以下是利用margin来设置水平居中
<div class="center"> ???I‘m a block level element and am centered.</div>.center { ?margin: 0 auto; ?width: 200px; ?background: black; ?padding: 20px;}以下是利用position来设置水平居中
<div class="father"> ???<div class="center"> ???????I‘m a block level element and am centered. ???</div></div>.father { ???position: relative;}.center { ???position: absolute; ???background-color: red; ???width: 960px; ???left: 50%; ???transform: translate(-50%,0); ???text-align: center;}- 块级元素宽高未确定
<div class="father"> ???<div class="center"> ???????I‘m a block level element and am centered.<br> ???????I‘m a block level element and am centered. ???</div></div>.father { ???text-align: center;}.center { ???display: inline-block}实现垂直居中
内联元素垂直居中
- 单行内联元素居中
使用flex布局实现内联元素垂直居中（不考虑兼容老式浏览器的话）
<div class="center"> ???I‘m a block level element and am centered.<br> ???I‘m a block level element and am centered.</div>.center { ???display: flex; ???align-items: center;}使用line-height实现内联元素垂直居中
<div class="center"> ???I‘m a block level element and am centered.</div>.center { ???height: 32px; ???line-height: 32px;}- 多行内联元素垂直居中
使用flex布局实现多行内联元素垂直居中（不考虑兼容老式浏览器的话）
<div class="center"> ???<p> ???????I‘m a block level element and am centered. ???????I‘m a block level element and am centered. ???</p></div>.center { ???display: flex; ????justify-content: center; ???flex-direction: column;}块级元素垂直居中
- 块级元素高度已确定
<main> ???<div> ????I‘m a block-level element with a fixed height, centered vertically within my parent. ?</div> ?</main>main { ?background: white; ?height: 300px; ?width: 300px; ?position: relative; ?resize: vertical; ?overflow: auto;}main div { ?position: absolute; ?top: 50%; ?height: 100px; ?margin-top: -50px; ?background: black; ?color: white;}- 块级元素高度未确定
<main> ???<div> ????I‘m a block-level element with an unknown height, centered vertically within my parent. ?</div> ?</main>main { ?position: relative;}main div { ?position: absolute; ?top: 50%; ?transform: translateY(-50%);}- 使用flexbox
<main> ???<div> ????I‘m a block-level element with an unknown height, centered vertically within my parent. ?</div> ?</main>main { ?display: flex; ?flex-direction: column; ?justify-content: center;}关于Grid
此外，现在CSS的布局已经发展到了Grid,他更简便快捷高效.
在考虑兼容性的情况下，我们应该熟悉以前的布局方法，但是以发展的眼光看，我们可着眼于更强大的布局方式Grid，了解现在的CSS发展趋势。
在网络上现在也存在了不少关于Grid的文章，我们也可以学习一下，比如掘金的这篇文章。
关于CSS布局篇的分析和整理就到此为止啦，希望能帮助到更多的朋友。
CSS布局篇
原文地址：https://www.cnblogs.com/No-harm/p/9426762.html