div+css（二） 和页面布局有关的css属性（最基础也是最重要的属性）

1. 属性—position top right bottom left

值：absolute， relative ，static，fixed

注意：要使position属性生效，需要配合属性top:200px或者left:200px 配合使用
relative：是相对于自己原来0 0 的位置，再偏移
fixed：固定在某一个位置，不随文本移动而移动

position 属性布局不是主流的页面布局方案，一般用于辅助，在整个页面布局完（一般用float布局）之后，最后用于漂浮的设计，如配合js使用，设计每秒移动多少，用于悬浮（如网页中的漂浮的广告）

2. 属性—z-index

决定层的先后顺序和覆盖关系，值高的元素会覆盖值低的元素

• 背景红色的z-index:0;;背景绿色的z-index:10;
  
• 背景红色的z-index:100;;背景绿色的z-index:10;
• 

3. 属性—text-align text-valign line-height

• 设置文本水平居中，可以使用text-align: center;
• 设置文本垂直居中，有两种方法：
  1. 使用padding 和 text-valign配合

     使用此方式，字体要固定好大小，如果字体变大，则整个div高度会随字体大小变化 而变化

     .four{
             border: 1px solid blue;
             background: blue;
             width: 500px;
             /*height: 200px;在设置文本垂直居中的时候，去掉height*/
             position: fixed;
             left: 200px;
             text-align: center;
             text-valign:center;
             padding: 120px 100px;
             /*line-height: 200px;*/
             /*font-size: 1cm;*/
         }
     

  2. 使用line-height 和 text-valign配合

     推荐使用此种方式，因为只要字体大小不超过行高，则div的高度是不会随字体的大小变化而变化的

     	 .four{
             border: 1px solid blue;
             background: blue;
             width: 500px;
             /*height: 200px;在设置文本垂直居中的时候，去掉height*/
             position: fixed;
             left: 200px;
             text-align: center;
             text-valign:center;
             /*padding: 120px 100px;*/
             line-height: 200px;
             font-size: 1cm;
         }
     

4. 属性—display visibility

• display属性值：none(隐藏元素，位置也不保留)， inline-block， block
• visibility属性值：inherit（继承父层的可见性），visible（无论父层可见与否，子层都可见），hidden（隐藏元素，位置保留；无论父层可见与否，子层均不可见）

5. 属性—overflow

属性值：hidden，scroll，auto

1. scroll 和auto区别是，auto会根据文本内容是否超过父元素，决定是否显示scrollbar，而如果使用scroll，则即使文本内容只有一行，也会显示scrollbar
2. overflow可以解决ie 6 的一个兼容问题，若你设置height值<18px，那么ie 6就会按照18px显示，只有>18px,ie 6 才会正常显示，为了解决这一问题，可以这样设置t{height:10px;overflow:hidden},超出的部分隐藏，即可以解决。

6. 属性—float clear

• float属性值：left, right
  eg:float:left

1. 元素使用float属性后，也脱离了文档流，如果需要对若干个元素进行左右或者上下布局，都需要将它们设置上float属性值；
2. 使用float属性后，元素的布局会随着窗口的大小改变布局，如三个横向布局的元素，如果窗口大小不足，则变成竖排

• 清除属性clear的属性值：left，right，both

指定一个元素周围是否允许有元素漂浮在它的旁边，clear:left:移动元素到其左边漂浮的元素的下面