单列布局

<div class="parent">
    <div class="child"></div>
</div>

水平居中

水平居中的布局方式是最常见的一种,常常用于头部、内容区、页脚,它主要的作用是控制盒子在整个页面以水平居中的方式呈现。
image.png

1.使用margin:0 auto来实现

.child{width:800px; margin: 0 auto;}

优势:兼容性好
劣势:需要指定盒子 宽度

2.使用table来实现

.child{display: table; margin: 0 auto;}

优势:不需要父容器parent,只需要对自身进行设置
劣势:IE6、7需要调整结构

3.使用inline-block和text-align来实现

.parent{text-align: center;}
.child{display: inline-block;}

优势:兼容性好
劣势:需要同时设置子元素和父元素

4.使用绝对定位absolute来实现

使用绝对定位来实现水平居中布局有两种情况,一种子容器无宽度,另一种子容器有宽度。无宽度可以用一下代码,如果是有宽度,则可以设置margin-left负值为容器宽度的一半。

.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}

优势:无需设置容器宽度,在移动端可以使用
劣势:兼容性差,需要IE9及以上浏览器的支持

5.使用flex布局来实现

flex有两种方法来实现水平居中,父容器设置display:flex, 一种直接在父容器中设置justify-content属性值center。第二种在子容器中使用margin: 0 auto

.parent{display: flex; justify-content: center;}
.parent{display: flex;}
.child{margin: 0 auto;}

优势:实现起来简单,尤其是使用在响应式布局中
劣势:兼容性差,如果大面积的使用该布局可能会影响效率

垂直居中

image.png
这边说的垂直居中是子容器无高的垂直居中,并非单行文本垂直居中line-height

1.使用绝对定位absolute来实现(同水平居中的使用方法,优劣一样)

.parent{position: relative;}
.child{position: absolute; top: 50%; transform: translateY(-50%);}

2.使用flex来实现

.parent{display: flex; align-items: center;}

3.使用display:table-cell来实现

.parent{display: table-cell;vertical-align: middle;height: 400px;}

多列布局

多列布局也是非常常见的,适用于一侧定宽,另一侧自适应的布局。
image.png

多列等分布局

多列等分布局常常出现在内容中,多数为同功能、同阶级内容的并排显示。
image.png
HTML代码

<div class="parent">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

1.使用flex来实现多列布局

.parent{display: flex;}
.column{flex: 1;}
.column+ .column{margin-left: 20px;}

2.使用table来实现多列布局

.parent{display: table; table-layout: fixed; width: 100%;}
.column{display: table-cell; padding-left: 20px;}

3.使用float来实现多列布局

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

九宫格布局

image.png

<div class="parent">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

1.使用flex来实现九宫格布局

.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}

2.使用table来实现九宫格布局

.parent{display: table; table-layout: fixed; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

全屏布局

image.png

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

使用绝对定位实现全屏布局

html,body,.parent{height: 100%; overflow: hidden;}
        .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}
        .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}
        .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}
        .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

响应式布局

meta标签的使用

<meta name="viewport" content="width=device-width, initial-scale=1"/>

使用媒体查询

@media screen and (max-width: 480px){
         /*屏幕小于480px的样式*/
}

Q.E.D.