CSS的元素显示模式及背景

CSS的元素显示模式

元素的显示模式就是元素（标签）以什么样的方式进行显示，了解他们的特点可以更好的布局网页。html元素一般分为块元素和行内元素两种类型。
1.块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素.
块级元素的特点：

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

需要特别注意的是：文字类元素内不能使用块级元素，<p>标签内主要存放文字，因此<p>标签内不能存放块级元素，特别是<div>。

2.行内元素
常见的行内元素有<span>、<i>、<strong>、<a>、<em>、等，其中<span>是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：

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

需要注意的是：链接里面不能再放链接，特殊情况<a>链接里面可以放块级元素，但是要给他转换一下块级模式。

3.行内块元素
一行可以放多个行内块元素，<img/>、<input/>、<td>同时具有块元素以及行内元素的特点。
行内块元素的特点：

• 和相邻行内块元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个
• 默认高度、宽度是他本身的高度、宽度
• 高度、宽度、内外边距都可以控制

4.元素显示模式的转换
一个模式的元素需要另一个模式的特性，如想要增加<a>标签的触发范围，就要把他转换为块元素。
1.转换为块元素：display:block
2.转换为行内元素：display:inline
3.转换为行内块元素：display:inline-block

CSS的背景

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

   background-color: blue;

一般情况下背景颜色默认值为transparent(透明的）。

2.背景图片
描述了元素地背景图像，用于小的装饰性地图片以及大的背景图片，非常便于控制位置。

    background-image: url();

• 用之前要给盒子定义宽度和高度，否则将不会显示
• 默认值为none无背景图
• url旁边地括号里面是图片路径

3.背景平铺
用于设置背景图片是否平铺

    backgroud-repeat: repeat(平铺）/no-repeat（不平铺）/repeat-x（沿着x轴平铺）/repeat-y（沿着y轴平铺）;

4.背景图片的位置
可以改变图片在背景中的位置

  background-position: x y;

参数x,y可以使用方位名词或精确单位

参数值	说明
length	百分数/由浮点数字和单位标识符组成的长度值
position	top/center/bottom/left/right等方位名词

注意：
1.参数是方位名词

• 如果指定的两个值都是方位名词，则两个词前后顺序无关
• 如果只指定一个方位名词，另一个词省略，则另一个词默认居中对齐

2.参数都是精确单位

• 第一个必须是x坐标，第二个是y坐标
• 如果只指定其中一个值，则另一个值默认垂直居中

3.混合单位

• 第一个值是x坐标，第二个值是y坐标

5.背景图像的固定（背景附着）
设置背景图像是否固定或随着页面其他部分滚动，后期可以制作视差滚动效果

background-attachment: scroll/fixed;

scroll:背景图像是随内容滚动的
fixed:背景图像固定

6.背景的复合写法
书写顺序：
background: color image repeat attachment position

7.背景颜色半透明
指盒子背景半透明，盒子里面的内容不受影响

background:rgba(0,0,0,0.2);

rgba: red green blue alpha(透明度，范围0~1）