CSS布局篇

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布局篇的分析和整理就到此为止啦，希望能帮助到更多的朋友。