background 可以设置 背景颜色、背景图片、定位等 ；
而background-color 只能设置 背景颜色 ，设置时仅仅改变了背景色。

可以理解为background-color 是background的一个子属性

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

1、font-style可以设置字体样式，并且有种3设置方式。

2、正常字体为normal,也是font-style的默认值。

3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。

4、oblique为设置倾斜的字体，强制将字体倾斜

总结下继承： 在默认情况下，CSS的继承规则如下 1.后面的覆盖前面的。 Q:p {color:red;}  P {color:blue;} 因为蓝色在后面，相当于覆盖了红色，所以显示应该是蓝色的。

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

流动模型（Flow）-默认的网页布局模式

• 块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布（默认）

• 块状元素的宽度都为100%（默认）

• 块状元素会以行的形式占据位置
  

justify-content: flex-start 起点对齐
| flex-end 右对齐
| center  居中
| space-between 两端对齐
| space-around;每个项目间隔相等

Relative与Absolute组合使用

大盒装小盒relative为父级

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化,应用导航栏

position:relative（表示相对定位）

相对于以前的位置移动

position:absolute(绝对定位)

相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

为元素添加圆角

div{border-radius: 20px 10px 15px 30px;}

也可以这么写

div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}

如果四个圆角都为10px;可以这么写：

div{ border-radius:10px;}

如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：

div{ border-radius:10px 20px;}

当设置圆角效果值为元素宽度一半时，显示效果为圆形，代码如下：

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

也可以写为百分比50%

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

像素（px）作为单位。

如果 font-size 为 18px，那么 1em = 18px。

p{font-size:12px;text-indent:2em;}

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

 text-align:center;

left  right

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现，如下面代码：

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>