zoukankan      html  css  js  c++  java
  • css布局总结

    1.默认情况下所有元素都在z-index:0这一层,这层为文档流。

    2.relative 和 absolute都可以改变元素在文档中的位置,设置position:relative或position:absolute都可以让元素激活left、top、right、bottom和z-index属性(默认情况下,这些属性未激活,设置了也无效)。

    3.设置relative或absolute都会让元素“浮”起来,也就是z-index值大于0,会改变正常情况下的文档流。不同的是relative会保留自己在z-index:0的占位,left,right,top,bottom的值是偏离原来文档流中的位置,其他仍然在z-index:0的元素的位置不会受到影响。absolute会完全脱离文档流,不再在z-index:0层保留占位符,其left,right,top,bottom是相对于自己最近的一个设置relative或absolute的祖先元素,如果没有,那就相对于body。

    4.float 也能改变文档流,不同的是float不会让元素“上浮”到另一个z-index层,它仍然让元素在z-index:0这层排列,用float:left或float:right来控制元素在同层里左右浮动。浮动原理:从文件流中分离出来,原先占据的位置就被后面的对象填上。     如果想多个快同一列,把浮动方向一致就可以了。 

    5.absolute和float都会隐式地改变display类型,主要设置了其中一个,都会让元素以display:inline-block的方式显示,可以设置长宽,就是显式地设置display:inline或display:block,也仍然无效。相反,relative不会隐式改变display的类型。

    6.清除浮动:clear:both; 消除浮动对子类的影响          消除浮动对父类的影响    

                    1.增加一个空子类,类名为.class{clear:both};    

                    2.overflow:hidden 子类不能有定位布局    

                 

             3..clearFix:after{   
    
                               clear:both;   
    
                               display:block;   
    
                               visibility:hidden;    
    
                               height:0;  
    
                               line-height:0;   
    
                               centent:"";  
    
                             }      
    
                     .clearFix{zoom:1;}   //IE6

            溢出 overflov:visible(不剪切也不添加滚动条) hidden(不显示超过对象尺寸的内容)scroll(显示滚动条) auto(剪切或者滚动条)

  • 相关阅读:
    亚马逊产品图片爬取
    页面浏览统计之(一) hitcount
    页面浏览统计之(二) tracking
    页面浏览统计之(三) tracking2
    Django CMS apphooks – 使用应用钩子来添加主题应用
    Django CMS 插件 – 添加博客专题
    [整理] Windows下打印网页
    CompletableFuture详解
    详解JVM常量池、Class、运行时、字符串常量池
    分库分表总结
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3477905.html
Copyright © 2011-2022 走看看