以下是最近整理的一些常见的布局套路

1. 左右布局

左右布局是除了流体上下布局以外最常见的布局,一般可以使用较为简单和兼容性很好的float布局来实现,但是要注意的是,浮动元素的父级元素一定要清除浮动带来的影响:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.left {
    float: left;
}
.right {
    float: left;
}

2. 左中右布局


比较常见的左中右布局也可以使用float来实现:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.left {
    float: left;
}
.middle {
    float: left;
}
.right {
    float: left;
}

除此之外,现如今用的最多的则是flex:

#content {
    display: flex;
    width: 100%;
    height: 200px;
}
#left {
   flex:0 0 200px;
    height: 100%;
    background-color: #f04d0d;
}
#middle{
    flex: 1;
    background-color: blue;
}
#right {
    flex:0 0 200px;
    height: 100%;
    background-color: #f04d0d;
}

3. 水平居中

内联元素想要居中有两种方式,推荐第二种,支持display为inline/inline-block/inline-table/inline/flex的属性:

<div align="center">
    通过设置属性align="center" 居中的内容
</div>
 
<div  style="text-align:center">
    通过样式style="text-align:center" 居中的内容
</div>

块级元素居中可以使用下面这种方法,缺点是需要给定元素宽度才行。

<div  style="margin: 0 auto;width: 120px;"></div>

4. 垂直居中

同样,内联元素居中需要给元素设置padding-toppadding-bottom 就可以实现垂直居中:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

另外,块级元素垂直居中需要分高度已知和高度未知两种情况,第一种可以使用

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

第二种高度未知则需要使用,当然兼容性受transform的影响,仅支持IE9+:

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

5. 水平垂直居中

设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%,最后使用负向 margin 实现水平和垂直居中,margin 的值为宽高(具体的宽高需要根据实际情况计算 padding)的一半。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。不同的是,接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中:

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

6. 其他小技巧

6.1 内联元素

  • 内联元素的文档流是从左往右,宽度不够自动换行
  • 内联元素的文字是基于基线对齐的,不是基于中线
  • 内联元素的高度是由line-heightpadding决定的
  • 内联元素中文宽度不够会进行分割并换行,英文会整个单词换行到下一行,这一特性可以使用属性控制:
span {
    word-break: break-all;
}

6.2 块级元素

  • 块级元素文档流是从上往下
  • 块级元素的高度是由内部文档流元素的高度决定的