首页 > 技术文章 > css学习总结

reamd 2016-07-07 09:36 原文

前言:
一直以来没有重视css的学习,最近开始css的学习之旅,发现了很多之前没有注意的知识点,特此留作笔录。

属性选择器(用元素的属性作为选择器)

input[type="text"]
[title="文章"]

特殊性

选择器特殊性分为a、b、c、d四个等级

  1. 样式是行内样式(内嵌),那么a=1
  2. b等于ID选择器的总数
  3. c等于类、伪类和属性选择器的数量
  4. d等于类型选择器和伪元素选择器的数量

外边距叠加

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

主要有种情况:(上下边距叠加,左右边距不叠加)

  • 上下元素边距叠加,以最高的为最终结果
  • 父子元素边距叠加,以最高的为主
  • 空元素,自身上下边距叠加。
  • 叠加的空元素和另一个空元素也叠加

等高元素

<div class="wrapper">
        <div class="box">1</div>
        <div class="box">
            2sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
        </div>
        <div class="box">
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            sdfasdfasdfasdfsdfsdafds
            哈哈哈哈哈哈哈
        </div>
    </div>
.wrapper {
            width: 100%;
            overflow: hidden;
        }
.box {
            width: 250px;
            margin-left: 20px;
            float: left;
            padding: 20px;
            padding-bottom: 520px;
            margin-bottom: -500px;
            background-color: #00A4FA;
        }

等高边距的关键在于设置父元素overflow
还有设置较高的底内边距和相似的底外负边距抵消

推荐阅读