CSS常用布局

1.左右布局以及左中右布局

例如有以下html结构，设置左右两栏布局

1.1通过float实现

设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。CSS代码如下：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}

同时记得在父元素上加上clearfix。

简单来说就是在子元素上添加float:left,在父元素上添加clearfix,就能实现横向布局。

1.2通过position来实现

设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。CSS代码如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:100px;
  top:0;
}

具体间隔可以通过left和top来调节。
以上两种方法可用于左右布局同时左中右布局也适用。

2.水平居中

1. 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中。

2. 若是块级元素, 该元素设置 margin:0 auto即可。

3.垂直居中

1.单行文本

若元素是单行文本, 则可设置 line-height 等于父元素高度

2.元素高度不定

2.1可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
2.2父元素做如下设置即可保证子元素垂直居中:

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

3.元素高度固定

3.1设置父元素相对定位(position:relative), 子元素如下css样式:

.son{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
}

3.2设置父元素相对定位(position:relative), 子元素如下css样式:

.son{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

关于水平居中和垂直居中方法可以参考 16种方法实现水平居中垂直居中