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 无穷大