css学习总结

前言： 一直以来没有重视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
• 还有设置较高的底内边距和相似的底外负边距抵消