CSS的元素显示模式以及背景颜色

一.CSS的元素显示模式

1.元素显示模式的概念
作用：
了解元素显示模式的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如< div >自己占一行，又如一行可以放多个< span >。
HTML元素一般分为块元素和行内元素两种。

2.行内元素
常见的元素：

<a>  <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
//其中<span>是最典型的行内元素

行内元素的特点：
1）相邻行内元素在一行上，一行可以显示多个
2）高，宽直接设置是无效的
3）默认宽度就它本身内容的宽度。
4）行内元素只能容纳文本或其他行内元素。
注意：链接里面不能再放链接，特殊情况下链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全。

3.行内块元素

<img/> <input/> <td>

特点：
1）和相邻行内元素（行内块）在同一行上，但是他们之间会有空白缝隙。一行可以显示多个。
2）默认宽度就是它本身内容的宽度。
3）高度，行高，外边距以及内边距都可以控制。
即有行内元素特点和块级元素特点
4.元素显示模式的转换
1）转换为块元素：display：block；
2）转换为行内元素：display：inline；
3）转换为行内块：display：inline-block；
5.让单行文字垂直居中的方法
让文字的行高对于盒子的高度，即可以完成该操作

二.CSS的背景颜色

1.背景颜色

background-color：颜色值;

一般情况下颜色背景颜色默认值是transparent（透明），可以手动指定背景颜色为透明。
2.背景图片
background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

background-image：none | url（url）;

参数
none 无背景图
url 使用绝对或者相对地址指定的背景图像
3.背景平铺

background-repeat: 参数   ;

参数
repeat : 背景图像在纵向和横向上平铺（默认）。
no-repeat： 背景图像不平铺。
repeat-x：背景图像在横向上平铺。
repeat-y:背景图像在纵向平铺。