关于CSS的背景相关属性

7.1.1背景颜色

属性名：background-color（bgc）

属性值：

颜色取值：关键字，rgb表示法，rgba表示法，十六进制

注意点：

背景颜色默认值是透明:rgba(0，0，0，0)，transparent

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

7.1.2 背景图片

属性名：background-image（bgi）

属性值：

background-image：url（‘图片路径’）

注意点：

url中可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰作用，类似于背景颜色，无法撑开盒子

7.1.3背景平铺

属性名：background-repeat（bgr）

属性值：

7.1.4背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置 垂直方向位置

属性值可以用两种方式取值:

1.方位名词（最多表示9个位置）

水平方向有left，center，right

垂直方向：top，center，bottom

如中间就是background-position：center，center

2.数字加px

坐标系：

原点（0，0）即是盒子的左上角

x轴水平向右，y轴垂直向下

操作将图片左上角与坐标点重合即可

注意点：

方位名词和坐标取值可以混使用，第一个取值表示水平，第二个表示垂直

7.1.5背景相关属性的连写形式

属性名：background（bg）

属性值：

单个属性值的和谐，取值之间以空格隔开

推荐：background：color image repeat position

拓展：

background image更加适用与不太重要的频繁的图片，image则用于比较重要的图片

7.2.1 元素显示模式

1.块级元素

显示特点：

1.独占一行（一行只能显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div，p，h，ul，li，dl，dt，dd，form，header，nav，footer

2.行内元素

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

a,span,b,u,i,s,strong,ins,em,del......

3.行内块元素

显示特点：
1.一行可以显示多个

2.可以设置宽高

代表标签：

input，textarea，button，select.....

特殊情况：img标签内有行内块元素特点，但是chrome调试工具中显示结果是inline

7.2.2 元素显示模式的转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

 注意点：p标签中不要嵌套div，p，h等块级元素

a标签内部可以嵌套任意元素，除了他本身