CSS拾遗（一）

weixin_30908707

于 2017-02-05 10:50:00 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/zhansu/p/6367136.html

版权

重新看《精通CSS（第二版）》做一些记录，方便今后巩固。

1.外边距叠加

　　只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、或绝对定位框之间的外边距不会叠加。

2.相对定位

　　使用相对定位时，无论是否移动，元素仍然占据原来的空间，其他元素也是对它原来空间的元素进行定位。

　　下面是未相对定位

    <style>
        .rela1 {
            height: 50px;
            width: 50px;
            background-color: red;
            margin: 50px;
        }
        .rela2 {
            /*position: relative;
            top: 50px;
            left: 200px;*/
            height: 50px;
            width: 50px;
            background-color: blue;
            margin: 50px;
        }
        .rela3 {
            height: 50px;
            width: 50px;
            background-color: green;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="rela1"></div>
    <div class="rela2"></div>
    <div class="rela3"></div>
</body>

　　下面对蓝色块进行相对定位

<style>
        .rela1 {
            height: 50px;
            width: 50px;
            background-color: red;
            margin: 50px;
        }
        .rela2 {
            position: relative;
            top: 50px;
            left: 200px;
            height: 50px;
            width: 50px;
            background-color: blue;
            margin: 50px;
        }
        .rela3 {
            height: 50px;
            width: 50px;
            background-color: green;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="rela1"></div>
    <div class="rela2"></div>
    <div class="rela3"></div>
</body>

　　可以发现蓝色块相对定位，对下面的绿色块的定位没有任何影响。绝对定位则不同，绝对定位使元素的位置与文档流无关，不占据空间，

普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。绝对定位元素是相对于距离它最近的那个已定位的祖先元素来定位的。

3.层叠样式如何考虑特殊性、顺序与重要性

　　先考虑特殊性，就是1,1,1,1算数那个。若特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个，在这种情况下，规则的顺序就可以起到决定作用：晚出现的优先级高。

如果这还不够，可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声明的末尾加上 !important。

4.浮动元素及清理

　　浮动元素让元素脱离文档流，不再影响不浮动的元素，实际上并非完全如此。如果浮动的元素后面有一个文档流中的元素，

那么这个元素的框会表现得像浮动元素根本不存在一样。但是，该元素的文本内容会受到浮动元素的影响，会移动以留出空间。

　　下面是红色框未浮动时的布局

<style>
        .rela1 {
            /*float: left;*/
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="rela1"></div>
    <div class="rela2">
        123
    </div>

</body>

　　下面是红色框浮动时布局

<style>
        .rela1 {
            float: left;
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="rela1"></div>
    <div class="rela2">
        123
    </div>

</body>

　　要想阻止蓝色框文本围绕在浮动框的外边，可以对其使用clear属性进行清理。

<style>
        .rela1 {
            float: left;
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            clear: both;
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="rela1"></div>
    <div class="rela2">
        123
    </div>

</body>

　　下面讲清浮动。

    <style>
        .outer {
            background-color: #888;
            width: 400px;
        }
        .rela1 {
            float: left;
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            float: left;
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="rela1"></div>
        <div class="rela2">
            123
        </div>
    </div>
</body>

　　发现.outer消失了，因为浮动元素脱离了文档流，所以包围2个颜色框的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？

需要在这个元素中的某个地方应用clear，可惜现在没有元素可以用clear，所以需要在最后一个元素下加一个空元素并且清理它。

    <style>
        .outer {
            background-color: #888;
            width: 400px;
        }
        .rela1 {
            float: left;
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            float: left;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        .none {
            clear: both;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="rela1"></div>
        <div class="rela2">
            123
        </div>
        <div class="none"></div>
    </div>
</body>

　　然而增加不必要的元素并不优雅，另外的方式是对.outer进行浮动,不过下一个元素也会受到这个浮动元素的影响。有没有最好的办法，目前最佳实践是使用伪元素:after。

    <style>
        .clear { zoom:1; }  /*==for IE6/7 Maxthon2==*/
        .clear:after {
            content:'';
            display:block;
            clear:both;
            visibility:hidden;
        }
        .outer {
            background-color: #888;
            width: 400px;
        }
        .rela1 {
            float: left;
            height: 30px;
            width: 30px;
            background-color: red;

        }
        .rela2 {
            float: left;
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="outer clear">
        <div class="rela1"></div>
        <div class="rela2">
            123
        </div>
    </div>
</body>

　　通过在.clear类里增加一个空白内容，再进行清浮动即可。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，实践中发现可以不用。

对于IE6/7,使用zoom:1,也可以到达清浮动效果。

转载于:https://www.cnblogs.com/zhansu/p/6367136.html

weixin_30908707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS拾遗（一）

重新看《精通CSS（第二版）》做一些记录，方便今后巩固。1.外边距叠加　　只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、或绝对定位框之间的外边距不会叠加。2.相对定位　　使用相对定位时，无论是否移动，元素仍然占据原来的空间，其他元素也是对它原来空间的元素进行定位。　　下面是未相对定位 <style> .rela1...
复制链接

扫一扫