CSS（day06 AND day07）

伪类选择器

:link :visited :hover :active :focus
① 目标伪类（:target {}）
在锚点被激活时, 让锚点元素应用的样式

② 结构伪类

1. 选择器:first-child {}
   匹配的元素是父元素的第一个元素, 同时, 这个元素符合选择器的元素

2. 选择器:last-child {}
   匹配的元素属于其父元素的最后一个子元素, 同时, 这个元素符合选择器的元素

3. 选择器:nth-child(n) n 从 1 开始

③ :empty 匹配内部没有任何元素的标签, 包括文本, 空格, 回车, 都不能有

④ :only-child 匹配属于其父元素的唯一子元素

⑤ 否定伪类 :not(selector)

⑥ 伪元素选择器

1. 匹配元素的首行首字符
   :first-letter 或者 ::first-letter

2. 匹配元素的首行
   :first-line 或者 ::first-line 当首行与首字符发生冲突, 应用首字符的样式

3. 匹配用户选择的文本（这里必须是双冒号）
   ::selection 这里的样式只能修改文本颜色 和背景颜色

4. 伪元素选择器, 内容生成
   可以设置这个元素的显示方式, 使用 content 属性设置这个元素的文本内容
   content中 只能给 字符串 或 图片URL
   生成的是一个元素, 可以设置任何的元素样式
   :before 或者 ::before 代表的是内容区域中 最靠前的部分
   :after 或者 ::after 代表的是内容区域中 最靠后的部分

   伪元素添加内容可以解决的问题：
   ① 外边距重叠：
   #d1::before {
content: "";
display: table;
}

   ② 解决高度坍塌：
   .clearfix::after {
content: "";
display: block;
clear: both;
}
   
   

弹性布局（必须会, 很重要）

1. 什么是弹性布局
   弹性布局, 是一种布局方式
   主要解决的是某个元素中子元素的布局方式
   让页面布局更加灵活

2. 弹性布局专有的名词解释
   
   
   

   ① 容器

   要发生弹性布局的子元素, 他们的父元素, 成为容器 就是 display: flex; 的那个元素

   ② 项目

   要发生弹性布局的子元素们, 叫项目 就是设置了 display: flex; 的元素的子元素

   ③ 主轴

   项目们排列方向的一根轴, 称之为主轴, 如果项目们按照水平排列, 那么主轴就是 X 轴, 如果项目按照垂直排列那么主轴就是 Y 轴

   项目们排列的顺序, 称为主轴的起点和主轴的终点

   ④ 交叉轴

   与主轴垂直的一根轴, 叫做交叉轴

   项目在交叉轴的排列顺序被称为 起点 和 终点

3. 语法
   将元素设置为弹性容器之后, 他们的子元素, 都变成弹性项目
   display: flex; 将块级元素设置为容器
   display: inline-flex; 将行内元素设置为容器

   注意：

   元素设置为 flex 容器后, 容器的 text-align, vertical-align 失效

   项目 float, clear 失效

4. 容器的属性

   ① 设置主轴的方向 flex-direction
   取值:
   row 默认值, 主轴是 x 轴, 主轴起点在左端
   row-reverse 主轴是 x 轴, 主轴起点在右端
   column 主轴是 y 轴, 主轴起点在顶部
   column-reverse 主轴是 y 轴, 主轴起点在底部

   ② 设置项目的换行 flex-wrap
   取值:
   nowrap 默认值, 空间不够时, 不换行, 项目会自动缩小
   wrap 空间不够时, 项目不缩小, 换行
   wrap-reverse 项目换行, 并反转（本来往下去, 但是项目上去了）
   

   ③ flex-direction 和 flex-wrap 两个属性的简写
   取值 flex-flow: direction wrap;

   ④ 定义项目在主轴上的对齐方式 justify-content
   取值:
   flex-start 默认值, 主轴起点对齐
   
   flex-end 主轴终点
   
   center 主轴中心
   
   space-around 项目的 margin 相等, 两端有空白
   
   space-between 两端对齐, 项目与项目之间的空白相等, 两端无空白
   
   space-evenly 项目间隔空白相等, 两端有空白
   

   ⑤ 定义项目在交叉轴上的对齐方式 align-items
   取值:
   beaseline 基线对齐 同 flex-start 类似
   flex-start 默认值, 交叉轴起点对齐
   
   flex-end 交叉轴终点对齐
   
   center 交叉轴中间对齐
   
   stretch 项目不写高, 充满容器整个高度
   

5. 项目属性

   设置在项目中的属性, 只会影响当前项目
   不影响其他项目

   ① 项目顺序
   order 定义项目排列的顺序, 值越小。越靠近起点。默认值都为 0
   取值：无单位的数字
   
   

   ② flex-grow（默认值为 0）
   如果容器有足够大的剩余空间, 项目将按比例放大（比例不准确）
   取值：无单位数字 默认值为 0
   
   

   ③ flex-shrink（默认值为 1）
   如果容器空间不够, 项目将按照比例缩小（比例不准确）
   取值: 无单位数字 默认值 1, 取值越大, 缩小的越快
   
   

   ④ align-self
   定义某一个项目在交叉轴上的对齐方式, 不影响其他项目
   取值:
   flex-start 默认值, 交叉轴起点对齐
   flex-end 交叉轴终点对齐
   center 交叉轴中间对齐
   baseline 基线, 同 flex-start 类似
   stretch 项目不写高, 充满容器整个高度
   auto 使用 align-items 定义的值
   
   

css hack

由于不同的浏览器对 css 的解析认知是不同的, 会导致同一份 CSS 在不同的浏览器生成的页面效果不同

我们要针对不同的浏览器写不同的 css 代码
这种写不同 css 代码的过程, 就叫 css hack

前缀	内核
-webkit-	Webkit
-ms-	Trident
-moz-	Gecko
-o-	Blink

转换（重点）

1. 什么是转换？
   改变元素在页面的 位置、大小、角度、形状
   2D 转换, 只在 x 轴和 y 轴上发生转换
   3D 转换, 增加了 z 轴

2. 转换属性 transform
   取值：

   none 默认值, 无任何转换

   转换函数 transfrom-function

   transform-function:

   位移 位移 旋转 放大 倾斜 3D转换

3. 转换原点 transform-origin
   转换原点会影响元素旋转时的效果
   取值：

   px 为单位的数字
   % 百分比
   关键字 left/center/right/ top/center/bottom

4. 2D 转换
   ① 位移 transform: translate();

   1. 取值
      translate(x, y)
translateX(x)
translateY(y)

   2. 注意：
      x轴位移 正直（+）往右 负值（-）往左
      y轴位移 正直（+）往下 负值（-）往上

   ② 缩放 transform: scale(n);
   取值:
   scale(n) 同时设置 x 轴和 y 轴的比例
   scale(x, y) 分别设置 x 轴和 y 轴的比例
   scaleX(x) 单独设置 x 轴的比例
   scaleY(y) 单独设置 y 轴的比例

   注意：

   n > 1 放大

   n = 1 不变

   0 < n < 1 缩小

   -1 < n < 缩小并反转

   ③ 旋转 transform: rotate;

   如果是整数为顺时针, 如果是负数为逆时针

   注意：
   1. 旋转的这种转换会被转换原点影响效果
   2. 旋转是连同坐标轴一起旋转的, 会影响旋转之后的位移方向

   ④ 倾斜 transform: skew(deg);
   取值:
   1. skew(deg) 等同于 skewX(deg) 让元素向着 x 轴发生倾斜, 实际上改变的是 y 轴的角度, deg 的值为正值(+) 时 y 轴逆时针, deg 为负值(-) 时 y 轴顺时针
   
   2. skewY(deg) 让元素向着 y 轴发生倾斜, 实际上改变的是 x 轴的角度, deg 为正值(+)时 y 轴顺时针, deg 为正(-)值, y轴逆时针
   
   3. skew(x, y)

5. 附加面试题：
   使用 css, 让一个div 在任何情况都处于屏幕的中心？
   1、定位+位移

     <style>
       #d1 {
         width: 200px;
         height: 200px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
       }
     </style>
     <div id="d1"></div>
   

   2、定位+margin

     <style>
       #d1 {
         width: 200px;
         height: 200px;
         position: absolute;
         left: 50%;
         top: 50%;
         margin: -100px;
       }
     </style>
     <div id="d1"></div>
   

   3、flex 布局

     <style>
       body {
         display: flex;
         justify-content: center;
         align-items: center;
       }
     </style>
     <div id="d1"></div>
   

   4、定位 + calc 函数

     <style>
       #d1 {
         width: 200px;
         height: 200px;
         position: absolute;
         left: calc(50% - 100px);
         top: calc(50% - 100px);
       }
     </style>
     <div id="d1"></div>
   

   …

6. 3D 转换（3D转换都是模拟出来的）
   ① 透视距离
   模拟人的眼睛到 3D 转换元素之间的距离
   透视距离不同看到的效果会不同
   perspective: px; 此属性要写在 3D 转换元素的父元素上

   ② 3D旋转 transform
   取值
   rotateX(deg) 以 X 轴为中心轴旋转元素
   rotateY(deg) 以 y 轴为中心, 旋转元素
   rotateZ(deg) 以 z 轴为中心, 旋转元素
   rotate(x, y, z) x, y, z 取值为 0, 代表不参与旋转 x, y, z 大于 0 代表参与旋转

过渡

让 css 的值, 在一段时间内平缓的变化

1. 语法
   ① 指定参与过渡的属性
   transition-property: 取值;
   all 所有支持过渡的属性都参与
   单独写某个 css 属性, 多个属性之间用空隔开

   支持过渡的属性：

   1. 颜色属性
   2. 大多数取值为具体数字的属性
   3. 阴影, 转换
   4. visibility

   ② 指定过渡时长
   transition-durtion: s/ms;
   指定多长时间完成几次过渡操作

   ③ 过渡时间曲线函数
   trnasition-timing-function: 取值;

   1. ease 默认值, 慢速开始, 中间变快, 慢速结束
   2. linear 匀速
   3. ease-in 慢慢开始, 一直加速
   4. ease-out 快速开始, 一直减速
   5. ease-in-out 慢速开始, 慢速结束, 中间先加速再减速

   ④ 延迟执行
   transition-delay: s/ms;

   ⑤ 过渡代码编写的位置
   写在原来的选择器中, 过度效果有去有回
   写在 :hover 内的过度效果有去无回

   ⑥ 过渡的简写方式
   transition: property duration timing-function delay;

   最简方式: transtion: duration;

动画（多个过渡放到一起）

1. 关键帧
   动画执行的时间点
   在这个时间点上的样式

2. 动画的使用步骤
   ① 使用关键帧定义动画

     @keyframs 动画名称 {
       0% {  }
       ...
       100% {  }
     }
   

   ② 调用动画

   1. 选中要执行动画的名称 animation-name
   2. 动画执行时长 animation-duration
   3. 动画的时间曲线函数 .
      animation-timing-function:ease/linaer...
   4. 动画的延迟执行 animation-delay

   ③ 动画的其他属性

   1. 动画的播放次数 aniamtion-iteration-count: 取值
具体的播放次数
infinite 无限播放

   2. 指定播放的顺序 animation-direction : 取值
normal; 默认值 0%~100%
reverse; 100%~0%
alternate; 轮流播放, 奇数次正向, 偶数次逆向

   ④ 动画的简写方式
   animation: name duration timing-function delay count direction;

   最间方式 animation: name duration;

   ⑤ 动画在播放前后的显示状态 animation-fill-mode : 取值
   取值 backwards 动画播放时间内, 显示动画的第一帧
   forwards 动画播放结束之后, 停留在最后一帧
   both; 1 和 2 合体
   none 默认值, 不填充状态

   ⑥ 动画的播放与停止 aniimation-play-state: 取值
   running 开始播放
   paused 暂停播放

CSS 的优化

CSS优化的目的
① 减少服务器的压力
② 提升用户体验

1. css 优化的原则
   尽量减少 http 的请求个数
   在页面的顶部引入 css 文件
   将 css 和 js 写在单独的文件中

2. css 代码的优化
   合并样式(能写 群组, 就不单写, 能用 简写, 就不单独定义属性)
   缩小样式文件的大小(能重用的尽量重用, 减少样式的重写)
   避免出现空的 href 和 src
   代码压缩

css reset 和 normalize.css

1. 什么是 css reset
   由于不同浏览器对css默认的样式解析不同
   我们在开发css之前, 把大多数默认样式统一重置(格式化)然后再写代码。这个行为叫做 css reset

2. normalize.css
   是一种 css reset 的一种优质的代替方案

3. css reset 和 normalize.css 的区别
   css reset 太激进, 太暴力
   normalize.css 比较温和