粤嵌前端笔记 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实现单行文本出现省略号
三句代码

white-spacn: nowrap

overflow: hidden

text-overflow: ellipsis