CSS学习（五）：元素显示模式和元素背景设置

原文链接（csdn可能更新较慢）：CSS学习（五）：元素显示模式和元素背景设置

1. CSS的元素显示模式

1.1 什么是元素显示模式

什么是元素的显示模式？元素的显示模式就是元素（标签）以什么方式进行显示，比如div 独占一行，一行可以放置多个span。HTML元素一般分为两大类块元素和行内元素，块元素会独占一行，行内元素可以一行放置多个。

1.2 块元素

常见的块元素有h1-h6，p ，div ，ul，ol，li等，其中div 标签是最典型的块元素。块元素有以下特点：

• 独占一行。
• 高度，宽度，外边距以及内边距都可以控制。
• 宽度默认是容器（父级元素）的100%。
• 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

• 文字类的元素不能使用块级元素
• p 标签主要用于存放文字，因此p里面不能放块级元素
• 同理，h1-h6 等都是文字类元素，里面也不能放其他块级元素。

1.3 行内元素

常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等，其中span标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

• 相邻的行内元素可以一行显示多个。
• 高度和宽度直接设置无效。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本和其他行内元素。

注意：

• 链接里面不能再放链接。
• a里面可以放块级元素，但是给a转换一下块级模式最安全。

1.4 行内块元素

img，input，td标签同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。行内块元素的特点：

• 和相邻行内元素（行内块元素）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）。
• 默认宽度就是它本身内容的宽度（行内元素特点）。
• 高度，行高，外边距以及内边距都可以控制（块级元素特点）。

1.5 元素显示模式总结

1.6 显示模式的转换

简单来说就是一个模式的元素需要另外一种模式的特性，这时我们就需要显示模式的转换。比如说，a 标签的宽度就是其文本内容的宽度，也就是说其触发范围（点击跳转）也就是其文本内容的宽度，当我们想扩大a标签的触发范围时，可以将其转换成块状元素，增大其宽度和高度。

行内->块级：

a {
    display: block;
}

块级->行内：

a {
    display: inline;
}

行内/块级->行内块元素：

a {
    display: inline-block;
}

2. CSS 的背景

通过CSS的背景属性，可以给页面元素添加背景样式。背景属性 可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

2.1 背景颜色

background-color 定义元素背景颜色。

background-color: 颜色值;

background-color 的默认值是transparent，表示透明，我们也可以通过预设值，RGB，十六进制等方式为背景颜色指定一个颜色。

2.2 背景图片

background-image 属性描述了元素的背景图片，实际开发中常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置。

background-image: none|url(图片的url);

2.3 背景平铺

一般而言，当背景图片小于元素的宽度或高度时，背景图片会在沿着某一方向不断重复。如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

默认情况时平铺的（repeat），可以设置成不平铺（no-repeat），沿着x轴平铺（repeat-x），沿着y轴平铺（repeat-y）。

页面元素既可以添加背景图片也可以添加背景颜色，背景图片会覆盖背景颜色。

2.4 背景图片位置

background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。

1. 参数是方位名词：
   • 若两个指定的两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left 效果一致。
   • 如果指定了一个方位名词，另一个省略，则第二个值默认居中对齐。
2. 参数是精确单位：
   • 如果参数是精确坐标，第一个肯定是x坐标，第二个肯定是y坐标。
   • 若只指定一个数值，则另一个必定是y轴居中。
3. 参数是混合单位：
   • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

2.5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可以制作视觉滚动的效果。

background-attachment: scroll | fixed;

2.6 背景属性复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background 中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯的约定顺序为：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置。

body {
    background-image: url(img.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-color: black;
}

可以简写成：

body {
    background: transparent url(img.jpg) repeat-y fixed top;
}

2.7 背景色半透明

CSS3 提供background: rgba(r,g,b,a) 属性设置图片透明度。

例如：

background: rgba(0,0,0,0.3)

2.8 背景总结