CSS基础布局

简介

当我们刚刚学完CSS就去做静态页面的时候会出现难以下手的情况，因为看到了效果图，但是不知道这些元素要怎么摆放才显得合理。如果摆放不合理，那么后面的代码将难以维护，对于页面的扩展性也大大减少。这篇文章主要讲讲基本的CSS布局，让大家在做静态页面的时候提供一些思路和灵感

左右布局

最常见的就是左右布局了，如在一个导航栏里放左边一个logo，右边放一些导航元素。

.parent {
    margin: 300px auto;
    width: 400px;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.left, .right {
    height: 100px;
    width: 100px;
}

.left {
    float: left;
    background: blue;
}

.right {
    float: right;
    background: red;
}

1. 首先在父div里放两个div
2. 在父div里的两个子div分别设置浮动，左边向左浮右边向右浮
3. 最后在这个父div清除浮动即可，注意这步很重要，如果不做清除浮动的操作将会父元素高度为0，因为两个子div都脱离文档流了。

image.png

变形

当然，如果不想做清除浮动，可以在右子div向右浮就行了，而左边的子div有高度可以将父元素的高度撑开。但是因为左边的div是block，所以会占用一行，所以这里要将左右子div的顺序反转一下。

<div class="parent">
    <div class="right"></div>
    <div class="left"></div>
</div>

.parent {
    margin: 300px auto;
    width: 400px;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.left, .right {
    height: 100px;
    width: 100px;
}

.left {
    /* float: left; */
    background: blue;
}

.right {
    float: right;
    background: red;
}

左中右布局

左中右布局和左右局不同在于多了一个div，而这个div会影响一些bug。对于这个布局，我们很自然地想到左边向左浮，右边向右浮，所以现在代码是这样的。

<div class="parent">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.parent {
    margin: 300px auto;
    width: 400px;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.left, .right, .middle {
    height: 100px;
    width: 100px;
}

.left {
    float: left;
    background: blue;
}

.right {
    float: right;
    background: red;
}

.middle {
    background: yellow;
}

效果如下

image.png

布局全乱了，而且中间的黄色div也不见了。

解决方法

为什么黄色的div不见了呢？因为左边的div向左浮动了，脱离了文档流，它都不在文档流里了，就不会占parent的div的空间，你可以理解为提升起来了，所以黄色的div跟它重叠了。

现在就简单地将黄色的div水平居中吧，用 margin: 0 auto，现在的效果就变这样了。

image.png

还是不对，红色下去了。还记得刚刚的左右布局变形么，我们只要调换一下中间的div和右边的div就好了。

所以完整的代码如下

<div class="parent">
   <div class="left"></div>
   <div class="right"></div>
   <div class="middle"></div>
</div>

.parent {
    margin: 300px auto;
    width: 400px;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.left, .right, .middle {
    height: 100px;
    width: 100px;
}

.left {
    float: left;
    background: blue;
}

.right {
    float: right;
    background: red;
}

.middle {
    margin: 0 auto;
    background: yellow;
}

水平居中

居中是前端开发的一个很烦的问题，我刚开始学的时候，总想着如果有一个属性 xxx: center | left | right 多好呀，什么都不用想。然后找了好久真的没有，居中还要分很多种情况来说，唉。这里就做一个简单的总结吧，网上的居中方法很多，但是常用的就几个。

内联元素居中

如果一个p元素，你想让里面的东西居中，很简单 text-align: center 就好了

<p>Hello world</p>

p {
    text-align: center;
}

注意：这里的居中是指让p元素里面的东西居中。

块级元素居中

<div class="inner">Hello</div>

.inner {
    margin: 0 auto;
    width: 50%;
    background: red;
}

注意：这里的居中是指让叫inner的div在父容器里居中。

万能大法

现在CSS3有一种布局叫flex布局，用这个布局基本上就是无脑地居中啦，很舒服。

1. 先在父元素上display为flex
2. 在父元素上设置justify-content为center，搞定！

<div class="outer">
    <div class="inner">Hello</div>
</div>

.outer {
    display: flex;
    justify-content: center;
}
.inner {
    width: 50%;
    background: red;
}

垂直居中

垂直居中还是挺麻烦的，因为一般来说我们尽可能不去定死一个元素的高度，所以导致设置子元素的height: 50%是不行的，因为父元素不设置高度，就会去问子元素高度，而子元素又说我的高度依赖于你，搞得大家都不清楚自己高度该是怎么样的。这里就简单介绍三种垂直居中的方法吧。

line-height

如果都于简单的垂直居中，比如就垂直居中一行字，可以用行高加字体大小来完成。将行高设置成字体大小即可。

相当于说我房子高度是100，我自己身高也100，那我自己的中点就是整个房子的中点了嘛。

p {
    font-size: 20px;
    line-height: 20px;
}

定位大法

这里的定位大法也可以用于水平居中，一般在父元素设置相对定位，子元素设置绝对定位，然后再去调top,bottom, left, right 四个值就好了。

不过要注意的是，50%是指基线的50%，而不是中点的50%，所以一般来说还要用 transform: translate(-50%, -50%) 去完成，相当于说你超了，我把你再拉回来一点。

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    width: 100%;
    height: 300px;
    position: relative;
    background: black;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
    background: red;
}

万能大法

这个flex真的好用，水平居中可以，垂直居中也可以，语法还简单，没错，就是这么舒服。

1. 首先在父元素加flex
2. 然后设置 align-items: center，搞定！

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 300px;
    background: black;
}

.inner {
    height: 100px;
    width: 100px;
    background: red;
}

其他一些 Tips

画一个三角形

1. 设置一个粗border
2. 宽高都为0
3. 再设置四个位置的border为不同颜色即可

div {
    border: 10px solid red;
    width: 0;
    height: 0;
    border-top-color: red;
    border-right-color: blue;
    border-left-color: yellow;
    border-bottom-color: black;
}

脱离文档流

1. 脱离文档流的元素会往内缩起来。
2. 如果设置了宽度为100%，那么如果还有padding，那么会比原来父元素的宽度还要大，一般要用 box-sizing: border-box 来解决这个问题。

清除浮动

将.clearfix加到浮动元素的parent元素上

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}