CSS布局小结

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

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

 

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

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

主要代码就是：

.x {

margin: o auto;

}

 

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

左列：float: left

右列：overflow: hidden

 

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

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

 

其实，三列布局这里还有其余比较经常使用的布局样式：等高布局和粘连布局。若是不考虑几列布局，那还有flex布局、grid布局等布局模式。这些能够也看看，对页面布局也很重要。

 

 

参考：

 http://www.javashuo.com/article/p-oomacldo-dg.html