CSS常用布局

一、CSS两栏布局

首先，假如HTML中有以下结构：

1.png

2.png

1.绝对定位

那么，想让他们呈现两栏布局，我们可以子元素设置绝对定位，而在他们父元素增加相对定位，示例代码如下：

3.png

2.浮动

• 让页面实现两栏布局，可以在需要两栏布局的元素的父元素上加一个clearfix的类，然后让所有子元素都float：left；就可以了，示例代码如下：

4.png

• 也可以触发第二个元素BFC，实现两栏布局，设置overflow:hidden;那么第二个元素可以不需要width，而自适应页面的宽度，示例代码如下：

5.png

二、CSS三栏布局（以下仅列出5种方法）

三栏布局，一般为两边固定，中间自适应的布局，效果图如下：

6.png

1.flex布局（2种）

• 简单实用，但不能兼容IE8及以下浏览器。
• 首先在父元素上设置flex，然后在子元素上设置属性

• 方法一：设置中间的盒子flex：1；即： flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，此时中间的盒子是可以随着页面的比例自适应的：

  
  
  

  7.png

• 方法二：设置两边盒子有宽度，可以缩小，中间的盒子可以在页面有剩余空间放大，并且由于mid元素在html结构中靠前，可以优先被加载出来，用order属性让他在页面中仍在第二个位置：

  
  
  

  6.1.png

2.float布局

• 方法一：在需要三栏布局的元素的父元素上加一个clearfix的类，然后让所有子元素都float：left；就可以了：

  
  
  

  float-1.png

• 方法二：在第一个、第二个元素上分别设置左右浮动，再在第三个元素，也就是需要出现在第二个位置上的元素设置margin-left和margin-right，来实现三栏布局：

  
  
  

  9.png

3.BFC布局

• 主要内容无法最先加载，当页面内容较多时会影响用户体验。

• 设置元素左右浮动，通过在元素上设置overflow：hidden，触发BFC特性，具有BFC特性的元素可以防止元素被浮动元素遮挡：

  
  
  

  10.png

4.绝对定位布局

• 方法一：先确定中间的元素位置，设置中间的元素的左右margin分别为两边元素的宽度，然后给父元素设置position:relative;左右两个元素设置position:absolute，分别定位在页面左右两边：

  
  
  

  11.png

• 方法二：直接设置每个元素的绝对定位：

  
  
  

  12.png

5.table的三栏布局

• 兼容性好，但不能设置栏间距，且一个单元格变大，两边单元格也都会变大；

• 设置三个元素为表格中的三个元素：

  
  
  

  13.png
  
  

  延伸：

• 除此之外还有grid布局，圣杯布局，双飞翼布局，就不一一枚举；
• 当元素高度未知时，BFC， flex和table布局会自适应，其他布局方式需要重新设置一些参数系数。

三、水平居中：

1.对于inline或者inline-block元素，可以直接设置父元素text-align：center;就可以了。

2.对于单个block元素，给定margin-left:auto;margin-right:auto;(这个block元素必须有width，浮动元素或且对定位无法使用这个方法)，子元素宽度不确定时，

a.可以设置margin-left和margin-right为定值。

b.在元素外加入table标签，所有的table标签都要写上，包括内，然后设置margin值为auto。

3.多个block元素，可以使用inline-block或者flex布局：

• 设置为inline-block：设置子元素display:inline-block;父元素text-align:center;
• 元素宽高未知：（
  
  a.transform方法，
  
  

  +1.png
  
  flex布局：父元素设置display:flex; justify-content:center;
  子元素要设置max-width。
  （以上方法适用于子元素为浮动、绝对定位、内联元素均可水平居中）

4.居中浮动元素：

• 运用相对定位和margin：

  
  
  

  +2.png

5.绝对定位元素：

• 依然是使用margin，方法和上面很相似（两种方法）：

  
  
  

  +3.png
  
  
  

  +4.png

四、垂直居中（七种方法）

• 前言：如果父元素的height不确定，那么只需要设置padding-top和padding-bottom为一样的值就可以了，但是如果确定了，就很难设置了，以下为常用的其中方法：
  

1.table自带功能

将文字放在table标签的td标签中就可以直接实现垂直居中了；

2.设置before和after类为100%的父元素高度;所有子元素设置inline-block;vertical-align: middle；也可以用伪类代替before和after类：

14.png

14.01.png

3.div伪装成table：

15.png

4.margin-top：-50%；

16.png

5.translate：-50%；（通用）

17.png

6.absolute margin auto6联合使用：

18.png

7.flex布局（通用）

flex.png

9.

小技巧：

• CSS代码可以搜索关键词+generator搜索，搜到了就可以直接复制标准代码使用；

参考自：https://zhuanlan.zhihu.com/p/33522591?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240

https://jscode.me/t/topic/1936

https://zhuanlan.zhihu.com/p/43860155?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240

https://zhuanlan.zhihu.com/p/25068655