前端~样式篇（一）

1.关于网页的布局：

首先分析网页整体的布局。

1）div的分布

2)  是否有水平布局，是否需要浮动，浮动的元素就会脱离文档流，故而在其他的div确定位置时，就不参与计算（默认是垂直分布）

3）哪些元素是需要绝对定位的（在绝对定位时，先要给定该元素 position: absolute ,同时要给定所相对定位的参考元素：position: relative;在却对定位中，top/right/left/bottom   任意两个值就可以确定位置）

4）关于margin/padding/float     都是默认从左上角或者右上角开始的。（故要理解在用这几个属性给元素定位）

2.关于居中

水平居中

1）div居中，块元素   水平居中（margin: 11px auto 0  ==   margin-top:11px  magin-bottom:0;）

注：span img ,input  属于常见的行内元素，通常添加display: block; （可查阅HTML中行内元素与块元素的区别）

垂直居中

1）单行文本垂直居中

方法1： height: 30px;   line-height: 30px;

方法二：弹性布局：(查看弹性布局  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

display: flex;     align-items: center;

2）vertical-align: middle;

(待续。。。）