粤嵌前端笔记 Day1

vscode 快捷键

生成多个相同的标签

标签名 * n

生成父子关系
div>p

生成兄弟关系
div+p

生成标签内的内容
div {内容}

ctrl+x 选中整行代码
上移一行 alt+up
下移一行 alt+down
ctrl+k 删除行
ctrl+shift+k 删除当前行
ctrl+shift+l 删除当前行及下一行
ctrl+shift+h 删除当前行及上一行
ctrl+shift+j 删除当前行及下
ctrl + 鼠标滚轮 缩放

今天讲的知识点有定位和 css3 的，还有视频标签知识点
1. 视频标签
HTML5 的视频标签是 video，它是 HTML5 的新标签，用来定义视频内容。
video 标签有多个属性，如下：
autoplay：自动播放，加载完毕后自动播放，有些浏览器默认不支持
controls：控制栏，用于显示控制面板
loop：循环播放
muted：静音播放
src：视频地址，文件所在地
width：视频宽度 height：视频高度
可以加入去掉边距
object-fit：cover 将对象撑满
2. 定位
有五种定位方式
1. 是静态定位 2. 相对定位 3. 绝对定位 4. 固定属性 5. 粘性属性
先学习固定定位
固定定位就是让元素在页面中固定不动，不随页面滚动而滚动。
position: fixed;
对设置宽度的 width 的百分比
设置宽度跟行高的一样的时候，可以设置垂直居中
水平居中，可以使用，text-align: center;
设置固定定位会使得，占掉文档流的位置，不占据空间
需要设置偏移量 left:0; top:0;
并且给你的文字加上 padding: 对应的导航栏高
top:50% 是在那条线的 50%, 不是盒子的 50% 可以使用 (负高度) margin-top:-150%;, 使得能够垂直居中，px 同理

这个比较重要，毕竟自己一直还没掌握完全

css 定位 子绝父相 就是子元素绝对定位，父元素用相对定位，定位的意思就是子元素在父元素内进行定位，定位的意思就是定在某个位置上
子元素要绝对定位，不能跑出父元素出去
position: absolute;
然后要调整位置可以设置偏移量
比如 top botton left right, 偏移量设置的时候，优先级是 top 和 left, 数字的取值可以使用 css 单位

父元素相对定位
position: relative;
然后子元素就跑不出父元素，

如果 top50% left50%
其实是在顶点处 50% 要让其在中间，要用成 margin-top:-50% margin-left:-75%
就是子元素的宽高的一半

这个是设置堆叠顺序，z-index: 谁越大谁在上面

absolute 是绝对定位
relative 是相对定位

元素的显示和隐藏
display:none 隐藏元素
display:block 显示元素

display:flex 是弹性布局，是为了最大限度填充空间

css 过度属性
transition : 需要过渡的 css 属性名称 加上过渡所需事件
过渡所需时间表示 s,1000ms=1s
加上 all 代表着全部属性过渡

css3 过渡动画
@keyframes name{
from{
从什么属性
}
to{
到什么属性
}
}
使用动画
animation : name: 动画名称 duration: timing-function delay-interaion-count direction fill-mode;
linear 表示动画变化时动画变化时匀速的
infinite 表示无限次动画的意思
alternate 表示需要反向动画 有两个参数
(交替动画)

css 伪元素选择器的使用
第一个是 before 会在标签内容前面添加一个行内元素，通过 content 属性设置行内元素
第二个是 after 这个是在标签内容后面添加内容
需要注意的是前面添加两个::
注意：双标签才有标签元素，所以只有双标签才可以使用者两个伪元素

css 变形
transform
transform 的取值有好多个
比如 tranlate 是平移 rotate 旋转 skew 倾斜 scale 缩放
transform 移动距离的取值可以是数值带 css 单位或者是百分比，允许负值
这个比较好，毕竟通过定位，容易在修改子元素的宽度和高度的时候，同时发生变化，但是通过平移的时候，就不用考虑还要去修改偏移量

旋转 rotato 通过在 transform: rotato (数值带 deg 单位，可以理解为度数，1true 代表 360deg) 还有正值代表顺时针，负值代表逆时针

变形属性最好带上过渡 tansition 不然看不出效果

如果是变形中的缩放 scale->scaleX/Y (数值不带单位，允许负值)
缩放中有对应的 xy 轴，需要注意 scale (数值，数值)
注意：1 是原来的大小
图片溢出隐藏 overform:hidden

css 实现单行文本出现省略号
三句代码

1. white-spacn: nowrap
2. overflow: hidden
3. text-overflow: ellipsis