• 再读《精通css》05:定位、浮动与清理


                    2.2 定位概述
    1、在使用相对定位(relative)时,不论元素是否移动,它仍然占据其原有空间。
    2、相对定位被看作是普通文档流的一部分。元素的位置相对于他在普通流中的位置。
    3、绝对定位(absolute)使元素的位置与文档流无关,不占据空间,文档流中的元素就像绝对定位的元素不存在一样。
    4、绝对定位元素的位置相对于和他最近的已经定位的祖先元素。在相对定位的容器里进行绝对定位很有用,比容下拉菜单等。
    5、可对绝对定位的元素设置z-index属性来控制他们的堆叠次序。
    6、固定定位(static)时绝对定位一个子类别,不过他相对于窗口,结果就是他不随滚动条而滚动。IE6不支持static定位。
    7、浮动元素不在文档的普通流中。普通文档流中的元素就当浮动元素不存在一样。
    8、浮动元素如果框的宽度不够,会产生“浮动下降”。如果几个浮动元素的高度不一样,可能会被“卡住”。
    9、运用值为hiddeng或auto的overflow属性会自动清除元素内所有的浮动。但overflow属性会影响元素本身的表现。
    10、清理浮动方法总结:
        a、在浮动元素后面的同辈元素上设置clear属性。
        b、对浮动元素的父元素也进行浮动。但最后还是要使用方法a来清理祖先元素的浮动(是浮动复杂,不推荐)。
        c、对浮动元素的父元素设置值为hidden或auto的overflow属性(不适应所有情况)。
        d、使用css生成的内容清理浮动(IE6中无效)。例如:
            <div class="news clear">
                <img src="路径"/>
                <p>段落</p>
            </div>
            .news img{float:left;}
            .mews p{float:right;}
            .clear:after {
                content:".";
                height:0;
                visibility:hidden;
                display:block;
                clear:both;
            }
        e、使用js生成浮动清理元素的代码(js有可能被禁用)。
  • 相关阅读:
    bzoj 1406 数论
    bzoj 1927 网络流
    【HNOI】 攻城略池 tree-dp
    【HNOI】五彩斑斓 模拟
    linux下nano命令大全
    CentOS7.6下安装MySQL
    CentOS7.6下安装Oracle JDK
    Vue报错type check failed for prop
    图像分割
    提升方法(boosting)详解
  • 原文地址:https://www.cnblogs.com/coffee/p/1678802.html
Copyright © 2020-2023  润新知