CSS基础-5 浮动,margin的bug,清除浮动

１浮动的特性：

①浮动后的元素在排序的时候会以上对齐
②浮动对标准流有没有影响：有，浮动后的元素会覆盖在标准流的元素上面
③浮动排序规则：
浮动找浮动，不浮动找不浮动。
④如果页面上发生了浮动，怎么确定页面的布局：
a.找到不浮动元素，以标准流的形式解析
b.找到浮动的元素，以浮动的规则解析。

⑤浮动会改变元素显示方式：
会将元素的显示方式改为：inline-block;

⑥图片会给文字"让位",实现图文混排

demo1:

    
    
    
    
    



    
    

     
      1
    
    

    
    

     
      3
    
    

    
    

     
      4
    
    

    
    

     
      2 
    
    

    
    

     
     4 
    
    

    
    

     
     4
    
    

demo2:网站头部

在做页面导航的时候尽可能的不要直接用a标签，因为a标签可以说是没有语义的。如果将来这样写了，SEO会让为这个页面在进行关键字堆砌，将来SEO会这页面列入黑名单。

    
    
    
    
    



    
    

    
     
     

        
      
      
    
     
     
    
     
     

        
      
      
导航快乐

            
       
       
导航快乐


            
       
       
导航快乐


            
       
       
导航快乐


            
       
       
导航快乐


            
       
       
导航快乐




        
      
      
      
      
    
     
     
     
     




    
    

2:margin外边距注意点：

①如果两个盒子是并列关系，给上面盒子设置margin-bottom,给下面的盒子设置margin-top，它们两个的值不会相加，而是发生了合并现象：
margin-bottom:50;
margin-top:25;
margin-bottom+ margin-top=50;
由于是合并现象，所以将来在取值的时候会取得两者之间比较大的数。

②如果两个盒子是包含关系，如果让子盒子在父盒子之内向下平移100px：（margin塌陷现象）
如果要实现：

②.1给父盒子设置padding(麻烦，给父盒子设置了padding之后将来如果要父盒子的大小保持不变，还必须把padding值减掉。)
②.2给子盒子设置margin-top(这里有一个bug，如果父盒子没有边框，那么将来给子盒子设置以后父盒子也会随着子盒子一起向下掉)
a) 给父盒子设置边框
b) 给父盒子设置属性：overflow(溢出)：hidden(隐藏)

overflow: hidden;

3 清除浮动：

a)使用额外标签法：

在需要清除浮动的地方加入一个额外的标签，然后使用clear:both来清除。（不推荐使用，因为会用到大量的额外标签）

 b)使用overflow：hidden

 在需要清除浮动的标签中加入一个overflow：hidden;(不推荐使用，如果浮动与定位结合起来使用的话将来会发现冲突)

 c)使用当前最主流的清除方式：使用伪元素来清除浮动

        .clearfix:after {
            content:"";
            height: 0;
            line-height: 0;
            display: block;
            visibility:hidden;
            clear:both;
        }
        /*用来兼容ie浏览器*/
        .clearfix {
            zoom: 1;
        }

 d)使用双伪元素清除：

.clearfix:after , .clearfix:before {
 			content:””;
display: table;
clear:both;

}
.clearfix {
   	zoom: 1;
}

4 定位：

1:绝对定位：脱离的标准流
首先将position设置为absolute，然后设置距离top r b left
注意点：①定位的盒子没有父元素或者，有父元素但是父元素没有定位，trlt以body为参考
②如果父元素有定位，那么trlt以父元素为参考
③如果没有设置t或rbl，那么这个元素有position属性位置也不变
2:相对定位：相对于自己原来的位置position:relative
注意点：①如果设置了相对定位没有设置值trbl,盒子的位置不变
②相对定位占据标准流(文档)的位置

3:固定定位：
作用：使用盒子显示浏览器的固定位置。
代码：position:fixed;
①）固定定位会脱离标准流
②）固定定位会改变元素的显示方式

总结：如果将来在页面上使用定位，绝对要遵守这个规律：子绝父相的规律（子元素使用绝对定位，父元素使用相对定位。）

总结:  如果要让父盒子中的子盒子在父盒子中居中显示：
a)让子盒子的left设置为50%;
b)让子盒子的margin-left为负数（如果margin为负数不会使用盒子凹陷，盒子会随着对应的设置进行位置

五. overflow的使用：

hidden:将超出的内容隐藏起来; scroll:将超出的部分放在滚动条之内
auto:如果超出放在滚动条之内，如果没有超出没有滚动条。

六. 关于页面元素的显示和隐藏：

overflow: hidden;//将超出的部分隐藏。

dispaly :none;//将元素直接隐藏，并且不会在页面上占据位置

(可见性)visibility:hidden;//将元素直接隐藏，但是会保留元素所在的位置

七:图片和文字显示在一行上

如果要让文字的中线和图片的中线设置对齐，使用vertical-align:middel;
vertical-align与dispaly:inline-block使用是最好的

    
     
     
    
    





     
     

    
      
      我是一张二维码

     
     

八: z-index:
作用：用来设置当前盒子所在的层次

z-index: 999;/*设置当前盒子在最上层*/

补充:

p,h标签不能包含div