CSS day4

复合选择器：由两个或多个基础选择器，通过不同的方式组合而成；作用：更准确，更高效的选择目标元素（标签）。
    <span>444</span>
    <div>
        <span>555</span>
    </div>
后代选择器：选中某元素的后代元素。父选择器 子选择器（CSS属性），父子选择器之间用空格隔开。
        div span{
            color: red;
        }
    <div>
        <span>555</span>
    </div>
子代选择器：选中某元素的子代元素（最近的子级），写法：父选择器>子选择器（CSS属性），父子选择器之间用>隔开。
例：           
 div>span{
            color: red;
        }

<div>
        <span>111</span>
        <p>
            <span>
                222
            </span>
        </p>
    </div>
严格div子代，那么111为红色，222不变色。

交集选择器：选中同时满足多个条件的元素。选择器之间连写，没有任何符号。
    注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
        div.p{
            color: red;
        }

    <p class="box">111</p>
    <p>222</p>
    <div class="box">333</div>

并集选择器：选中多组标签设置相同的样式。选择器1，选择器2，...，选择器N{CSS属性}，选择器之间常用，隔开。
        div,p,h1{
            color: red;
        }

    <p>111</p>
    <h1>222</h1>
    <div>333</div>

伪类选择器：
伪类表示元素状态，选中元素的某个状态设置样式。鼠标悬停状态：选择器：hover

伪类-超链接
：link：访问前
：visited：访问后
：hover：鼠标悬停
：active：点击时

CSS特性：
1.继承性：子级标签继承父级的文字控制属性。
在body里所有文字都是css里body的格式，但是默认有的标签的文字控制属性有自己的就生效自己的。
2.层叠性：相同属性会覆盖，后面的CSS属性覆盖前面的CSS属性；不同的属性会叠加，不同的CSS都生效。
3.优先级：当一个标签使用多个选择器，基于不同种类的选择器的匹配规则.
规则：选择器优先级高的样式生效。
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（选中的标签范围越大，优先级越低）
!important提权功能，提高权位/优先级 到最高。
优先级-叠加计算规则：
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
1.从左向右依次比较个数，同一级个数的优先级高，如果个数相同，则向后比较。
2.!important权重最高
3.继承权位最低

Emmet写法：代码的简写方式，输入缩写会自动生成对应代码。
HTML：

CSS:大多数为首字母简写。

背景属性：
背景色：
背景图：background-image: url();(简写bgi)，背景装饰图片。背景图默认平铺（复制）的效果。
背景图平铺方式：background-repeat: ;(缩写bgr)
1.no-repect不平铺
2.repect平铺
3.repect-x水平方向平铺
4.repect-y垂直方向平铺
背景图位置属性：background-position: 0 0;(缩写bgp)
关键字：left（左），right（右），center（中），top（顶部），bottom（底部）
坐标：数字+px，水平，正数向右，负数向左；垂直，正数向下，负数向上。
（1）关键字取值可以颠倒取值顺序。
（2）可以只写一个关键字，另一个方向默认为居中，数字只写一个值代表水平方向，垂直方向为居中。
背景图缩放：background-size: ;(缩写bgs)
（1）关键字：cover，等比例缩放背景图片以完全覆盖背景区，可能背景图片部分不可见。
contain，等比例缩放背景图片以完全装入背景区，可能背景区部分空白。
（2）百分比：根据盒子尺寸计算图片大小
（3）数字+单位

背景固定属性：background-attachment: fixed;(缩写bga)背景不会随着元素内容滚动

背景符合属性：background: ;(缩写bg)
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放

显示模式：标签（元素）的显示特点。布局网页时，根据标签的显示模式选择合适的标签摆放属性。
1.块级元素
（1）独占一行
（2）宽度默认是父级的100%
（3）添加宽高属性生效
2.行内元素
（1）一行共存多个
（2）尺寸由内容撑开
（3）加宽高不生效
3.行内块元素
（1）一行共存多个
（2）尺寸由内容撑开
（3）添加宽高属性生效

转换显示模式：display
属性值：
（1）block 块级
（2）inline-block 行内块
（3）inline 行内