9.19前端笔记

一、css2属性选择器

        ele[attr]{} 指定了属性名为attr的ele元素
        ele[attr=value]{}指定了属性名为attr且属性值为value的ele元素
        ele[attr~=value]{}指定了属性名称attr，并且属性值词列表中包含value的ele元素
        注意：要有词列表的时候，属性名=属性值是选择不上的
        词列表：具有多个类名，之间用空格隔开

二、css3新增属性选择器

        ele[attr^=value]{}指定了属性名attr，且属性值为value开头的ele元素
        ele[attr$=value]{}指定了属性名attr，且属性值为value结尾的ele元素
        ele[attr*=value]{}指定了属性名attr，且属性值包含value的ele元素

        注意：不能以数字结尾和开头

三、结构伪类选择器

          要求掌握
        1.元素类型必须一致
        2.元素类型可以不一致

        root{}匹配文档根元素
        ele：first-child{}选择一组相同元素中的第一个元素
        ele：last-child{}选择一组相同元素中的最后一个元素
        ele：nth-child（n）{}选择一组相同元素中的第n个元素，n可以数值、关键词、表达式

        数值
        关键词：odd（奇数） even（偶数）
        表达式：2n（偶数）  2n+1（奇数）

        ele：nth-last-child（n）{}选择一组相同元素中的倒数第n个元素，n可以数值、关键词、表达式

        备注：以上元素类型必须一样

四、结构伪类选择器2

        ele：first-of-type 选择一组元素中特定类型的第一个子元素
        ele：last-of-type 选择一组元素中特定类型的最后一个子元素
        ele：nth-of-type（n）{}选择一组元素中特定类型的第n个ele元素
        ele：nth-last-of-type（n){}选择一组元素中特定类型的倒数第n个ele元素

        备注：以上元素类型可以不一样

五、状态伪类选择器

        ele:disabled{}选择界面上处于禁用状态的元素
        ele:enabled{}选择页面上处于可用状态的元素
        ele:checked{}选择界面上处于被选中状态的元素

六、多背景属性
       
        单独定义
        多个背景属性用逗号隔开，背景图片顺序在前，层级高，显示在前
        复合写法
        多个背景图片逗号隔开

七、背景图属性设置
         
        background-size：数值
        px：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”
        
        percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”

        cover：覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能无法完整显示在盒子中（宽高给大点）

        contain：包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大，可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）

八、背景图定位区域
        
        背景图定位区域   background-origin属性
        background-origin：padding-box；默认值，背景图相对于内填充区域来定位
        background-origin：content-box；背景图相对于内容来定位
        background-origin:border-box;背景图片相对于边框区域来定位
     
九、背景颜色绘制区域

        background-clip：border-box；背景被剪裁到边框区域，在内容区、内填充区、边框区域显示，默认值
        background-clip：padding-box；背景被剪裁到内填充区域，在内容区、内填充区显示
        background-clip：content-box；背景被剪裁到内容区域，仅在内容区域显示

十、线性渐变

     线性渐变：从一个方向到另一个方向的渐变
        1.语法：
            background-image:linear-gradient();
            background:linear-gradient(方向，颜色1，范围1，颜色2，范围2，……)；
            方向：数值（单位deg）、关键词（left|right top|bottom）
            颜色：关键词。十六进制色值、rgb（r，g，b）、rgba(r,g,b,a)
            范围：每个颜色结点的显示范围
            取值：
               1.px
               2.百分比
            注意：方向：加前缀需要把to去掉，方向是相反的
            默认方向：从上到下

        2.取值：
               1.使用起始位置关键字
                to right 方向自左向右
                to top   方向自下而上
                to bottom 方向自上而下
                to left  方向自右而左
                to left top 方向朝向右上角
                to right bottom 方向朝向右下角
                to top left 方向朝向左上角
                to left bottom 方向朝向左下角

                2.使用角度
                0deg 相当于 to top
                90deg 相当于 to right

十一、径向渐变

    径向渐变：一个点到四周的渐变
    1.语法
        background：radial-gradient（渐变形状，颜色1 范围1，颜色2 范围2，……）；
        圆心位置
        语法：background：radial-gradient（形状 at 水平位置 垂直位置，颜色1，颜色2）
    2.取值：
        px（表示距左上角的0,0的坐标位置）
        关键字可以是以下词的组合
        left center right
        top center bottom
        百分比
        例：表示圆心在右侧中心
        background：radial-gradient（circle at 100% 50%，red，yellow，green）；
        例：表示圆心在左上角
        background：radial-gradient（circle at left top，red，yellow，green）；
    3.重复径向渐变

       background: repeating-radial-gradient(渐变形状/圆心，颜色1 范围1，颜色2 范围2，……); 

十二、多列布局

        分成几列 
            column-count: 3;
        列宽
            column-width: 300px;
        列间距 
            column-gap: 30px;
        列与列之间的线
        语法：参考边框的语法 
            column-rule: 10px dotted paleturquoise;
            column-rule: 2px dashed palevioletred;