CSS布局小结

在制作页面的过程中，给页面进行排版是一项非常重要的工作，通常也是制作页面的第一步。那么，排版的时候首先要考虑的就是页面的大致布局是什么样子，做到胸有成竹，这样制作起来也就很快了。

页面的布局通常有哪几种呢？从大方向来说，可以看作是三类：单列布局，两列布局和三列布局。下面说说大概的思路，会设计到一些主要的代码，但是不会特别详细，本文主要强调思路以及思维框架。非常细节和完整的代码请看结尾参考资料。

 

1. 单列布局。此时，一般从网站页面的角度来说，使用比较多的是居中布局。

 此时，最核心的代码就是给这三个元素的样式加上的居中对齐的代码即可。

主要代码就是：

.x {

margin: o auto;

}

 

2. 两列布局。排版两列布局，最主要的在一个浮动上。大家一定要知道，浮动的功能可以让一个元素对另一个元素产生“围绕”功能。那么，同样地也可以利用这一点来实现左右两列的布局。这个时候的主要代码是：

左列：float: left

右列：overflow: hidden

 

3. 三列布局。在大多数时候，网站页面需要三列的布局。这个时候就会提到常用的圣杯布局等三列布局样式。那么，这个时候主要用到的代码是给左、中、右这三列分别用上左浮动。即：float: left。

当然，还要配上边距(padding / margin)做相应调整来实现最终布局。

 

其实，三列布局这里还有其他比较常用的布局样式：等高布局和粘连布局。如果不考虑几列布局，那还有flex布局、grid布局等布局模式。这些可以也看看，对页面布局也很重要。

 

 

参考：https://juejin.im/post/5bbcd7ff5188255c80668028