css布局

1、常用居中方法：水平居中，垂直居中

2、单列布局

3、二列或者三列布局

一、水平居中

1、当子元素是行内元素的时候采用：text-align:center;

2、定宽块状元素：margin左右设置auto;

3、不定宽块状元素：设置子元素为display:inline,然后在父元素上设置text-align:center;

4、通用flex布局：

首先说明一下flex布局：lex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个

父容器：设置子容器沿主轴排列：justify-content

flex-start：起始端对齐 flex-end：末尾段对齐center：居中对齐

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半

space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

2、设置子容器沿交叉线排列align-items:如何沿着交叉线的方向分配子容器的距离

flex-start：起始端对齐 flex-end：末尾段对齐center：居中对齐

baseline

stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

垂直居中：

子元素是单行内联文本：设置父元素的高度等于line-height:

子元素是多行内联文本：设置父元素display:table-cell或者inline-block;在设置 vertical-align:middle

子元素是块状元素：设置position:fixed或者absolute。在设置magin：aut；

通用布局： flex布局，给父元素设置{display:flex; align-items:center;}。

单列布局的两种方式：

1、header,content,footer宽度都相同，一般不会占满整个浏览器的宽度，但是当浏览器的宽度低于最大宽度的时候，宽度会自适应

2、一种是header，footer宽度为浏览器的宽度，但content不会占满整个浏览器的宽度

<div class="layout>

<div id=""header">头部</div>

<div id=""header">内容</div>

<div id=""header">尾部</div>

</div>

样式：

.class{

max-width:960px;

margin:0 auto;

}

第二种：

<div id="header">

<div class="layout"></div>

</div>

<div id="content" class="layout"></div>

<div id="footer">

<div class="layout"></div>

</div>

样式：

.layout{

max-width:960px;

margin:auto;

}

#header,#footer{

width:100%

}

b. position+margin

d. 双飞翼布局(float + 负margin + margin)

下列最简单方法