阶段性总结（CSS)二

1.CSS元素的显示模式

• 块级元素
• 行内元素
• 行内块元素

块级元素：块级元素独占一行，即一行内只能放一个。可以对块级元素设置宽高以及对齐属性。h1~h6 ,p ,div, ul ,ol ,li 等均为块级元素。块级元素内部可容纳其他块级元素。

行内元素：行内元素一行可以放多个。不具备自己的宽和高，仅依靠内容的大小来占位（支撑自身结构）a,strong,em,span等均为行内元素。内部只能容纳其他行内元素或者文本。

行内块元素：行内块元素，具备两者的特点，一行内可以放多个，并可以设置自身的宽高属性。

转换：可以通过display，使得行内元素具备块级元素的性质。

div{
    display: inline;
    /* 块转行内元素 */
}
a{
    display: block;
    /* 行内元素转块 */
}
li{
    display: inline-block;
    /* 块转行内块 */
}

2.CSS背景

• background

.box{
    background-color: transparent;
    /* 设置背景颜色 transparent透明，或是以16进制、rgba等其他形式表示的颜色 */
    background-image: url("../images/1.png");
    /* 设置背景填充图片 */
    background-repeat:no-repeat;
    /* 设置背景图片平铺模式 no-repeat不重复，repeat重复，repeat-x沿x轴重复平铺，repeat-y沿y轴重复平铺 */
    background-position: x y;
    /* 调整背景图片的位置 x,y分别为向右向下方向的偏移量，通常情况下设置为负的 */
    /* 除了可以设置具体偏移量的像素数值外，还可以使用top,center,left等方位名词*/
    background-attachment: scroll;
    /* 设置背景附着 scroll为背景随着滚轮滚动而移动，fixed为滚轮滚动但背景始终固定 */
    background: rgba(0,0,0,0.3);
    /* 设置背景色透明度0~1 */
    background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
    /* background简写（按顺序） */
}

3.CSS样式特性

• 层叠性，继承性，优先级

层叠性：对于一个元素同一个属性的多次设置，只会以最后一次设置为准，先前的设置会被覆盖掉。

继承性：子元素会继承父元素的一些样式。

优先级：不同选择器设定的样式具有不同的优先级，以优先级最高的样式设置为准。（复合选择器存在权重叠加）

选择器           权重
继承或*         0 0 0 0
元素选择器      0 0 0 1
类/伪类选择器   0 0 1 0
id选择器        0 1 0 0
行内样式        1 0 0 0
！important     无穷大