CSS 的元素显示模式 及 背景图片相关知识

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);