CSS选择器的优先级别

选择器的针对性越强，它的优先级就越高选择器的权值

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 

优先级别排序

    important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 |伪元素 > 通配符 > 继承

CSS的布局

默认情况下，所有的网页标签都在标准流布局中

    从上到下，从左到右

脱离标准流的方法有

    float属性 position属性 和 left、right、top、bottom属性

float属性

    所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。    可选值         left：脱离标准流，浮动在父标签的最左边        right：脱离标准流，浮动在父标签的最右边        none：不浮动     块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。    当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

CSS常见属性

CSS有N多属性，根据继承性，主要可以分为2大类

    可继承属性

        父标签的属性值会传递给子标签         一般是文字控制属性

    不可继承属性

        父标签的属性值不能传递给子标签         一般是区块控制属性

    visibility

    cursor

    color

    font

        font-family

            font-family:Arial , Helvetica , sans-serif            浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

        font-size

        font-weight

        font-style

            指定文本的斜体            font-style:italic            font-style:normal

    text-decoration

        underline        overline        line-through         none

    text-indent

        设置首行缩进        该样式需要指定一个长度，并且只对第一行生效。

    text-align

 left：左对齐right：右对齐justify：两边对齐center：居中对齐

    text-transform

        用于将元素中的字母全都变成大小写        大写：text-transform:uppercase        小写：text-tansform:lowercase        首字母大写：text-transform:capitalize        正常：text-transform:none

    list-style

    overflow

        控制内容溢出的情况        visible：默认值        scroll：添加滚动条        auto：根据需要添加滚动条        hidden：隐藏超出盒子的内容

    line-height

        用于设置行高，行高越大则行间距越大。        行间距 = line-height – font-size

页面布局

定位

通过定位可以将页面中的元素，摆放到页面的任意位置使用position来设置元素的定位

可选值

    static        默认值，元素没有开启定位    relative        开启元素的相对定位    absolute        开启元素的绝对定位    fixed        开启元素的固定定位

相对定位

    开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化    相对定位元素相对于其自身在文档流中的位置来定位    相对定位的元素不会脱离文档流    相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素    相对定位的元素会提升一个层级

固定定位

    固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样    不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动

偏移量

    当元素开启了定位以后，可以通过偏移量来设置元素的位置

    left          元素距离定位位置的左侧距离    top          元素距离定位位置的上边距离    right        元素距离定位位置的右侧距离    bottom    元素距离定位位置的底部距离    一般情况下，只使用两个值即可定义一个元素的位置。

层级

     定位元素 > 浮动元素 > 文档流中的元素     当元素开启了定位以后，可以通过z-index来设置元素的层级     z-index值越高元素越优先显示     如果z-index值一样，或者都没有z-index则优先显示下边的元素     父元素永远不会盖住子元素

圆角

    border-radius

背景

background-color

    背景颜色

background-image

    1. 设置背景图片

        需要一个url地址作为参数        例子：background-image:url(图片的路径)

    2. 使用注意

        如果背景图片大于元素，默认会显示图片的左上角        如果背景图片和元素一样大，则会将背景图片全部显示        如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

    3. 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色, 一般情况下设置背景图片时都会同时指定一个背景颜色

background-repeat

    1. 设置背景图片重复方式

    2. 可选值：

        repeat           默认值，背景图片会平铺显示       沿x轴和y轴双方向重复        no-repeat      背景图片不重复        repeat-x        背景图片沿水平方向重复        repeat-y        背景图片沿垂直方向重复

background-position

    设置背景图片的位置

    设置方式一

        可以直接通过几个位置的关键字来设置图片的位置        top        left        right        bottom        center        可以通过以上关键字两两组合的形式，将背景图片设置到元素的任意位置        如果仅仅指定一个值，则第二个值默认是center

    设置方式二         可以直接指定两个值，来设置背景图片的偏移量         例子：

            background-position : x轴偏移量  y轴偏移量;        x轴偏移量，用来指定图片的水平位置            如果指定一个正值，则图片向右移动            如果指定一个负值，则图片向左移动        y轴偏移量，用来指定图片的垂直位置            如果指定一个正值，则图片向下移动            如果指定一个负值，则图片向上移动

background-attachment

    用来设置背景是否随页面滚动

    可选值         scroll 

             默认值，背景图片会随页面一起滚动

        fixed

            背景图片不随页面滚动，会固定在页面的指定位置            设置该属性的背景，则背景会永远相对于浏览器窗口进行定位            一般这种背景都会设置给body

background-size

    规定背景图像的尺寸

    使用方式         background-size: length|percentage|cover|contain;     图示

background

    背景的简写属性    可以通过它来设置所有的背景相关的样式    该简写属性没有顺序的要求，也没有数量的要求，不写的属性使用默认值 

opacity

    用来设置背景的不透明度

    可选值

        0-1        0表示完全透明        1表示完全不透明        0.5半透明

    IE8及以下的浏览器不支持该样式，可以使用滤镜来代替

        filter:alpha(opacity=值)        这里值需要一个0-100之间的值        0相当于完全透明        100完全不透明