1、复合选择器

2、元素关系选择器

3、序号选择器

    <!-- 
        1、nth-child()可以写成 an + b 的形式，表示从b开始每a个选1个，注意不能写成 b + an
        2、2n + 1等价于odd，表示奇数
        3、2n等价于even，表示偶数
     -->
     .box p:nth-child(3n + 2) {
        color: green;
     }
    // <p>2</p> 和 <p>5</p> 会被选择
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>

4、属性选择器

5、伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

CSS3新增伪类

6、伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素。伪元素用双冒号表示，IE8可以兼容单冒号。

7、选择器权重

id权重 > class权重 > 标签权重

    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我是段落</p>
            </div>
        </div>
    </div>

        /* 权重（2, 0, 1） */
        #box1 #box2 p {
            color: red;
        }
        /* 权重(2, 1, 2)，权重最大，所以颜色为蓝色 */
        #box1 div.box2 #box3 p {
            color: blue;
        }
        /* 权重(0, 3, 1) */
        .box1 .box2 .box3 p {
            color: green;
        }

        /* 
            1、在继承的情况下，选择器权重计算失效，而是“就近原则” 
            2、所以下面两个例子，p颜色最终为蓝色
        */

        #box1 #box2 #box3 {
            color: red;
        }
        p {
            color: blue;
        }

        #box1 #box2 {
            color: red;
        }
        .box1 .box3 {
            color: blue;
        }

7、盒模型

1、margin

1、竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。水平方向没有塌陷现象。
2、行内元素上下margin无效，转为块级元素后才会生效

2、盒子水平居中

        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 盒子水平居中 */
            margin: 0 auto;
            /* 文字居中 */
            text-align: center;
            /* 行高等于盒子高，让文字垂直居中 */
            line-height: 200px;
        }

3、box-sizing

1、 将盒子添加了 box-sizing: border-box; 之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin），即padding/border变为“内缩”的，不再扩张。
2、多应用于移动网页开发中，兼容到IE9。

4、行内元素和块级元素

• 使用display: block; 即可将元素转为块级元素
• 使用display: inline; 即可将元素转为行内元素，将元素转为行内元素的应用不多见
• 使用display: inline-block; 即可将元素转为行内块

行内块：img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签

5、元素的隐藏

1、使用display: none; 可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。
2、使用visibility: hidden; 也可以将元素隐藏，但是元素不放弃自己的位置。

        ul {
            /* 去掉无序列表小圆点 */
            list-style: none;
        }
        a {
            /* 去掉超级链接下划线 */
            text-decoration: none;
            /* 添加下划线 */
            text-decoration: underline;
            /* 添加中划线 */
            text-decoration: line-through;
            /* 文字是否倾斜 */
            font-style: italic;
        }
        p {
            /* 首行缩进，em表示字符宽度 */
            text-indent: 2em;
        }

8、浮动与定位

1、浮动

浮动的最本质功能：用来实现并排
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

清除浮动的方法：（项目中最常用的是1和4）

• 让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow: hidden;属性
• 给后面的父盒子设置clear: both;属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
• 使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear: both；
• 在两个父盒子之间“隔墙”，各一个携带clear: both的盒子。

2、BFC规范

BFC（Box Formatting Content，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。创建BFC的方式如下，方法4项目中用的最多
注：BFC可以取消盒子margin的塌陷
为什么要形成BFC规范，这要从一个现象说起：一个盒子不设置height，当内容子元素都浮动时，无法撑起自身

• float的值不是none
• position的值不是static或者relative
• display的值是inline-block、flex或者inline-flex
• overflow: hidden;（最常用）

3、相对定位

概念：盒子可以相对自己原来的位置进行位置调整，称为相对定位。
性质：相对定位的元素会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其它元素产生任何影响。
用途：用来微调元素位置

4、绝对定位

① 概念：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
②绝对定位的元素脱离标准文档流，将释放自己的位置，对其它元素不会产生任何干扰，而是对它们进行压盖
③ 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫子绝父相
④ 用途：绝对定位用来制作“压盖”、“遮罩”效果
⑤ 堆叠顺序 z-index 属性：z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

绝对定位的盒子垂直居中是一个非常实用的技术

            position: absolute;
            top: 50%;
            margin-top: 负自己高度的一半;

5、固定定位

不管页面如何卷动，它永远固定在那里，比如返回顶部、楼层导航等等
固定定位只能以页面（浏览器）为参考点，没有子固父相这个性质
固定定位脱离标准文档流

9、边框与圆角

            /* 
                solid 实线
                dashed 虚线
                dotted 点状线
             */
            border: 1px solid #000;

            /* 50%可以设置元素为椭圆形，为宽度的一半px设置为胶囊形 */
            border-radius: 50%;

            /* 
                inset: 盒子内阴影，可不写
                2px: x方向偏移量，正值向右，负值向左
                3px: y方向偏移量，正值向下，负值向上
                4px: 模糊量，0不模糊，值越大越模糊
                5px: 阴影延展，阴影会向四个方向进行延伸，可不写
                red: 阴影颜色
                注：可添加多阴影
             */
            border-shadow: inset 2px 3px 4px 5px red;
            border-shadow: 2px 3px 4px red, 3px 3px 3px blue, inset 2px 3px 4px 5px green;

10、背景与渐变

背景重复模式

            /* 
                repeat: x、y方向均平铺（默认）
                repeat-x: x方向平铺
                repeat-y: y方向平铺
                no-repeat: 不平铺
             */
            background-repeat: repeat;
            background-image: url(../image/01.png);

背景尺寸

            /* 
                contain: 表示将背景图片智能改变尺寸以容纳到盒子里
                cover: 表示将背景图片智能改变尺寸以撑满盒子
                100px 为宽度， 200px 为高度
                值可以用百分数来设置，表示为盒子宽高的百分之多少
                需要等比例设置的值，写auto: 宽度为100px, 高度等比例显示
             */
             background-size: cover;
             background-size: 100px 200px;
             background-size: 50% 50%;
             background-size: 100px auto;

背景裁切

            /* 
                border-box: 背景延伸至边框值（默认值）
                padding-box: 背景延伸至内边（padding）,不会绘制到边框处（仅在dotted、dashed边框可察觉）
                content-box: 背景裁切到内容区域
             */
            background-clip: content-box;
            /* 背景起源，当设置为content-box，图片很小然后平铺在内容区域的时候，会发现左上角图片没有从起始位置开始，此时这条属性可以使用，项目中不常用 */
            background-origin: content-box;

背景固定

            /* 
                background-position属性可以设置背景图片出现在盒子的什么位置
                可以用top、bottom、center、left、right描述图片出现的位置
             */
            background-position: 100px 200px;
            background-position: center center;

背景综合属性

            /* 
                background综合属性：
                背景颜色：当图片为透明背景时可用
                背景图片
                背景重复
                背景位置
             */
            background: white url(./images/girl.png) no-repeat center center;

线性渐变

• 盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景

            /* 
                to right：渐变方向，也可以写成度数，如45deg
                red: 中间颜色
                blue: 中间颜色，可以有多个颜色值，并且可以用百分数定义它们出现的位置
                green: 结束颜色
             */
            background-image: linear-gradient(to right, red, blue 20%, green);
            background-image: linear-gradient(45deg, red, blue, green);

径向渐变

• 盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。实际项目开发中很少用到。

            /* 50% 50% 表示圆心坐标 */
            background-image: radial-gradient(50% 50%, red, blue);

浏览器私有前缀

• 不同浏览器有不同的私有前缀，用来对实验性质的CSS属性加以标识

            /* 去掉鼠标点击时候的蓝色框 */
            outline: none;
            /* 设置鼠标触碰时候样式为小手状 */
            cursor: pointer;
            /* 溢出的内容用滚动条显示 */
            overflow: scroll;
            overflow-y: scroll;
            /* 透明度设置为0，不是背景的透明度，而是整体的透明度 */
            opacity: 0;