CSS
关注
分享
扫一扫
文章平均质量分 72
css
高先生的猫
求知若渴，虚心若愚。
展开
-
前端 一键换肤 的几种方案
现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.其实之前就想了解和实现 “一键换肤” 功能，但是由于种种原因一直拖到了现在.css样式覆盖实现核心通过切换 css 选择器的方式实现主题样式的切换.在组件中保留不变的样式，将需要变化的样式进行抽离提供多种样式，给不同的主题定义一个对应的 CSS 选择器根据不同主题设置不同的样式实现下面通过 vuex 存储和控制全局的主题色原创 2022-04-11 09:22:36 · 764 阅读 · 0 评论 -
九个帮你提高开发效率的现代CSS框架
1、BootstrapBootstrap是 Twitter 推出的基于html、css、JavaScript 开发的简洁、直观、强悍的CSS开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。Bootstrap 推出后颇受欢迎，一直是GitHub上的热门开源项目。Bootstrap 的优点：流行框架：Bootstrap 是最流行的开源项目之一。在遇到问题时可以很容易的找到解决方案。功能齐全：它不仅是一个开发框架，还是一个原创 2022-04-02 11:22:42 · 1339 阅读 · 0 评论 -
CSS 实现新拟态(Neumorphism) UI 风格
新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」新拟态 UI 风格与扁平、原创 2021-08-13 10:07:35 · 1560 阅读 · 0 评论 -
一行CSS实现全站中文简繁转换
一、不BB，直接解密就是这么一行css：font-variant-east-asian: traditional;表示当前文字使用繁体变体。再加粗显示一下：font-variant-east-asian: traditional;例如：body { font-variant-east-asian: traditional;}就可以让整个页面的简体中文变成繁体。二、需要字体支持-OS X和iOS有效卧槽，css居然有这么炫酷的能力，那为何没几个人知道.原创 2021-06-23 09:34:46 · 442 阅读 · 0 评论 -
CSS变量简介及基本使用方法
复杂的网站都会有大量的css代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换，效率不高且容易出错。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color会比#00ff00更易理解，尤其是这个颜色值在其他上下文中也被使用到。概念自定义属性（有时候也被称作css变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复...原创 2021-06-22 14:17:34 · 647 阅读 · 0 评论 -
隐藏搜索框：CSS 动画正反向序列
顶部菜单栏中放置搜索框是一个常见的场景，但如果搜索功能使用的不那么频繁，同时菜单栏中内容本来就比较拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框，如下图所示：实现思路起始状态时搜索框没有显示，鼠标移入后从右侧滑入，因此不能使用搜索框自身的 hidden 或透明度属性，需要使用父元素的overflow: hidden将其隐藏，并把输入框移动到父元素的显示范围以外，需要时再移动回来。css中有transition...原创 2021-06-22 14:13:33 · 479 阅读 · 1 评论 -
css ::marker伪元素使用方法
现在，在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色，大小或类型很简单。利用css的:marker伪元素，我们可以很轻易的更改内容以及项目符号和数字的某些样式。::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上。::marker是什么？css伪元素::marker是从CSS Pseudo-Elements Level 3开始新增，CSS Pseudo-Elements Level 4中完善的一个比较新的伪...原创 2021-06-22 14:09:34 · 4568 阅读 · 0 评论 -
css 炫酷 流光按钮
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t...原创 2021-06-09 09:33:23 · 281 阅读 · 0 评论 -
css选择最后一个元素
ES6允许按照一定模式从数组或对象中提取值，然后对变量进行赋值，称为解构。只要等号两边的模式相同，左边的变量就会被赋予对应的值，这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。let [a, b, c] = [1, 2, 3] 同时定义多个变量，a匹配1、b匹配2、c匹配3解构赋值允许指定默认值，即左边变量指定默认值，右边没有对应的值，会优先输出默认值。let [x, y = 'b'] = ['a'] // x = 'a', y = 'b' x匹配字符a，y..原创 2021-06-04 14:40:18 · 37826 阅读 · 0 评论 -
css底部固定的5种方法
本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。方法一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。html代码：<body> <div class="wrapper"> ..原创 2021-06-08 09:18:20 · 1060 阅读 · 0 评论 -
CSS元素层叠问题与z-index属性
所谓元素层叠问题，就是某些元素原本你希望它出现在外层，结果却被其他元素遮挡了。怎么解决这个问题？解决这个问题前，先要搞清楚浏览器渲染元素的规则1、默认按元素出现先后顺序渲染默认情况下，渲染元素时，浏览器按照元素的先后顺序进行渲染。上面3个div按照先后顺序渲染，div1最先渲染，出现在最后面。body { background-color: #ccc;}.box { width: 300px; margin: 0 auto; ..原创 2021-06-03 10:07:50 · 657 阅读 · 0 评论 -
使用 CSS prefers-* 规范，提升网站的可访问性与健壮性
文本将介绍css媒体查询中新增的几个特性功能：prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-data利用好它们，能够很好的提升我们网站的健壮性与可访问性！互联网发展到今天，对于我们的前端而言，我们的关注点不应该仅仅是我们产出的页面能不能用，也需要更多的去关注我们的页面好不好用，有没有照顾到更多的用户群体？要知道，截至 202..原创 2021-06-02 16:59:52 · 613 阅读 · 0 评论 -
CSS filter有哪些用途
cssfilter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为filter函数<filter-function>或使用url添加的svg滤镜。filter: <filter-function> [<filter-function>]* | nonefilter: url(file.svg#filter-element-id)<filter-function>可以用于fi...原创 2021-06-02 16:56:46 · 335 阅读 · 0 评论 -
如何自己写出一套可维护的CSS库？
如何写出一套可维护的css库？不妨谈谈css的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。OOCSSOOCSS,字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论，虽说是理论，实则更像一种程序员间约定的规范：Separate structure and skin（分离结构和主题）减少对html结构的依赖Separate container and cont...原创 2021-06-02 16:42:44 · 193 阅读 · 0 评论 -
z-index 在 iphone ios 无效的bug
场景重现:在微信开发者工具可以正常显示,在安卓真机手机可以正常显示,在ios手机真机无法正常显示，虽然内容有，但是看不见原因:子元素position:fixed;父元素position:fixed;，只需要将父级的fixed去掉或者子级的fixed去掉即可...原创 2021-02-25 16:18:40 · 939 阅读 · 0 评论 -
object-fit和object-position 使用详解
当我们给img标签加上固定的宽和高时，img标签中的图片会默认被拉伸变形，如图：<body><img src="./demo.jpg" alt=""><style> img{ width: 300px; height: 150px; }</style></body>图1-给img元素加上固定宽高后图片被拉伸变形如果我们需要让该元素占据固定的宽高大小，而又不希望图片被拉伸.原创 2021-02-18 16:39:41 · 5249 阅读 · 1 评论 -
20个让你效率更高的CSS代码技巧
在本文中，我们想与您分享一个由各大css网站总结推荐的20个有用的规则和实践经验集合。有一些是面向css初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。好了，我们开始。1.注意外边距折叠与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：html<div class="square red"></div>原创 2021-02-07 11:22:11 · 240 阅读 · 1 评论 -
用1像素透明图片，实现图片cover、contain效果
为了优化网络性能，首先生成一张1像素的透明gif base64图片：<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" style="width:20px;border:solid 1px #999;" />使用背景图片的size属性的cover、contain值实现图片效果，利原创 2021-02-03 17:46:17 · 1522 阅读 · 0 评论 -
HTML中通过CSS方式隐藏元素
1 通过style属性中的 display : none { 这种是最常用方式之一 }display : none这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已2 通过style属性中的 visibility : hidden { 这种也是最常用的方式之一 }visibility : hidden3 通过相对定位移动当前元素...原创 2021-01-28 09:40:26 · 270 阅读 · 0 评论 -
css加载失败的原因是什么？
有很多刚刚接触css的新手有时会遇到css加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明CSS加载失败了。那么为什么会加载失败？css加载失败的原因是什么？造成css加载失败的原因有很多，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。最常见的失败原因有以下几类：1、网络原因IIS空间不足、浏览者网速慢、空间速度慢等网络因素是造成CSS加载失败的原因之一，其具体表现为：当我们打开网页时，网页布局完整，但却没有任何布局样式显示。2、..原创 2021-01-06 11:20:16 · 1525 阅读 · 1 评论 -
css进度条怎么写？
进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。我们应该写一个样式为.container的div用来包含我们的进度条，其次是用样式为.title的div来包裹我们的标题。接下来，我们将添加样式为.bar的div来包含填充和未填充的进度条样式。最后，我们将在.bar里添加样式为.bar-unfill 和 .bar-fill 的span标签。<div> <div>原创 2021-01-06 11:19:04 · 845 阅读 · 0 评论 -
7种新型的CSS长度单位
众所周知css技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。今儿，我就准备向大伙儿介绍一些你们之前可能很少见过css家伙们。他们每个都是度量的单位，类似pixel和em这样..原创 2021-01-06 11:14:44 · 275 阅读 · 0 评论 -
Sass: 变量名中使用字符串模板
问题使用 Sass 的时候，我们可能在某些场景下使用到字符串模板，如：@mixin set-border($side) { border-#{$side}: solid 1px #000;}.header { @include set-border("top");}这些会编译成：.header { border-top: solid 1px #000; }这里主要是想在使用变量的同时去渲染不一样的 CSS 属性。但是现在 Sass 还不允许直接在..原创 2020-12-23 13:56:53 · 1492 阅读 · 0 评论 -
CSS：outline的用法，用outline实现镂空效果
1.outline的用法outline用法和border类似， 如下：.outline { outline: 1px solid #000;}两者表现也类似， 都是给元素的外面画框，但是，作用却不一样。2.outline的特性（1）outline是一个和用户体验密切相关的属性，与focus状态和键盘访问关系密切。在访问网页的时候，如果鼠标坏了，这时候我们一般会用tab键来按次序不断focus控件元素，包括：链接、按钮、输入框等表单元素，或者focus设置了tabindex的普通原创 2020-12-23 13:53:44 · 3443 阅读 · 0 评论 -
css数值(百分比|负值)
今天为什么要给大家讲解这个东西呢，因为css这部分，尤其是数值这部分感觉非常简单，但是尤其是简单的，却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。width height 百分比当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。 <div> <div>注意这里</div> <div>我是分割线</div> </d.原创 2020-12-08 16:14:47 · 565 阅读 · 0 评论 -
background背景相关属性详解
css背景缩写属性可以在一个声明中设置所有的背景属性,css背景图像支持引入多个图像.主要属性有:background-color,background-image,background-repeat,background-position,background-attachment,background-size,background-origin,background-clipbackground-color背景颜色:指定要使用的背景颜色,例如:background-color:#f..原创 2020-12-08 16:13:23 · 946 阅读 · 0 评论 -
移动端适配
首先是名词介绍：像素：Pixel，就是物理像素：也就是设备像素逻辑像素：（css像素）单位为px设备像素比：devicePixelRatio，（在高倍屏会出现1px变大的问题）。css单位em：相对于当前对象内文本的字体尺寸css单位rem： 即root em，root指的是根（html标签）1px问题京东商城解决方案：伪元素 +scale .div::after { content: ""; width: 200%; height: 200%;...原创 2020-12-04 13:47:50 · 238 阅读 · 0 评论 -
打造自适应网站只用一个 CSS 属性就够了
用一个css属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。使用clamp()CSS函数，我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);在这里！你已经完成了说明clamp()的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。使用方法如下： minimum 最小值：例如16px flexible 弹性值...原创 2020-12-04 13:43:47 · 153 阅读 · 2 评论 -
css 中英文换行的相关写法
强制换行用white-space的normal，pre-wrap，pre-line换行，即使有overflow:hidden;text-overflow:ellipsis;也不影响换行。值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似html中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序...原创 2020-12-03 16:53:16 · 7868 阅读 · 0 评论 -
超越媒体查询：使用更新的HTML和CSS功能进行响应式设计
除了使用媒体查询和现代css布局（如flexbox和grid）来创建响应式网站外，我们还可以做好某些被忽视的事情来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕html和css），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。真正的响应式图像还记得当我们可以在图片上写死 width: 100% ，然后就可以下班了吗？当然，这样做还是有效果的...原创 2020-12-03 16:51:27 · 232 阅读 · 0 评论 -
8个JavaScript库可更好地处理本地存储
Local Storage Bridgegithub.com/krasimir/ls…如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页，你不必用艰难的方式。Local storage bridge在这里让任务变得更简单。基本使用：// 发送lsbridge.send(‘app.message.error’, { error: ‘Out of memory’ });// 监听lsbridge.subscribe(‘app.message.error’, function(原创 2020-12-08 11:54:33 · 159 阅读 · 0 评论 -
前端如何实现黑夜模式
深色模式为目前网络发展的一大趋势，可以看到大量的网站为了提高网站的体验都添加了深色模式。深色模式在光线不足的情况下看起来不会那么刺眼，能够很好的保护我们的眼睛。在这边文章中主要讲如何使用CSS和JS实现深色模式和浅色模式的任意切换分析需求假设有这么一个页面，我们需要自由切换深色模式和浅色模式。那么就需要在不同模式使用不同的css，这里可以通过两种方式一种是直接引入不同的css文件，另外一种通过更改css变量值的方式进行更改样式，下面是浅色模式的截图具体实现首先定义浅色模式的变量名和变量值原创 2020-11-20 10:46:44 · 2565 阅读 · 3 评论 -
css设置margin-top失效及解决办法
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况:一、兄弟元素之间margin-top失效先看下面代码：<div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div...原创 2020-11-19 15:45:21 · 952 阅读 · 0 评论 -
css强制换行
强制换行用white-space的normal，pre-wrap，pre-line换行，即使有overflow:hidden;text-overflow:ellipsis;也不影响换行。值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似html中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序...原创 2020-11-19 15:44:36 · 873 阅读 · 0 评论 -
移动端1px解决办法
最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1物理像素。在讲原理之前，先跟大家说一个概念，就是设备像素比DPR(devicePixelRatio)是什么DPR = 设备像素 /css像素(某一方向上)这句话看起来很难理解，可以结合下面这张图（1px在各个DPR上面的展示），一般我们h5拿到的设计稿都是750px的，但是如果在DPR为2的屏幕上，手机的最小像素却是要用2 * 2px来进行绘制，这也就导...原创 2020-11-19 15:38:33 · 370 阅读 · 0 评论 -
前端媒体查询 常见电脑屏幕分辨率
1024*600 （常见8.9寸电脑使用）1024*768（常用10.4、12.1、14.1、15寸电脑使用）4:31280*1024（常用14.1、15寸电脑使用）5:41600 * 900 16:9 (非主流)1440*1050（常用15、16.1寸电脑使用）4:31600*1200（常用15、16.1寸电脑使用）4:31280*800（常见10.8、12.1、15.4寸电脑使用）16:101366*768（常见15.2寸电脑使用）15:10 （主流）1280*854（不常见）16:9原创 2020-11-04 09:00:53 · 2362 阅读 · 1 评论 -
css设置margin-top失效及解决办法
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况:一、兄弟元素之间margin-top失效先看下面代码：<div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div> <原创 2020-10-26 14:35:53 · 2350 阅读 · 1 评论 -
16个非常有用的CSS伪选择器
这篇文章鼓励构造 UI 时使用更多纯css和更少的js。熟悉所有的css是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。1、::first-line | 选择首行文本这个伪元素选择器选择换行之前文本的首行。p:first-line { color: lightcoral;}2、::first-letter | 选择首字母这个伪元素选择器应用于元素中文本的首字母。.innerdiv p:first-letter { c...原创 2020-09-29 14:38:13 · 275 阅读 · 1 评论 -
Js移动端自适应代码_rem布局
rem 是css的长度单位，它是相对于 <html> 元素的 font-size 的相对值。假设html{ font-size: 20px; }，那么 1rem 就等于 20px。js代码rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ?...原创 2020-09-29 14:33:49 · 1023 阅读 · 0 评论 -
解决-webkit-box-orient: vertical在webpack打包后丢失问题
问题描述在项目中需要使用多行文本溢出显示省略号(…)的时候，首先想到的css如下：overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;该方式比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。但是在现在一些框架中如(vue,react项目中使用)，会发现本地正常，打包线上后，该属性丢失。因为原创 2020-09-29 14:29:37 · 783 阅读 · 0 评论