css 的元素显示模式
块元素
- 常见的块元素举例：
<h1>~<h6>
<div>
<p>
<ul>
<ol>
<li>
…
块级元素的特点：
- 自己独占一行；
- 高度、宽度、外边距、内边距 都可以控制；
- 宽度默认是父级容器宽度的 100%；
- 是一个容器及盒子，里面可以放行内元素或块级元素；
注意：
文字类的容器内不能使用块级元素，例如： <p> 中不能包含 <div>
行内元素
行内元素也称内联元素，常见的行内元素有：
<a>
<strong>
<b>
<em>
<i>
<span>
…
行内元素的特点
- 相邻行内元素在一行上，一行可以多个；
- 宽高直接设置是无效的；
- 默认宽度就是它本身内容的宽度；
- 行内元素只能容纳 文本 或 其他行内元素；
注意
- 链接中不能包含链接；
- 链接中可以包含块级元素，但是把链接转换一下块级模式最安全；
行内块元素
在行内元素中：
<img/>
<input/>
<td>
同时具有块级元素和行内元素的特点，故有些资料称之为 行内块元素。
行内块元素的特点
- 行内块元素一行可以多个，中间有空白缝隙；
- 默认宽度就是它本身内容的宽度；
- 高度、宽度、外边距、内边距 都可以控制；
显示模式的转换
转换成 块级元素：display: block;
转换成 行内元素：display: inline;
转换成 行内块元素：display: inline-block;
背景图片相关知识
在 CSS文件中，选择想要放入背景颜色的位置。
背景图片引用
background-image: url(图片地址)；
背景平铺
背景图片默认是平铺的。
repeat：平铺
repeat-x：沿着 x 轴平铺
repeat-y：沿着 y 轴平铺
no-repeat：不平铺
例如：
background-repeat: no-repeat;
背景位置
背景位置的设置中有两个参数。
1、方位名词方法：
center、top、bottom、left、right
前后顺序无关；
如果只写了一个，另外一个默认居中；
例如：
background-position: center left;
2、精确单位方法
第一个一定是 x 轴的坐标，第二个一定是 y 轴的坐标；
如果只写了一个，另外一个默认居中；
例如：
background-position: 20px 50px;
3、混合单位方法
第一个一定是 x 轴的坐标，第二个一定是 y 轴的坐标；
如果只写了一个，另外一个默认居中；
例如：
background-position: 20px center;
背景固定
背景图片默认滚动。
scroll：滚动
fixed：固定
例如：
background-attachment: fixed;
背景属性的复合写法
当使用简写属性时，没有特定的书写顺序，一般习惯的约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
例如：
background: black url(图片地址) no-repeat fixed center left;
背景色半透明
css3 新增，IE9 及以上适用
rgba 和 rgb 相似，都是用三个参数来确定颜色，不同的是，rgba 多了一个控制透明度的第四个参数；
在 rgba 中，第四个参数的取值范围从 0 到 1，代表着透明度。
background: rgba(0, 0, 0, 0.3);
或省略第四个参数的 0：
background: rgba(0, 0, 0, .3);