CSS布局方法

左右/左中右布局

1. 浮动

给所有子元素添加float:left;,同时给父元素添加clearfix类,解决浮动出现的bug。
CSS:

image

image

HTML:

image

2. 行内块

使用display: inline-block;使块元素成为行内块，此时会出现bug：下方出现一个空隙，一定要用vertical-align: top;来解决。

3. 绝对定位

为父元素设置position:relative;，为子元素设置position:absolute; 。如图：

image

特定情况下使用浮动还是绝对定位:
1.使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，否则会换行展示，适用于导航栏等地方。
2.使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。
3.当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动。
4.当特定元素的位置是相对父元素固定，或者内容宽高确定，需要精确定位甚至以后要用js操作变换位置时，建议使用浮动。

4. Flex布局

给父级加上 display: flex;定义其为flex容器，使用flex-direction: row;使主轴水平；

HTML:

image

CSS:

image

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效;
• flex-direction属性决定主轴的方向（即项目的排列方向）,它可能有4个值;
• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。
• 更多flex语法:阮一峰博客--http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

---

水平居中

1.内联元素水平居中：

将内联元素外部的块级元素的text-align设置为center,即可实现内联元素(inline、inline-block)的水平居中。可设置内联元素的行高line-height控制内联元素所占高度。

image

2. 块级元素水平居中：

将固定宽度的块级元素的margin-left和margin-right设置成auto，即可实现元素的水平居中。

image

3. 多个块级元素水平居中：

如图中ol的布局问题，

image

block默认会扩展，使用display: inline-block;使其成为行内块，默认收缩。此时会出现bug：下方出现一个空隙，一定要用vertical-align: top;来解决，结果如图：

image

此时这是一个内联元素，在父级中加入text-align: center;可以实现子元素水平居中。
CSS:

image

4.绝对定位

通过position:absolute;实现CSS水平居中。

5.flex布局

justify-content属性定义了项目在主轴上的对齐方式；
使用justify-content:center;实现居中；

CSS:

image

image

• justify-content可能取5个值，具体对齐方式与轴的方向有关,下面假设主轴为从左到右。
• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

垂直居中

1.内联元素垂直居中

设置内联元素的行高(line-height)和内联元素的父元素的高度(height)相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。

2.块级元素垂直居中

• 固定高度的块级元素：
  通过绝对定位使元素距离顶部50%，并设置margin-top向上移元素高度的一半，实现垂直居中。
• 通过verticle-align:middle实现CSS垂直居中。(vertical生效的前提是元素的display：inline-block。)

3.flex布局

使用align-items:center;使子元素相对交叉轴的中点对齐（默认交叉轴从上到下）。

CSS:

image

image

• align-items属性定义项目在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。