CSS重要知识回顾及案例(持续更新中)

将行内元素转换为块级元素

a {
   
    /* 可以使用Emmet语法(快捷语法)*/
  width: 150px;
  height: 50px;
  /* 设置样式为无修饰 */
  text-decoration: none;
  /* 把行内元素a转换为块级元素 */
  display: block;
  /* 把块级元素div转换为行内元素 */
  display: inline;
}

文字垂直居中

当行高等于容器高度实现文字垂直居中

/* 当行高等于容器高度时字体垂直居中 */
a {
   
  height: 50px;
  line-height: 50px;
}

背景属性

背景符合语法：background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景图片：background-image:none|url(url);

注意：background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

背景平铺：background-repeat: repeat|no-repeat|repeat-x|repeat-y;

背景图片位置： background-position: x y;

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

背景图像固定(背景附着)：background-属性设置背景图像是否固定或者随着页面的其余部分滚动。

语法：background-attachment：scroll|fixed

参数值	说明
scroll	背景图像是随对象内容滚动
fixed	背景图像固定(不随页面的滚动而滚动)

背景色半透明：background：rgba(0,0,0,0.3)

CSS三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

层叠性

层叠性定义：相同的选择器设置了相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

样式冲突：遵循就近原则

继承性

子标签会继承父标签的某些样式，如文本颜色和字号

<style>
  /* 父类样式 */
	div {
     
		color: red;
        /* font: 文字大小/行高 字体 */
        font： 12px/24px 'Microsoft YaHei';
        /* 1.5相当于当前元素文字大小的1.5倍 */
        font： 12px/1.5 'Microsoft YaHei';
		font-size: 14px;
	}
</style