css背景和元素显示模式及转化

背景

1、背景颜色

background-color   //默认：transparent（透明）
background: rgba(0,0,0,.3); //半透明
文字也可变透明

2、背景图片

background-image:none/url(路径)
background-size //背景图片尺寸

尺寸的属性值    		效果
20px  10px  			宽度，高度
100%						跟随父元素
cover						覆盖盒子
contain 					保留图片宽高比例

3、背景位置

background-position:x	y; //x：向左（负数），y:向上（负数）
定位：top,center,right,left,bottom

4、精灵图
多个图像组合成单个图像，移动背景位置来实现
5、背景固定

background-attachment: scroll(随对象内容而动)/fixed(背景固定)

5、背景复合写法（没有特定顺序）

background:  ;

显示模式

1、块元素（div，h1-h6，p，ul，ol，li）
特点：
独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是父级元素宽度的100%
注意：文学类的元素内不能使用块级元素，例如标题标签里面不能放段落标签
2、行内块（img，input，td）
特点：
一行可以显示多个，和相邻行内元素在一行上，之间会有间隙
默认宽度就是本身内容的宽度
高、行高、外边距以及内边距都可以控制
3、行内元素（a，strong，b，em，i，del，s，ins，span）
特点：
一行可以显示多个
宽、高直接设置是无效的
默认宽度就是本身内容的宽度
行内元素只能容纳文本或其他行内元素

显示模式的转化

display:block; //转换为块级元素
display:inline; //转换为行内元素
display:inline-block; //转换为行内块元素