CSS的元素显示方法（块、行内元素）及背景属性

CSS的元素显示方法
元素显示模式：即元素（标签）以什么方式进行展示
1.块元素
常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型
特点：

比较霸道，自己独占一行
高度，宽度，外边距，内边距都可以控制
宽度默认为容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或块级元素
1.文字类的元素不能使用块元素
2.<p>标签主要用于存放文字，因此<p>元素内不能放块级元素，尤其不能放<div>
3.同理，<h1>-<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.行内元素
常见的行内元素有

<a>,<span>,<i>,<em>,<strong>,<b>,<del>,<s>,<ins>,<u>,等

<span>是最典型的行内元素，也称为内联元素

特点：

相邻行内元素在一行上，一行可以显示多个
高，宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
1.链接内不能再放链接
2.特殊情况下<a>内可以放块级元素，但给<a>转换一下块级模式会更安全

3.行内块元素
<img>,<input>,<td>等几个特殊的元素，同时具有块元素和行内元素的特点，称为行内块元素。

特点：

和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙，一行可以显示多个
默认宽度就是它本身内容的宽度
高度，宽度，外边距，内边距都可以控制
4.元素显示模式转换
即一个模式的元素需要另一个模式的特性：display:block/ inline /inline-block
例：想增加<a>的触发范围：
 

    a {
      width: 150px;
      height: 50px;
      background-color: green;
      text-decoration: none;
      color: blue;
      tab-size: 40px;
      /* 把行内元素 a 转换为块级元素 */
      display: block;
    }

div {
      width: 150px;
      height: 50px;
      background-color: brown;
      /* 把块级元素转换为行内元素 */
      display: inline;
    }

span {
      width: 150px;
      height: 50px;
      background-color: cadetblue;
      /*把行内元素转换为行内块元素 */
      display: inline-block;
    }

总结：
行内元素转换为块级元素 ： display: block;
块级元素转换为行内元素：display: inline;
行内元素转换为行内块元素 ：display: inline-block;

让div行高等于链接高度就可以实现文字垂直居中
例：

div{line-height: 40px; }
a{ height: 40px;}

CSS的背景属性
背景属性可以设置颜色，图片，背景平铺，背景位置图片位置，背景图像固定等

背景颜色
background-color定义了背景颜色
一般元素默认的背景颜色值为：transparent（透明）

背景图片
背景图片易于控制位置，因此一般用背景来做而不是插入图片
语法：

background-image: url(路径);

背景图片不平铺 （一般默认为repeat(平铺））

   background-repeat: no-repeat;

背景可以设置颜色也可以设置图片，但图片会压住背景颜色

背景图片位置

语法：
background-position: x y;
例：

/* 图片位置：水平居中，垂直靠上 */
      background-position: center top;

-可以是精确单位：20px 50px（此时有顺序），也可为方位名词：center top（无顺序），也可为混合：50px center（此时有顺序）

若指定的两个值都是方位名词，则两个值前后顺序无关，例如Lleft top 和top left效果一致
若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
背景图片固定
设置背景图片是否固定或者随着页面其他部分滚动
background-attachment:属性值：fixed（固定）/scroll（滚动）
默认为scroll

背景复合写法
伪类便于书写，可将属性合并简写在同一个属性background中
书写一般顺序为：背景颜色 背景图片地址 背景平铺 背景图像滚动 设置图片位置各个属性间用空格隔开

背景色半透明
 

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

最后一个值在0-1之间
此法是设置背景色半透明，盒子内容不会受到影响