css伪元素、VScode命令

时间 2019-12-05

标签 css 元素 vscode 命令栏目 CSS 繁體版

原文原文链接

::before ::after伪元素

不是空标签的元素都自带::before、::after两个伪类，只不过平时隐藏了css
```
before在全部元素前面加东西
after在全部元素后面加东西
```
在伪元素里加的东西没法被选取（点击、复制等）或作操做（hover、click等）
伪类能作元素能拥有的全部css属性，但就是时独立的

::before、::after伪元素通常都是隐藏的，须要添加css属性才能现身~~动画

/*content是给元素添加内容; content:""就是给元素添加空内容*/
css content: "";
display: block;

简单来说，::before、::after伪元素就是一个块级元素的第一个和最后一个元素
其余都同样，但这两个元素不能再有子元素的，也没有hover、click、mouseout等这样的操做
能够有选择器:伪类::after、选择器:伪类::before这样子的命令来操做伪元素的动态spa
```
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;消除
指针变成手性code
```
cursor: pointer;
```
想要页面中的元素可以动态的变换位置，请使用绝对定位
text-align: center;和letter-spacing: ;
会使文字会居中并向一边展开
使用text-indent设置缩进，令文字看上去从中间向两边展开

VScode

经常使用命令

复制这一行orm
```
shift + alt + uparrow/downarrow
```
删除这一行seo
```
shift + del
```
这行上移一行/下移一行ci
```
alt + uparrow/downarrow
```
光标切换分窗口it
```
alt + leftarrow/rightarrow
```
复制光标到每一行io
```
shift + ctrl + alt
```
选中到下一个符
```
shift + ctrl
```