一、元素显示模式的转换：
转换为块级：display:block;
转换为行内：display:inline;
转换行内块元素：display:inline-block;
二、垂直居中原理：
文字行高=盒子高度 文字垂直居中
文字高度>盒子高度 文字偏下
文字高度<盒子高度 文字偏上。
三、背景和背景图
1.背景颜色：backgroud-color
2.背景图：background-image
3.图片和背景图的区别：
背景图一般用于超大或者超小的图片；背景图片不占有位置，盒子里面的文字可以压在背景图片上面。
img 用于产品图，便于替换更改，而且img语义更加强烈，更容易被搜索引擎找到。
元素可以同时设置背景颜色和背景图片，只不过背景图片会压在背景颜色上面。
4.背景平铺
backgroud-repeat:repeat(默认)。
backgroud-repeat:no-repeat 不平铺。
backgroud-repeat:repeat-x 沿着x轴平铺。
backgroud-repeat:repeat-y 沿着y轴平铺。
5.背景图片位置
background-position:right/left/top/bottom/(x y)坐标。
/* 注意：right center 和center right 是等价的，跟顺序没有关系 但是如果两个值都是X和Y值的话，第一个必须是X值，第二个才是Y值。*/
background-position: right center ;
/* 注意：此时图片一定是水平居右显示的，y轴默认方位为center */
background-position: right;
/* 注意：此时top 是y轴顶部对齐，x轴水平居中 */
background-position: top;
注意：坐标值和方位名词可以混合搭配使用。
6.backgroud-attachment:scroll (背景图片是随对象内容滚动 默认）
backgroud-attachment:fixed (背景图像固定）。
7.背景的复合写法：
没有特定的书写顺序，一般习惯按以下顺序写：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
注意：不同属性之间用空格隔开。
8.盒子的背景颜色半透明：
backgroud:rgba(0,0,0,0.3);
0.3 表示为透明度，取值范围在0-1之间，取值越大颜色越深，透明度越低。
如：黑色透明：rgba (0,0,0,0.3)
白色透明：rgba (0,0,0,0.3);
四、CSS的三大特性：
1.层叠性：
同样的选择器，同样的属性，前面的属性会被后面的属性层叠掉。
层叠性需要注意的点：
<style>
div {
width: 120px;
height: 58px;
background:black url(bg1.png) no-repeat center;
/* background-image: url(bg1.png); */
/* background-color: blue;
background-image: url(bg1.png); */
}
div {
/* 注意：backgroud 缩写写法可以层叠掉上面所有的背景相关的属性 */
/* background: url(bg2.png) no-repeat center; */
/* 这个写法可以层叠掉background复合写法里面的背景图片属性 */
background-image: url(bg2.png);
}
</style>
<div></div>
2.继承性：
子元素可以继承父元素的某些样式（text-,font-,line-这些开头的可以继承，以及color的属性）。
3.优先级：
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
！important 重要的 无穷大
div {
color: red !important;
}
继承的权重为零：
<style>
#father {
color: red !important;
}
/* p 继承的权重为零 */
/* 所以以后我们看标签到底执行哪个样式，就先看这个标签有么有直接被选出来 */
p {
color: pink;
}
</style>
<div id="father">
<p>你还是很好看</p>
</div>
此时p标签执行pink 颜色。
注意 a标签的特殊情况：
<style>
* {
color: black;
}
/* a 标签本身就会有一个颜色属性，但是通配符选择器的权重要大于 a 标签默认的属性的权重，所以a 标签执行通配符里面的颜色属性。 */
</style>
<div>
<a href="#">可爱到膨胀</a>
</div>
