元素显示模式
什么是元素显示模式
元素显示模式就是元素（标签）以上面方式进行显示，比如div标签独占一行，span标签可以在一行内与其他元素共存。
网页的标签非常多，都有各自的布局特点，但是总体而言，它们被分为三大类：行内元素，块级元素以及行内块元素。
块级元素 block
常见的块级元素有：<h1> -- <h6>，<p>，<ul>，<ol>，<li>，<div>等，其中div是最典型的块级元素。
块级元素的特点：
1.独占一行
2.可以控制宽高，内外边距
3.宽度默认值为父级元素的100%
4.内部可以放其它行内元素或块级元素
注意：文字类的块级元素，不能存放其它块级元素，否则会发生错误。
示例：
我们将一个div放在了p内部，在显示上，div独占一行，把上下的文字挤到两边，绿色的盒子是p，红色的区域是div，好像div在p的内部。
但是当我们打开调试会发现，浏览器自动为你的代码添加了两个p标签，即被我绿色框出来的p，这样div就在p的外面了。
所以这种文字类的块级元素内部不能存放块级元素。
同理h1 - h6也不可以放块级元素。
行内元素 inline
常见的行内元素有：<a>，<strong>，<b>，<em>，<del>，<span>等，其中span是最典型的行内元素。
行内元素的特点：
1.一行内可以放下多个行内元素
2.无法设置宽高，设置了也无效
3.宽高由其内容撑开
4.只能容纳文本或者其它行内元素
效果如下：
蓝色区域就是这个行内元素span的宽高，可以发现，直接设置的宽高是无效的，最终宽高由内容决定。
注意：a标签内部不能放a标签，但是a标签内可以放块级元素，是特殊的行内元素。
行内块元素 inline-block
行内块元素，是前两者的结合体，常见的行内块元素有：<img/>，<input/>，<td>等。
行内块元素特点：
1.一行内可以有多个行内块元素
2.默认宽度是其本身宽度（块级的默认快读是父亲的宽度）
3.可以控制宽高和内外边距
但是行内块元素的在同一行显示，和行内元素是略有区别的。
行内块元素在一行内时，两个元素之间会有一点空隙，而行内元素则是紧紧挨着的。
元素显示模式对比
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽高 | 父级容器的100% | 可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽高 | 由内容撑开 | 只能容纳文本或者其它行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽高 | 由内容撑开 | ---- |
元素显示模式转换 display
CSS提供了一个属性display，用于转换元素的显示模式：
| 属性值 | 对应元素 |
| block | 转化为块级元素 |
| inline | 转化为行内元素 |
| inline-block | 转化为行内块元素 |
示例：
可以看到，经过转化后，span也可以独占一行了。
背景
背景颜色 background-color
background-color定义了元素的背景颜色，其一般情况下是默认值：background-color: transparent;此属性值代表透明。
属性值：背景颜色的属性值有四种形式，分别为关键字形式，rgb形式，rgba形式，十六进制形式：
| 表示方式 | 属性值 |
| 关键字 | red,green,blue等，直接指定颜色 |
| rbg | rgb(255,255,255) 或 rgb(100%,100%,100%) |
| rbga | rgba(255,255,255,0.5) |
| 十六进制形式 | #ffaabb |
rgb形式
此处的rgb分别代表red，green，blue三种颜色，每个颜色的取值为0-255。然后将三种颜色按照比例混合，就得到了你的目标颜色。比如rgb(50,100,150)，就是将红色，绿色，蓝色按照50 ： 100 ：150的比例混合得到的颜色。
rgba形式
相比于rgb形式，rgba形式多了一个a属性，这里的a代表透明度，取值范围为0-1。当a取值为1，代表不透明；当取值为0，代表完全透明。a值可以省略，省略是就是rgb形式，此时a默认值为1。
十六进制形式
16进制，其实也是和rgb形式一致的，十六进制的表示形式有六位值，其中每两位表示一个颜色。比如#112233中，11代表red的比例，22代表green的比例，33代表blue的比例。
为什么可以这样做呢？在rgb形式中，每个颜色的取值范围是0-255，而两位16进制数字可以代表0-255的十进制数字，所以从十六进制的00-ff，刚好对应0-255。所以十六进制表示形式和rgb形式本质上是一致的。
背景图片 background-image
background-image属性描述了背景图像，实际开发常见于logo或者一些装饰性的小图片，以及超大的背景图片，优点是非常便于控制位置，而且不占用空间。
属性值：
| 属性值 | 作用 |
| none | 无背景图片 |
| url | 指定背景图片的路径 |
背景平铺 background-repeat
如果要在HTML页面上对背景图像进行平铺，可以用background-repeat属性。
属性值：
| 属性值 | 作用 |
| repeat | 背景图片在横向和纵向平铺（默认值） |
| no-repeat | 背景图像不平铺，只显示一次 |
| repeat-x | 只在横向平铺 |
| repeat-y | 只在纵向平铺 |
示例：
这是默认情况下，在横向和纵向同时平铺：
这是no-repeat情况下，背景图片只重复一次：
这是repeat-x，只在横向平铺：
这是repeat-y，只在纵向平铺：
背景图片位置 background-position
background-position可以改变图片在背景中的位置，其有两种参数模式：x轴和y轴的坐标，方位名词。
方位名词包括：center，top，bottom，left，right。
参数是方位名词情况下：
1.如果设置一个方位名词，则第二个方位默认居中
2.如果设置俩个方位名词，则前后两个值的顺序无关，比如left top和top left的含义相同
3.top和bottom最多设置一个，left和right也最多显示一个
示例：
如果参数是精确单位：
1.如果参数是精确坐标，第一个属性值一定是x坐标，第二个一定是y坐标
2.如果只指定一个坐标值，则该值默认为x坐标，y值默认居中。
背景附着 background-attachment
background-attachment可以设置背景图像是否随着页面滚动。
属性值：
| 属性值 | 作用 |
| scroll | 背景图像随页面滚动 |
| fixed | 背景图像固定，不随页面滚动 |
fixed的效果如下：
背景复合写法 background
为了简化背景属性的代码，我们可以将这些属性简写在同一个属性background上。
当使用简写属性时，没有固定的顺序，但是一般习惯约定顺序为：
background: 背景颜色 背景图片 背景平铺 背景附着 背景位置;
