前端 css
文章平均质量分 77
黑木令
这个作者很懒,什么都没留下…
展开
-
CSS 伪类: 什么是 CSS 伪类?CSS 伪类怎么分类? CSS 伪类有哪些?以及分类对应的伪类
本章讲解的内容为 CSS 伪类 。废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。一: 什么是 CSS 伪类?1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。2. 伪类实际使用场景举例: 1. 设置鼠标悬停在元素上时的样式 。 2. 为已访问和未访问链接设置不同的样式 。 3. 设置元素获得焦点时的样式 。二: CSS 伪类选择器的分类 (4类):1. 动态伪类选择器。2. UI元素状态伪类选原创 2021-07-05 18:05:42 · 15763 阅读 · 1 评论 -
CSS伪类--锚伪类选择器(动态伪类选择器)-使用详细总结
本章讲解的内容为 CSS 伪类中的 锚伪类选择器1. CSS 锚伪类选择器有哪些2. CSS 锚伪类选择器 的具体含义3. CSS 锚伪类选择器 各个伪类的使用方式有兴趣的可以查看 " CSS 伪类选择器" 总结这篇文章废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。一:CSS 锚伪类选择器 / 动态伪类选择器 一览:序号anchor (锚)伪类示例示例说明1:linka:link未访问的链接2:vi原创 2021-07-05 18:03:56 · 11270 阅读 · 0 评论 -
CSS overflow 属性(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。一. 定义和用法:1. overflow 属性规定当内容溢出元素框时发生的事情 。2. 这个属性定义溢出元素内容区的内容会如何处理 。 如果值为原创 2021-07-04 16:14:17 · 12210 阅读 · 4 评论 -
CSS transition和animation的区别
本文章讲解内容是 transition 与 animition 动画效果的不同点与相同点, 虽然它们都可以实现CSS动画效果结合 “css 动画实现的 3 种方式” 来理解; 因为这篇文章就是继这篇文章的延续。废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。一:transition和animation的区别:1. Transition 强调过渡; Animation 强调流程与控制 。2. 两者的控制粒度不一样 1. 某种程度上, tra原创 2021-07-03 22:40:26 · 14413 阅读 · 0 评论 -
CSS权重与优先级-详细分析
本文总结内容: CSS 的优先级相关问题废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。权重与优先级相关概念简述:1. 权重: 是一个相对的概念, 是针对某一指标而言; 某一指标的权重是指该指标在整体评价中的相对重要程度 。2. 优先级: 其实我们所说的 CSS 权重就是 CSS 样式优先级 。3. CSS 的"继承性": CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上 。4. "祖先样式": 一个标签从祖先那原创 2021-06-30 21:12:54 · 11897 阅读 · 0 评论 -
css 动画实现的 3 种方式
css 动画实现的 3 种方式废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。css 实现动画的三种方式总结:1. transition 过渡 。2. transform 变形 。3. animation 关键帧动画 。1. transition 过渡动画1. 语法: 1. transition: 属性是个复合属性 。 2. transition: property duration timing-function delay原创 2021-06-24 23:02:07 · 10611 阅读 · 1 评论 -
CSS 盒模型
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。主题: css 盒模型的介绍及区别1. 什么是盒模型1. 每个 HTML 元素都可以叫做盒模型 。2. 盒模型由外而内包括: 1. 边距(原创 2021-06-23 23:06:15 · 6790 阅读 · 0 评论 -
li 与 li 之间设置display: inline-block;后有看不见的空白间隔如何形成的,相应的解决办法
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。最近一段时间很少能够静下心来深入研究技术,主要是工作太忙,项目如同流水一样,每天都在不停的开发,除了开发还是开发;晚上夜深人静的时间可以终于可以抽出时间来研究一下技术,一时之间又不知道从哪里开始了;想了想就去网上寻找一些有趣的现象,还真的被找到原创 2021-06-21 13:38:22 · 5285 阅读 · 0 评论 -
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 带有单位的 line-height 会被计算成 px 后继承 。2. 子元素的 line-height = 父元素的 line-he原创 2021-06-19 22:47:37 · 3993 阅读 · 0 评论 -
CSS 属性 content 有什么作用? 有什么应用?(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。content 介绍1. CSS 中主要的伪元素有四个:before/after/first-letter/first-line, 在 be原创 2021-06-19 22:43:45 · 6843 阅读 · 0 评论 -
CSS 几种隐藏元素的方法(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。首先来说一下大概有几种实现 ‘隐藏元素’ 的方法, 答案是: 我知道的是 8 种 。下面我们来一一分享具体的实现方法1. visibilit原创 2021-06-19 22:42:11 · 3940 阅读 · 2 评论 -
CSS 使用 a 标签的 mailto 属性在网页中链接 Email 地址(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 标签 还有一个作用是可以链接 Email 地址, 使用 mailto 能让访问者便捷向网站管理者发送电子邮件 。2. 如果 mail原创 2021-06-18 10:12:26 · 27062 阅读 · 0 评论 -
CSS/HTML 如何在网页中添加空格(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。html空格符号代码1. :一个字符的半角的不断行的空格,如果需要在网页中插入多个空格,可以将“&nb原创 2021-06-18 10:10:41 · 16766 阅读 · 0 评论 -
CSS 属性 cursor 手势设置(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由原创 2021-06-18 10:07:12 · 7086 阅读 · 0 评论 -
css 标签上 title 和 alt 的区别
内容title/alt: css 标签上 title 和 alt 的区别alt 是给搜索引擎识别, 在图像无法显示时的替代文本; title 是关于元素的注释信息, 主要是给用户解读 。当鼠标放到文字或是图片上时有 title 文字显示 。(因为IE不标准)在 IE 浏览器中 alt 起到了 title 的作用, 变成文字提示 。在定义 img 对象时, 将 alt 和 title 属性写全, 可以保证在各种浏览器中都能正常使用 。alt 属性和 title 属性的区别是:原创 2021-06-17 13:08:46 · 6829 阅读 · 0 评论 -
css常用单位总结: px / em / rem / vw / vh / vmax / vmin
css 的单位: px / em / rem / vw / vh / vmax / vmin (7个)px:1. px 是固定的像素, 一旦设置了就无法因为页面大小而改变em:1. em 是描述相对于, 应用在当前元素的字体尺寸, 所以它也是相对长度单位 。 一般浏览器字体大小默认为 16px, 则 2em == 32px; 2. 子元素字体大小的 em 是相对于父元素字体大小 3. 元素的 width/height/padding/margin 用 em 的话, 是相对于该元素的..原创 2021-06-17 13:07:50 · 5197 阅读 · 0 评论 -
CSS 伪元素
css 伪元素之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯提炼为一个系统的前端 CSS原创 2021-06-17 13:06:36 · 5958 阅读 · 0 评论 -
css 清浮动方法(总结8种方法)
1. 父级 div 定义 height1. 父级 div 手动定义 height, 就解决了父级 div 无法自动获取到高度的问题 。2. 只适合高度固定的布局, 要给出精确的高度, 如果高度和父级div不一样时, 会产生问题 。<body> <div class="div1"> <div class="left">Left浮动元素</div> <div class="right">Right浮动元素</div&原创 2021-06-17 10:01:43 · 7332 阅读 · 0 评论 -
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 一时得失莫要在意 。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1.clear 属性定义:1. clear 属性规定元素的哪一侧不允许其他浮动元素 。2. clear 属性定义了元素的哪边上不原创 2021-06-06 00:48:00 · 12591 阅读 · 1 评论