css伪元素、VScode命令

luckyyulin 发布于2019-08-30 14:20 / 1857人阅读

摘要：伪元素不是空标签的元素都自带两个伪类，只不过平时隐藏了在所有元素前面加东西在所有元素后面加东西在伪元素里加的东西无法被选取点击复制等或做操作等伪类能做元素能拥有的所有属性，但就是时独立的伪元素一般都是隐藏的，需要添加属性才能现身是给元素添加

::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包裹，加上背景色标识下就看的清了

对于块，一定加上宽度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

GPU云服务器云服务器伪元素获取伪元素 css元素 vscode

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115954.html

less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

MkkHou 2019-08-02 15:58 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

codercao 2019-08-29 13:53 评论0 收藏0
前端的一些坑，一些记录，一些冷知识

摘要：当页面中元素样式的改变并不影响它在文档流中的位置时例如等，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。无限期更新前端的一些坑，一些记录，一些冷知识https://github.com/ssshooter/... 大概从 17 年的六月份开始记录吧，也已经一年了，其中也包含了一些很简单的知识，以前还觉得挺难的，现在看起来有点谜之感慨... JavaScript 所有对象...

Keagan 2019-08-26 12:09 评论0 收藏0
如何配置透明发光的骚气 vscode —— Jinkey 原创

摘要：开启透明支持文字发光样式，样式请在获取。如果要不发光的，可以使用。可以保持更新通知。引入以上大神的样式配置之后，左边导航栏有部分标题还是未透明状态，我自己修改了配置，引入即可。如果提示已经损坏，选择右上角齿轮不再提示即可。原文链接 jinkey.ai/post/tech/r… 转载请注明出处 1 安装自定义 JS 和 CSS 插件 2 安装发光主题 showImg(https://us...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
如何配置透明发光的骚气 vscode —— Jinkey 原创

摘要：开启透明支持文字发光样式，样式请在获取。如果要不发光的，可以使用。可以保持更新通知。引入以上大神的样式配置之后，左边导航栏有部分标题还是未透明状态，我自己修改了配置，引入即可。如果提示已经损坏，选择右上角齿轮不再提示即可。原文链接 jinkey.ai/post/tech/r… 转载请注明出处 1 安装自定义 JS 和 CSS 插件 2 安装发光主题 showImg(https://us...

tylin 2019-05-21 19:36 评论0 收藏0