文章目录

二.弹性布局（重点）

什么是弹性布局
主要解决某个元素中，子元素（仅仅是子元素不是后代元素）的布局方式
为布局提供非常大的灵活性
弹性布局的相关概念
1. 容器
  要发生弹性布局的子元素的父元素叫做容器
  即：定义了display：flex;的元素
2. 项目
  要发生弹性布局的子元素们叫做项目
  即：定义了display: flex的元素的儿子们
3. 主轴(4条)–x轴正负方向，y轴正负方向
  项目们的排列方向，称之为主轴
  项目们在主轴上的排列顺序，称为主轴的起点和终点
  例：x轴正方向称为：主轴方向x轴，主轴起点-左侧，主轴重点-右侧
4. 交叉轴(2条)–x轴正方向，y轴负方向
  永远与主轴垂直的方向
  项目们在交叉轴上的排列，称为交叉轴的起点和终点
  
  以图中3个元素为例：3个子元素做弹性布局，主轴方向x轴，主轴起点-左侧，交叉轴y轴，在交叉轴的终点对齐
语法
设置弹性容器
display：
取值：
flex; 把块级变为弹性容器
inline-flex; 将行内元素变为弹性容器
注意：
1. 当一个元素设置为容器之后，这个容器的text-align，vertical-align失效，项目没失效
2. 当元素变为弹性项目时（即父元素设置了display:flex），这个弹性项目float，clear失效
容器的样式属性
1. 设置主轴的方向
  flex-direction:
  取值：
  row 默认值，主轴为x，主轴起点在左侧
  row-reverse 主轴为x，主轴起点在右
  column 主轴为y，主轴起点在顶部
  column-reverse 主轴为y，主轴起点在底部
2. 设置项目换行
  当容器在主轴方向，空间不够时，用来设置项目是否换行
  flex-wrap:
  取值：
  no-wrap; ：默认值，不换行(项目压缩)
  wrap; ：换行
  wrap-reverse; ：反转换行
3. 上面两个属性的简写方式
  flex-flow: 主轴方向换行;
4. 定义项目在主轴上对齐方式
  justify-content:
  flex-start;：默认值，主轴起点对齐
  center;：主轴的中间对齐
  flex-end;：主轴终点对齐
  space-around;：每个项目左右外边距相同 (两端有空间)
  
  space-between;：每个项目之间间距相同，两端对齐(两端没有空间)
5. 交叉轴对齐方式
  align-items:
  取值：
  flex-start 交叉轴起点
  center 中间
  flex-end 交叉轴终点
  baseline 每个项目的文本，基线对齐（很少用）
  stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
项目的样式属性
只能设置在一个项目上，不影响其他项目
1. 单独设置一个项目交叉轴对齐方式
  align-self:
  取值：
  flex-start 交叉轴起点
  center 中间
  flex-end 交叉轴终点
  baseline 每个项目的文本，基线对齐（很少用）
  stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
  auto 使用容器align-items定义的值
2. 设置项目在主轴的排列顺序
  order:取值为无单位数字，默认值为0。值越小，离主轴起点越近！
3. 项目缩小
  当主轴空间不够时，项目是否缩小，怎么缩小
  flex-shrink:取值为不带单位的数字
  默认值：1；
  取值规则，子元素总溢出宽度，根据flex-shrink取值，按比例*总溢出宽度，分配给各个项目做缩小(减法)。
  举例：
  为父元素命名为div0，1-5五个子元素分别命名为div1、div2、…、div5。
  父元素需要设定：
  
  display：flex，width：500px
  
  所有子元素需要设定：
  
  flex-basis：120px; 即不发生收缩时子元素原本的宽度
  
  以上为先决条件。子元素宽度之和与父元素宽度的差值：
  
  120*5-500=100px
  
  这时通过设定子元素的flex-shrink属性来决定100px总缩减量如何分配给5个子元素。
  预设:
  
  前三个div设置flex-shrink: 1;
  后两个div设置flex-shrink: 2;
  
  div1占总收缩比例的1/7，所以div1需要被移除的溢出量为
  
  100*(1/7)≈14px
  
  则，最后div1的实际宽度为
  
  120-14=106px
4. 项目放大
  当主轴空间过大，项目是否放大，怎么放大
  flex-grow:取值为不带单位的数字
  默认值：0；
  取值规则，多出的空间，按照取值，分配给各个项目进行放大(相加)
5. 项目的样式属性（重要属性）
  1. flex-basis
    单独设置每个项目在主轴上的占据空间（不管主轴是x,还是y）
    flex-basis:
    取值①% 容器主轴方向尺寸的百分比；②px固定数字
    注意，定义了flex-basis，优先级高于项目本身宽高
  2. 简写方式
    是flex-grow、flex-shrink、flex-basis 的简写
    flex:0 1 25%;

三.CSS hack

由于不同的浏览器对css的解析不同，会导致同一份css在不同浏览器生成不同的效果
开发人员需要针对不同浏览器写不同的css
这个行为，就叫做写css hack
-webkit-谷歌的
-o-欧朋的
-ms-微软的
-moz-火狐的

四.转换（重点）

什么是转换
改变元素在页面中的位置，大小，角度，以及形状
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加了z轴的效果。但是3D都是模拟的！
转换属性
transform:转换函数;
2D转换
1. 位移(改变元素在页面中的位置)
  transform: translate()
  转换函数
  1. translate(x)和translateX(x) 设置元素在x轴上位移的距离：取正数元素→移，取负数元素←移
  2. translateY(y) 设置元素在y轴上位移的距离：取正数元素↓移，取负数元素 ↑移
  3. translate(x,y) 同时设置x和y轴位移距离
  面试题
  要求一个200px*200px的div，不管浏览器多大，都在浏览器正中心显示
```
	div{
		width: 200px;height: 200px;
		background: #000;
		position: absolute;
		top: 50%;left: 50%;
		transform: translate(-100px,-100px);
	}
```
2. 缩放(改变元素的大小)
  transform：scale()
  取值
  1. 参数为一个值 scale(v1) 同时设置x轴和y轴的缩放倍数
    v1>1 x轴和y轴都放大倍数
    0<v1<1 x轴和y轴都缩小
    -1<v1<0 x轴和y轴都缩小,并反转（x轴y轴都反转）
    v1<-1 x轴和y轴都放大,并反转
  2. 参数为两个值，分别设置x轴和y轴的缩放
  3. 单独设置x轴缩放 scalex()
  4. 单独设置y轴缩放 scaley()
3. 旋转(改变元素的角度)
  transform:rotate(ndeg);
  n取值：正–顺时针，负–逆时针
  注意：
  1. 旋转原点会影响旋转效果
    transform-origin:x y
    取值
    ①以px为单位的数字
    ②%
    ③关键字 x(left/center/right)；y(top/center/bottom)
  2. 旋转与位移的配合，注意旋转会带着座标轴一起转，位移是在旋转之后的座标方向位移
4. 倾斜（项目中用的较少）
  1. skewX(ndeg)和skew()
    让y轴向着x轴倾斜n度
    n:正数逆时针负数顺时针
  2. skewY(ndeg)
    让x轴向着y轴倾斜n度
    n:正数顺时针，负数逆时针
  3. 同时设置x轴和y轴的倾斜
    练习
    在一个transform属性中，写多个转换函数
    div 200*200.背景随意，鼠标悬停时，该元素发生以下效果
    向右偏移100px,向下偏移100px，旋转135deg,向着x轴倾斜78度，放大1.5倍
3D转换（3D旋转）
页面中所有的3D转换都是模拟的
1. 透视距离
  模拟人眼到3d转换元素之间的距离，
  距离不同，效果不同
  perspective:透视距离：此属性要加载到3D转换元素的父元素上
2. 3D转换
  transform:
  取值：
  1. rotateX(xdeg)
    以x轴为中心轴，旋转元素（现实中烤羊腿，老式爆米花机的旋转方式）
    2 rotateY(ydeg)
    以y轴为中心轴，旋转元素(现实中旋转门，旋转木马，钢管舞，土耳其烤肉的旋转方式)
  2. rotateZ(zdeg)
    以z轴为中心轴，旋转元素角度(现实中风扇，大风车，摩天轮的旋转方式)
  3. 3D旋转 rotate3D(x,y,z,ndeg)
    x,y,z 取值为不带单位的数字。0 代表不参与。其他数字代表角度的倍数。负数代表反方向转

五.过渡（重点）

什么是过渡
让css的值，在一段时间平缓变化的效果
语法
1. 指定参与过渡的属性
  transition-property:
  取值
  ①一个或多个css属性，多个属性间用空格分开(写或者不写transform属性，该属性都参与过渡)
  ②all 所有支持过渡的属性
  支持过渡的属性
  1. 颜色属性
  2. 大多数取值为具体数字的属性
  3. 阴影
  4. 转换
2. 设置过渡持续时长
  transition-duration: s/ms;
3. 过渡时间曲线函数
  transition-timing-function:
  取值：
  1. 贝塞尔曲线(自学) cubic-bezier(0,0,1,1)
  2. ease 默认值，慢速开始，加速，减速，慢速结束
  3. linear 匀速
  4. ease-in 慢速开始，一直加速
  5. ease-out 快速开始，减速结束
  6. ease-in-out 慢速开始，先剧烈加速，再剧烈减速，慢速结束
4. 过渡前的延迟时间
  transition-delay: s/ms
5. 过渡代码的编写位置
  过渡写在原始样式中，过渡效果，有去有回
  过渡写在伪类hover中，过渡效果，有去无回
6. 过渡的简写方式
  transition: property duration timgin-function delay;
  最简方式：transition: duration;
  练习：1.翻滚吧球 2.魔力转圈圈
  PS:过渡和动画的使用区分
  
  过渡动画
  
  两个css值之间的变化至少两个，或者两个以上css值之间的变化
  
  必须使用伪类激活可以使用刷新页面激活，也可以使用伪类

过渡	动画
两个css值之间的变化	至少两个，或者两个以上css值之间的变化
必须使用伪类激活	可以使用刷新页面激活，也可以使用伪类

六.动画（重点）

什么是动画
使元素从一种样式逐渐变为另外一种样式
就是过渡的升级，将多个过渡效果放到一起
使用关键帧来控制动画每一个状态
关键帧的组成：
1. 这一帧执行的时间点
2. 这一帧的样式
动画的使用步骤
1. 使用关键帧，来定义动画
  @keyframes 动画名称{ 0%/from{样式} ..... 100%/to{样式} }
  举例：
```
/* 1.定义动画 */
@keyframes change{
    0%{
        background-color: #00f;
        border-radius: 0;
    }
    50%{
        background-color: #f00;
        border-radius: 50%;
    }
    100%{
        background-color: #afa;
        border-radius: 0;
    }
}
```
2. 调用定义好的动画
  1. 指定调用动画的名称
    animation-name:动画名称;
  2. 指定动画播放时长
    animation-duration: s/ms;
  3. 设置动画的时间曲线函数
    animation-timing-function:
    取值:
    ease
    linear
    ease-in
    ease-out
    ease-in-out
    贝塞尔曲线
  4. 设置动画的延迟
    animation-delay: s/ms
动画的其他属性
1. 设置动画的播放次数
  animation-iteration-count:
  取值：
  具体的数字
  infinite 无限
2. 定义关键帧的播放顺序
  animation-direction:
  normal ：0%—>100%
  reverse ：100%–>0%
  alternate：轮流播放，奇数次正向，偶数次逆向
3. 动画简写
  animation: name duration timing-function delay count direction;
  最简方式 animation:name duration;
4. 动画的填充状态
  animation-fill-mode
  取值：
  none ：默认值，不填充
  backwards：动画的延迟时间内，填充第一帧
  forwards ：动画结束后，填充最后一帧
  both ：前后都填充
5. 设置动画的播放状态
  animation-play-state:
  取值：
  paused：暂停
  running：播放
动画的兼容性
如果低版本浏览器兼容动画效果，需要在声明动画的时候，添加前缀
正常写动画：@keyframes 动画名称{}
添加兼容的写动画：
@-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
练习:坤坤打篮球
动画的第三方包使用
animate.css的使用
https://daneden.github.io/animate.css/下载animate.css文件
在页面中使用link引入这个css
在样式中直接调用动画名称

七.css优化

css优化的目的
减少服务器端压力
提升用户体验
css优化的原则
尽量减少http的请求个数（缓存，精灵图）
页面的顶部引入css文件
将css和js文件，放在独立的文件中
css代码优化
合并样式(能简写，就不单独写)
减少样式重写(能重用就重用)
避免出现空的href和src
代码压缩

八.css reset和normalize.css

什么是css reset
由于不同浏览器，给元素定义的默认样式不同，导致一份css有可能产生不同的效果。为了统一，在开发之前，我们把所有有差异的默认样式，清除或统一
css reset没有标准，项目中使用哪个版本，听领导安排
注意：css reset存在的问题：css reset 比较霸道，不管是不是违背语义，都要把样式清除和统一
normalize.css
他是css reset一种替代方案，比较温和
他在默认的html元素的样式上，提供跨浏览器的高度一致性，还修改了不同浏览器的bug

T-CSS核心-day02-css hack、转换、过渡、动画、优化

文章目录

二.弹性布局（重点）

三.CSS hack

四.转换（重点）

五.过渡（重点）

六.动画（重点）

七.css优化

八.css reset和normalize.css

一个开源且全面的C#算法实战教程

C语言--右移左移

12款高效开源Wiki系统推荐，打造团队知识管理利器

dotnet 基于 DirectML 控制台运行 Phi-3 模型

常用的 Git 指令

sm4加密工具类

T-JS-ECMAScript核心題庫

T-CSS基礎-day05-浮動、樣式屬性、定位

T-CSS核心-day01-複雜選擇器、彈性佈局

T-JS基礎-day09-引用類型

JavaScript Math 對象屬性及方法示例

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結