CSS常见布局

发表于

总结一下常见的网页布局。

两列： 定宽 + 自适应

HMLT 代码：

1
2
3
4
5
6
7
8
9
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
  • 方式一：float + margin
1
2
3
4
5
6
7
.left{
	float: left;
	width: 100px;
}
.right{
	margin-left: 120px;
}

这种情况不会遇到浮动问题，不定宽+自适应才会遇到。

  • 方式二：flex
1
2
3
4
5
6
7
8
9
10
.parent{
	display: flex;
}
.left{
	width: 100px;
	margin-right: 20px;
}
.right{
	flex: 1;
}

‘ flex: 1’ 表示每个 flex 项沿主轴的可用空间大小，因为默认值是0，所以设置 1 就占用了剩余横轴空间。并且占用的空间是在设置 padding 和 margin 之后剩余的空间。

不定宽 + 自适应

HMLT 代码：

1
2
3
4
5
6
7
8
9
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
  • 方式一：float + overflow
    这种方式会出现浮动问题，因为左侧元素的高度不确定。
1
2
3
4
5
6
7
8
9
10
11
.left{
	float: left;
	margin-right: 20px;
}
//为什么是右侧设置啊。。
.right{
    overflow: hidden;
}
.left p{
	width: 200px;
}

利用BFC的规则来清楚浮动！

  • 方式二：flex
    同一

等宽

HTML 代码：

1
2
3
4
5
6
<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>

  • 方式一： witdh

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent{
    	margin-left: -20px;
    }
    .column{
    	float: left;
    	width: 25%;
    	padding-left: 20px;
    	box-sizing: border-box;
    }

    box-sizing 用来修复 padding 造成的塌陷情况。

    • 方式二：
1
2
3
4
5
6
7
8
9
10
.parent{
	display: flex;
}
.column{
	flex: 1;
}
.column+.column{
	margin-left:20px;
}

全屏布局