Lucius's Blog

css常见的前端布局

发表于 | 分类于 | 浏览 次

水平居中

margin + 定宽

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.child {
  width: 100px;
  margin: 0 auto;
}
</style>
  • 适用定宽

table + margin

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.child {
  display: table;
  margin: 0 auto;
}
</style>

  • display: table 表现类似block，但是宽度为内容宽

  • 无需设置父元素样式（支持IE8及其以上版本，IE8以下则需要嵌入<table>

inline-block + text-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
  <div class="child">
    Demo
  </div>
</div>

<style>
.child {
  display: inline-block;
}
.parent {
  text-align: center;
}
</style>
  • 兼容IE6

absolute + margin-left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.parent  {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px; /* width/2 */
}
</style>

  • 固定宽度

  • 相比transform，兼容性更好

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

  • 绝对定位脱离文档流，不会对后续布局造成影响

  • transform为CSS3属性，存在兼容问题

flex + justify-content

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.parent  {
  display: flex;
  justify-content: center;
}
</style>

  • 只需要设置父节点

  • flex有兼容问题

垂直居中

table-cell + vertical-align

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.parent {
  display: table-cell;
  vertical-align: middle;
}
</style>
  • 兼容性好，IE8以下版本需要调整页面结构table

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
  <div class="child">Demo</div>
</div>

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

  • 绝对定位脱离文档流，但绝对定位元素师唯一的元素则父元素会失去高度

  • transform有兼容问题

  • 同水平居中也可以使用margin-top实现

flex + align-items

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>
  • flex有兼容问题

top + margin(-height / 2)

1
2
3
4
5
6
7
8
<div class="content"> Content goes here</div>

<style>
  position: absolute;
  top: 50%;
  height: 240px;
  margin-top: -120px; /* negative half of the height */
</style>

  • 绝对定位且固定高度

  • 若content太多则会出现溢出，overflow:auto则会出现滚动条

  • 虽然适用所有浏览器，但是假如没有足够的空间，content则会消失

height:50% + margin-bottom: -contentheight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="floater">  
  <div id="content">Content here</div>
</div>

<style>
#floater {
  float: left;
  height: 50%;
  margin-bottom: -120px;
}

#content {
  clear: both;
  height: 240px;
  position: relative;
}
</style>

  • 适用所有浏览器

  • 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

margin:auto + top & bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="content"> Content here</div>

<style>
#content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 240px;
  width: 70%;
}
</style>

  • 同样若空间小，则 content 会消失

  • 存在 IE 不兼容的问题

line-height

1
2
3
4
5
6
7
8
<div id="content"> Content here</div>

<style>
#content {
  height: 100px;
  line-height: 100px;
}
</style>

  • 只对文本有效

  • 多行时，断词比较糟糕

水平垂直居中

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
  <div class="child">Demo</div>
</div>

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

  • 绝对定位脱离文档流

  • transform有兼容问题

inline-block + text-align + table-cell + vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
  • 兼容好

flex + justify-content + align-items

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

  • 只需要设置父节点

  • flex有兼容问题

一列定宽，一列自适应

float + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.left {
  float: left;
  width: 100px;
}

.right {
  margin-left: 100px;
}
</style>
  • IE 6 有3像素的BUG，解决可以在.left加入margin-left:-3px，当然也有其他的解决方法，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
.left {
  float: left;
  width: 100px;
}

.right-fix {
  float: right;
  width: 100%;
  margin-left: -100px;
}

.right {
  margin-left: 100px;
}
</style>

此方法不会存在IE 6中3像素的问题，但.left不可选择，需要设置.left {position: relation}来提高层级。

float + overflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.left {
  float: left;
  width: 100px;
}

.right {
  overflow: hidden;
}
</style>

设置overflow: hidden会触发BFC块级格式上下文，就是无论在BFC里面做什么操作，外面都不会受影响。但是此方法不被IE 6支持。

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="paren">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left {
  display: table-cell;
  width: 100px;
}
.right {
  display: table-cell;
  /*宽度为剩余宽度*/
}
</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.parent {
  display: flex;
}

.left {
  width: 100px;
  margin-left: 20px;
}

.right {
  flex: 1;
}
</style>
  • 兼容问题

等分布局

float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>

<style>
.parent {
  margin-left: -20px;
}

.column {
  float: left;
  width: 25%;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
  • 兼容IE 8 以上版本

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>

<style>
.parent {
  display: flex;
}
.column {
  flex: 1;
}
.column + .column { /* 相邻兄弟 */
  margin-left: 20px;
}
</style>

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="parent-fix">
  <div class="parent">
    <div class="column">
      <p>1</p>
    </div>
    <div class="column">
      <p>2</p>
    </div>
  	<div class="column">
			<p>3</p>
		</div>
		<div class="column">
			<p>4</p>
		</div>
	</div>
</div>

<style>
.parent-fix	{
	margin-left: -20px;
}
.parent {
	display: table;
	width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
	table-layout: fixed;
}
.column {
	display: table-cell;
	padding-left: 20px;
}
</style>

等高布局

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

<style>
.parent {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.left {
	display: table-cell;
	width: 100px;
}
.right {
	display: table-cell;
}
</style>
  • table 的特性为每列等宽，每行等高可以用于解决此需求

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.parent {
	display: flex;
}
.left {
	width: 100px;
	margin-left: 20px;
}
.right {
  flex: 1;
}
</style>

注意这里实际上使用了align-items: stretch，flex 默认的 align-items的值为 stretch

float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
.parent {
  overflow: hidden;
}
.left,
.right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.left {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
</style>
  • 此方法只有背景显示高度相等，左右真实高度其实不想等，但兼容性较好。

参考资料：

我只是试下能不能被赞赏😳