【css基础学习二之标签显示模式转换以及css优先级权重和css背景的使用】

css
1.标签显示模式(display)

块级元素：每个块级元素通常会独自占一行或者多整行。常见的块级元素有
<h1>~<h6> <p> <div> <ul> <ol> <li>

行内元素:仅仅靠自身的字体大小和图像尺寸来支持结构。常见的行内元素有
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素：在行内元素有几个特殊标签<img/> <input/> <td> 可以对它们设置宽高和对齐属性

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换
块转行内 display:inline;
行内转块 display:block;
块、行内元素转行内块 display:inline-block;

2.css三大特性
层叠性 （就近原则）
继承性  （子辰父业）
优先级：涉及权重问题 行内样式权重很高 权重相同时遵循就近原则
        !important 该命令被赋予最大的优先级

每个标签贡献值        0,0,0,1
每个类，伪类贡献值    0,0,1,0
每个id贡献值          0,1,0,0
每个行内样式贡献值    1,0,0,0
每个!important贡献值  ∞无穷大

权重是可以叠加的
div ul li ------>0,0,0,3
.nav ul li------>0,0,1.2
a:hover ------->0,0,1,1
.nav a-------->0,0,1,1
#nav p------>0,1,0,1

注意：数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 
      所以不会存在10个div能赶上一个类选择器的情况。

3.css背景
 background-color            背景颜色
 background-image         背景图片地址
 background-repeat         是否平铺
 background-position         背景位置

 background-image: none | url(url)

 background-repeat: repeat | no-repeat | repeat-x | repeat-y
  repeat: 背景图像在纵向和横向上平铺（默认）
  no-repeat:背景图像不平铺
  repeat-x:背景图像在横向上平铺
  repeat-y:背景图像在纵向平铺

 background-position : position || position
 position: top | center | bottom | left | center | right

1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;   
则 15px 一定是  x坐标   top是 y坐标。

背景透明
 background :rgba(0,0,0,0.3);

文字垂直居中：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。