使用html5静态页面的总结,静态页面布局总结（新手）

学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结

总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，

那么对于静态的页面的布局就不会有太大的问题

再说布局之前先说一下元素的显示模式分类。

元素的显示模式分类可以分为块级元素，行内元素，行内块级元素。

块级元素是垂直排列的，每个元素会独占一行，行内元素和行内块级元素不会独占一行，会水平排列。

当然元素的显示模式是可以随便转换的。

下面先来说说垂直布局，

垂直布局让元素在页面里面垂直排列，这个是比较简单的，我们知道在正常情况下页面里的

块级元素都是从上到下依次排列的，那么这个垂直布局就相对来说简单点。只要把块级元素依次写在页面中，

那么浏览器会默认的让这些块级元素垂直排列，如果有行内块级元素或行内元素

则可以转化为块级元素来实现元素的垂直排列。

然后是来说水平布局，

水平布局就是让元素在页面里面水平排列，这个比较垂直排列会相对复杂一些，因为水平排列会涉及到浮动，

因此会出现很多问题，比如高度塌陷，覆盖等。而且一般都是通过浮动来实现水平布局，所以会遇到很多问题，

这就要求我们对浮动有一定的了解，下面我会写一些布局的细节以及浮动的各种情况。

首先最常用的就是居中显示，各种居中方式中我们最常用的就是text-align：center ，

text-align：center可以让下面几种情况居中：

可以让该元素的文本内容水平居中，该元素中的行内元素和行内块级元素，

但是不能让元素内部的块级元素水平居中

垂直居中，用的最多的是让line-height=元素的height，还有vertical-align，

也是垂直对齐，他一般是让图片右边的文本对齐图片的上中下。

然后用的多的就是内外边距了，就是margin和padding，很好的理解和运用内外边距能够

让你很方便的实现开头或结尾的一些距离等。

然后就是定位了，页面布局的定位最常用的就是浮动(float)和定位(position)，

感兴趣的可以去我的日记了有详细的介绍。

本人学习前段一个月，完全的菜鸟，希望大家多多指点。