::before ::after伪元素
-
不是空标签的元素都自带
::before
、::after
两个伪类,只不过平时隐藏了before在所有元素前面加东西 after在所有元素后面加东西
- 在伪元素里加的东西无法被选取(
点击、复制
等)或做操作(hover、click
等) - 伪类能做元素能拥有的所有css属性,但就是时
独立的
-
::before、::after
伪元素一般都是隐藏的,需要添加css属性
才能现身~~/*content是给元素添加内容; content:""就是给元素添加空内容*/ css content: ""; display: block;
- 简单来讲,
::before、::after
伪元素就是一个块级元素的第一个和最后一个元素
其他都一样,但这两个元素不能再有子元素的,也没有hover、click、mouseout
等这样的操作 -
可以有
选择器:伪类::after
、选择器:伪类::before
这样子的命令来操作伪元素的动态div:hover::after{ color: red; } div:hover::before{ color: red; }
碎碎念
- 绝对定位的元素,自动变为
block
-
box-sizing: border-box;
意思是把边框也算到元素的宽高里去 - css动画:
mdn
变化:transform:rotate
过度:transition -
制作进度条
两个div包裹,加上背景色标识下就看的清了 <div style="background: red; width: 100px; height: 30px;"> <div style="background: green; width: 100%; height: 100%"></div> </div>
- 对于块,一定加上宽度
width
,margin: auto;
才有居中的作用 - 设置
display: inline-block;
后会产生空隙
加上vertical-align: top;
消除 -
指针变成手性
cursor: pointer;
- 想要页面中的元素能够动态的变换位置,请使用
绝对定位
-
text-align: center;
和letter-spacing: ;
会使文字会居中并向一边展开
使用text-indent
设置缩进,令文字看上去从中间向两边展开
VScode
常用命令
-
复制这一行
shift + alt + uparrow/downarrow
-
删除这一行
shift + del
-
这行上移一行/下移一行
alt + uparrow/downarrow
-
光标切换分窗口
alt + leftarrow/rightarrow
-
复制光标到每一行
shift + ctrl + alt
-
选中到下一个符
shift + ctrl