英文 | https://medium.muz.li/9-useful-css-tricks-that-you-should-know-39dd79f09d37 翻译 | 杨小二 CSS 世界充满了我们不知道的各种实用小技巧...，所以说，在我今天的这篇文章里，我也只是列出了 CSS 的一些技巧。...2) 、首字下沉 在一些专业的文章/报纸上，我们经常会看见首字母下沉这样的样式外观，一般都是在文本的第一个字母上使用首字下沉。首字下沉是那个大写字母，文字环绕在它周围。 效果如下图： ?...3)、 平滑滚动 你访问一些网站并尝试转到不同的部分，它会平滑地滚动到该部分。这不是高级编码，但在你的 CSS 中只需要一行代码，你就可以实现这一点。 效果如下： ?...其实，这个效果的实现也非常简单，你只需要有了这两个 CSS 属性，你就能得到你想要的！ ? 结论 这只是 CSS 技巧的一小部分内容，它们可能会让你感到好奇并鼓励你学习更多有趣 CSS 语法。
CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。...CSS伪元素允许设置元素或元素部分的样式，而无需向其添加任何ID或类。当只想为段落的第一个字母设置样式以创建首字下沉效果，或者只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。...CSS3 为伪元素引入了新的双冒号（::）语法，以区分伪元素和伪类。...例：（规则设置文本段落的首字母格式，并创建类似首字下沉的效果）。 p::first-letter { color: #ff0000; font-size: xx-large; } ?...五、伪元素和CSS类 通常，只需要使用这些伪元素设置文本的某个段落或其他块级元素的样式。在那里，向伪元素声明一个类就起作用了。伪元素可以与CSS类组合以产生效果，特别是对于具有该类的元素。
HTML5学堂：在项目中，时常能看到了一种文字展示的特殊效果——首字下沉（如图）。...段落首字下沉 实现方法 1、before伪元素实现 2、使用标签控制 3、first-letter 段落首字下沉 方法分析 第一种方法果断舍弃，原因在于，数据明显是从后台传递的，那么此时我们不可能确定后台会传递什么数据...使用两个标签，并针对第一个标签进行浮动。利用浮动自身的特性——相信对浮动有所了解的人都会想到浮动元素的基本特性——忘记的话，可以查看该文《浮动元素有何性质》。可以查看文中的第二个例子。...可以用JS截取，也可以直接在获取的时候进行截取（利用后台） 段落首字下沉 代码实现 <!
目录 1、vim编辑器 2、vim编辑器的三种模式 3、命令模式下的常用光标移动 4、命令模式下的常用基本操作 5、底行模式下常用命令 1、vim编辑器 刚刚安装的Linux系统，自带的只有...2、vim编辑器的三种模式 "命令模式"：vim + 文件名，即可进入命令模式。 "编辑模式"：命令模式下，点击A/i/o/O(常用的几个如下)，即可进入编辑模式。...底行模式下输入: 并输入wq 表示“保存退出”； 底行模式下输入: 并输入wq! 表示“保存并强制退出”； 底行模式下输入: 并输入q!...3、命令模式下的常用光标移动 按照单个字符移动：使用键盘上面的↑、↓、←、→键； 按照整个单词移动：w/W b/B e/E w:安照单词的首字母向后移动，不忽略标点符号 W:安装单词的首字母向后移动...，忽略标点符号 b:按照单词的首字母向前移动，不忽略标点符号 B:按照单词的首字母向前移动，忽略标点符号 e:按照单词末尾字母向后移动，不忽略标点符号 E:按照单词末尾字母向后移动
今天来分享 18 个鲜为人知但很有用的 CSS 技巧！ 图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。...h1 { color: #fff; font-size: 80px; -webkit-text-stroke: 2px crimson; text-stroke: 2px crimson;...*:optional{ background-color: green; } 实现首字下沉 我们可以使用::first-letter来实现文本首字母的下沉： p.texts:first-letter...{ font-size: 200%; color: #8A2BE2; } :first-letter选择器用来指定元素第一个字母的样式，它仅适用于在块级元素中。...效果如下： 实现正方形 我们可以通过CSS中的纵横比来实现一个正方形，这样只需要设置一个宽度即可： .square { background: #8A2BE2; width: 25rem;
…、/\ 等辅助类字符，无法被正确处理成首字符，会和第一个“有效字符”连带处理 首字符前面不能有图片或者inline-table之类的元素存在 ::before也会参与到::first-letter的规则中...important; } 场景1：英文首字下沉 p::first-letter { font: bold italic 3em / .5 serif; color: #607d8b;...Apple Banana ApplePen Pen h1:first-child {} /*Hi*/ h2.../getting-to-know-css3-selectors-other-pseudo-classes/ https://medium.freecodecamp.com/explained-css-pseudo-classes-cef3c3177361...#.e8mlacikv https://css-tricks.com/css-content/ https://css-tricks.com/pseudo-element-roundup/ http:/
--我是透明的容器--> 我是不透明的内容 // 原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者...段落首字下沉 // 你可以创建一个下沉效果，如在报纸或杂志的使用 p::first-letter { margin: 5px 0 0 5px; float...单词首字大写 #test { text-transform: uppercase; /* lowercase 小写 */ } 26....CSS重置 // 建议使用normalize.css 28....http://www.css88.com/book/css/experience/skill.htm http://www.cnblogs.com/58top/archive/2012/10/27/25
起源 2. 语法 2.1. float 2.2. clear 3. 性质 3.1. 浮动 3.2. 清除浮动 4. 经典案例 4.1. 首字下沉 5. 几道笔试题 1....清除浮动 性质：在 CSS1 和 CSS2 中，clear 起作用的方式是增加元素的上外边距，把元素移到浮动的元素下方。因此，为元素声明的上外边距其实会被忽略。...首字下沉 <!...几道笔试题 题目01： 题目02： 参考： 《CSS 世界》 《CSS核心技术详解》 《CSS权威指南 第四版 下册》 Floats： https://developer.mozilla.org.../en-US/docs/Learn/CSS/CSS_layout/Floats float： https://developer.mozilla.org/en-US/docs/Web/CSS/float
{ //选中倒数第二个li color: deeppink; } 2、 n遵循线性变化，其取值0、1、2、3、4、......结合锚点进行使用，处于当前锚点的元素会被选中； CSS (层叠样式表) CSS (层叠样式表...E::first-letter 文本的第一个字母或字（如中文、日文、韩文等）； 案例：首字下沉 E::first-line 文本第一行； 文本第一行高亮.....E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after CSS2中 E:before或者E:after，是属于伪类的...，并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
二者都是条件分组规则（conditional group rules）： /* 一般结构 */ @IDENTIFIER (RULE) {/* CSS block */}/* @supports CSS...Feature Query 浏览器内置的CSS特性检测支持。...尽管很遗憾，但grid布局确实没有CSS polyfill。那么，非得等到多年以后才能使用这个强大的特性吗？ 当然不是。...变量，很容易把换肤功能作为一种增强效果来提供 首字母下沉效果 在支持initial-letter的环境（如Safari）很容易实现这种常见的排版效果（段落首字母下沉4行）： @supports (initial-letter...How to use CSS Feature Queries Using CSS Grid: Supporting Browsers Without Grid Basic grid layout with
Grid(网格) level 2相关的规范正在制定中，主要增加了 subgrid（子网格）的新特性。 现在没有任何浏览器支持这些新属性，但是我相信并希望这一天能够快点到来。...Initial letter——首字母下沉 Initial Letter——目前仅适用WebKit的浏览器，是一个解决常见问题的小功能。 它可以创建一个大的首字母沉入其后的文本中，效果如上图。...可以查看Axis Praxis网站（axis-praxis.org），您可以在线体验各种可变字体并复制用于您创建的可变字体的css。...Media Queries level 4 介绍了交互媒体功能，使我们能够找出用户具有什么类型的指针，并测试此类属性是否为悬停。 例如，如果我想为触摸屏用户添加一些css。...CSS Grid level 2 Here Comes subgrid http://smashingmagazine.com/2018/07/css-grid-2/ Practical Scroll
:empty 表示空元素 此选择器定位空的 元素并隐藏它们。...h1 { color: #3498db; -webkit-text-stroke: 2px #2c3e50; } 32.纯CSS汉堡菜单 无需 JavaScript 创建一个简单的汉堡菜单...:is(h1, h2, h3) { color: blue; } 34.CSS变量的计算 在动态样式的 CSS 变量中执行计算。...首字母大写字母 使用initial-letter 设置块级元素的第一个字母的样式。...首字母 将块元素的第一个字母或首字母字符设计为装饰性首字下沉或其他视觉上突出的首字母字符。
进入编辑模式 a: 光标 向后移动一位 i: 光标 和 所在字符 不发生任何变化 o: 给新起一行 s: 删除光标所在字符 尾行模式的操作 :q //quit 退出编辑器 :w //...write 对修改后的内容进行保存 :wq //write quit 保存修改并退出编辑器 :q!...//强制保存并退出编辑 :set number 或 nu //设置行号 :set nonumber 或 nonu //设置行号 :/内容/ 或 /内容 //查找指定内容 小写n（next）下一个...大写N（next）上一个 :数字 //跳转到数字所在行 字符串替换cont1被替换为cont2 :s``/cont1/cont2/ //替换光标所在行的第一个cont1 按下U，可以撤回替换...) 下(j) 左(h) 右(l) 键 ② 单词级 w: word移动到下个单词的首字母 e: end移动到下个(本)单词的尾字母 b: before移动到上个(本)单词的首字母 ③ 行级 $
o 在当前行的下面另起一行，并使当前模式转为Insert模式。 O 将在当前行的上面另起一行。...丢弃所有的修改并退出 :wq 丢弃所有的修改并退出 移动 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ w 将光标向前移动一个word的首字符上 3w 将光标向前移动3 words b 将光标向后移动到前一个...word的首字符上 e 将光标移动到下一个word的最后一个字符 ge 将光标移动到前一个word的最后一个字符上 $ 将光标移动到当前行行尾 = END key ^ 将光标移动到当前行的第一个非空白字符上...0(数字) 总是把光标移动到当前行的第一个字符上 1$ 将光标移动到当前行行尾 2$ 将光标移动到下一行的行尾 注意 ^ 和 0 不能接受命令计数 ---- 技巧 快速清空文件 gg dG
类名，你可以自由地使用css类名来设置css过渡&动画。...各类名的生命周期 进入 v-enter 只存在于第一帧 v-enter-active 第一帧到最后一帧，结束后移除 v-enter-to 第二帧到最后一帧，结束后移除 离开 v-leave 只存在于第一帧...v-leave-active 第一帧到最后一帧，结束后移除 v-leave-to 第二帧到最后一帧，结束后移除 如果你使用一个没有name的 ，则 v- 是这些类名的默认前缀。...，第二帧开始被移除，即变成1,*/ opacity: 0 } .fade-enter-active{ /*当监控到opacity变化的时候（即从0到1），给2s的过渡*/ transition...fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 2s
编辑命令 Ctrl + a ：移到命令行首 Ctrl + e ：移到命令行尾 Ctrl + f ：按字符前移（右向） Ctrl + b ：按字符后移（左向） Alt + f ：按单词前移（右向） Alt...+ b ：按单词后移（左向） Ctrl + xx：在命令行首和光标之间移动 Ctrl + u ：从光标处删除至命令行首 Ctrl + k ：从光标处删除至命令行尾 Ctrl + w ：从光标处删除至字首...Alt + d ：从光标处删除至字尾 Ctrl + d ：删除光标处的字符 Ctrl + h ：删除光标前的字符 Ctrl + y ：粘贴至光标后 Alt + c ：从光标处更改为首字母大写的单词 Alt...：使用上一条命令的最后一个参数 控制命令 Ctrl + l：清屏 Ctrl + o：执行当前命令，并选择上一条命令 Ctrl + s：阻止屏幕输出 Ctrl + q：允许屏幕输出 Ctrl + c：终止命令
编辑命令 Ctrl + a：移到命令行首 Ctrl + e ：移到命令行尾 Ctrl + f ：按字符前移（右向） Ctrl + b ：按字符后移（左向） Alt + f ：按单词前移（右向） Alt...+ b ：按单词后移（左向） Ctrl + xx：在命令行首和光标之间移动 Ctrl + u ：从光标处删除至命令行首 Ctrl + k ：从光标处删除至命令行尾 Ctrl + w ：从光标处删除至字首...Alt + d ：从光标处删除至字尾 Ctrl + d ：删除光标处的字符 Ctrl + h ：删除光标前的字符 Ctrl + y ：粘贴至光标后 Alt + c ：从光标处更改为首字母大写的单词 Alt...：使用上一条命令的最后一个参数 控制命令 Ctrl + l：清屏 Ctrl + o：执行当前命令，并选择上一条命令 Ctrl + s：阻止屏幕输出 Ctrl + q：允许屏幕输出 Ctrl + c：终止命令...来源：LinuxTOY 原文：https://url.cn/5Sj2PRE 题图：来自谷歌图片搜索 版权：本文版权归原作者所有 投稿：欢迎投稿，邮箱: editor@hi-linux.com
一、CSS3 1、CSS3简介 CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。...2、新增特性 CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜.../*h2为锚点，在被触发时将h2的字体改为红色*/ h2:target{ color: red; } 3、伪元素选择器 伪元素之所以被称为伪元素，是因为它不是真正的DOM，但是却可以当成一个DOM...注意： IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素 CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中 提出伪元素的概念 E:...body> 3.2、E:first-letter 选中文本的第一个字母（英文）或者文字（中文） /*设置首字下沉
如下图： ---- 关于比较次数 有同学在评论中提出了疑问，我在这里补充一下吧，关于对于比较次数和初始状态的关系的理解 堆排序：比如元素下沉的操作，虽然一个元素是从底部拉上来的，但这不代表这个元素一定会接着沉到底部...，如果沉到中间就停止下沉的话，比较次数就少了。...而这个过程的比较次数自然和下沉的深度是相关的。 希尔排序：希尔排序是对简单插入排序的改进，每一趟希尔的内部使用的就是简单插入排序。...第 i 次排序需要进行n-i 次关键字的比较，此时需要比较n-1+n-2+…+1=n(n-1)/2次，所以 总比较次数 与初始状态 无关，时间复杂度为O（n^2)。...直接插入排序 从当前关键字之前的关键字开始扫描，如果大于待排关键字，则后移一位。直到全部记录插入完成。
尺寸(Dimension) 属性 属性 描述 CSS height 设置元素的高度 1 max-height 设置元素的最大高度 2 max-width 设置元素的最大宽度 2...font-style 规定文本的字体样式 1 font-variant 规定文本的字体样式 1 font-weight 规定字体的粗细 1 @font-face 一个规则，允许网站下载并使用其他超过...3 drop-initial-before-adjust 设置下拉的辅助连接点的初始对齐点 3 drop-initial-before-align 校准行内的初始行的设置就是具有首字母的框使用辅助连接点...3 drop-initial-size 控制局部的首字母下沉 3 drop-initial-value 激活一个下拉式的初步效果 3 inline-box-align 设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐...表格（Table） 属性 属性 描述 CSS border-collapse 规定是否合并表格边框 2 border-spacing 规定相邻单元格边框之间的距离 2 caption-side
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
