css第四天

今天学完之后，感觉乱乱的，但是坚持就是胜利，冲冲冲！！！
一.emmet 语法生成 html 标签
1 N, 连续生成 N 个 ,div5
2 父>子, 生成父子关系结构, ul>li5
3 兄+弟 ,生成兄弟关系结构 , h1+div2+h4+p*2
4 .class / #id , 生成带 class 或 id 的 div , .red / #app

tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
设置宽高：
w100 → width: 100px;
h200 → height: 200px;
二.复合选择器（重点）
1.复合选择器分为：后代、子代、并集、伪类
后代选择器：可以选择父元素中的子元素；
语法格式：选择器1 选择器2 {样式声明;}
后代选择器的选择器之间使用空格分开，后代选择器中的元素可以是任一一种基础选择器。
2.子元素选择器：选择某个元素最近一级的子元素（亲儿子）
语法格式：选择器1 > 选择器2 {样式声明;}
子代选择器的选择器之间使用 > 分开。
3.并集选择器：集体声明 —— 选择多组标签，同时设置相同的样式
语法格式：选择器1,选择器2 {样式声明;}
并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号
并集选择器通常会竖式排列选择器，提高代码的可读性
4.链接伪类选择器(上)
a:link 选择所有未被访问的链接；
a:visited 选择所有已经被访问的链接；
a:hover 选择鼠标指针位于其上的链接；
a:active 选择激活链接（鼠标按下未抬起的链接）；
5.链接伪类选择器(下)
链接伪类选择器的书写顺序 l v h a；
因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同，在实际开发中，需要给 a 标签单独设置样式；

• focus 伪类选择器
  实例：input:focus
  7.交集选择器…
  三. 元素的显示模式 —— 布局认知（重要！！！）
  1.块元素 —— block
  特点：

• 独占一行

• 可以设置宽度、高度、外边距、边框和内边距

• 宽度默认是父级容器的宽度

• 可以存放其他行内元素和块级元素
  注意：开发时不要在文本类元素中添加其他元素，专注于文本存放（ h1~h6 、 p ）
  常见的块元素div 、 ul 、 ol 、 li 、 h1~h6 、 p…
  2.行内元素 —— inline
  特点：

• 相邻行内元素在一行显示，一行多个

• 给行内元素设置宽高是无效的

• 默认宽度是内容的宽度（被内容撑开）

• 只能容纳文本或其他行内元素
  注意：链接不能再放链接，特殊情况的链接可以存放块级元素
  3.行内块元素 —— inline-block

• 相邻行内元素在一行显示，一行多个（行内元素特点）

• 默认宽度就是本身内容的宽度（行内元素特点）

• 可以设置宽度、高度、外边距、边框和内边距（块级元素特点）
  目前所学的行内块元素：img 、 input 、 td
  4.显示模式的转换（重要）
  转换场景：

• 让行内元素具有宽高：把行内元素转换成块元素或者行内块元素

• 让块元素一行显示：把块元素转换成行内块元素
  转换代码：

• display: block 转换为块元素

• display: inline-block 转换为行内块元素

• display: inline 转化为行内元素（使用较少）
  补充：在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。

• 单行文字垂直居中
  将 line-height 设置为盒子的高度。
  四. 背景图片
  一般情况下元素背景颜色是 transparent 透明的
  1、 背景平铺

• repeat 默认，水平垂直平铺

• no-repeat 不平铺

• repeat-x 水平平铺

• repeat-y 垂直平铺
  2、背景位置-方位名词
  background-position (背景位置)
  水平方向： left / right / center
  垂直方向： top / bottom / center
  水平居中：background-position: center;
  3、背景位置-精确单位
  顺序：第一个值一定是 x / 第二个值一定是 y
  如果只指定了一个值，则是x 方向的，另一个方向垂直方向居中显示
  4、背景位置-混合单位
  顺序同3
  5、背景固定
  background-attachment
  可以制作视差滚动效果

• scroll 默认，背景图像跟随滚动

• fixed 背景图像固定
  6、 背景属性复合写法

font: font-style font-weight font-size/line-height font-family

没有顺序，但是推荐顺序是：

 background: color image repeat attachment position

冲就完事了！