CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

最新推荐文章于 2024-07-13 11:50:40 发布
最新推荐文章于 2024-07-13 11:50:40 发布
阅读量286 收藏
点赞数
分类专栏： css 文章标签： css

转发

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

2017-11-13  微醺岁月  SegmentFault

之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS的一些黑魔法小技巧，无奈我 CSS 一直很渣，没什么干货，最近写了一个 Chrome 插件 GayHub，算是把 GitHub 的样式审查了个变，在写的过程中，也收获了很多关于 CSS 的小技巧，尤其是开始的第一个技巧，学习到了很多，于是再加上一波搜集，就诞生这篇博文，欢迎补充~~~

好好学习天天吸纳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS黑魔法
聪明的竹子的博客
04-12 721
CSS黑魔法，可以理解为。你用它的情况很少，但是在你需要黑魔法来实现一下CSS布局或者效果的时候，你会发现它非常好用。 以下，是我在工作中，用到的黑魔法。写下来是方便以后查阅。 撑起图片高度 它的实现效果利用该元素的 position:relative 和 padding-top 的值来设置。但是，得有前提条件设置这个元素的 width: 100%;height: 0。 最后,设置...
前端奇怪的知识
m0_50967270的博客
11-05 153
前端奇怪的知识1、解决移动端1px像素问题1.1、border-image（不建议使用）1.2、background-img渐变1.3 、CSS3 box-shadow（不建议）1.4 、:before:after和transform（最优）2、前端加密2.1 base64加密2.2 md5加密2.3 sha1加密 1、解决移动端1px像素问题 1.1、border-image（不建议使用） .box { border-width: 1px 0px; -webkit-border-imag
CSS Secrets CSS 魔法
04-03
CSS Secrets这本书的主要目标受众是正在由中级向高级进阶的 CSS 开发者，是学习CSS的葵花宝典。
js 黑魔法之使用 atob 解码 utf-8 字符
青岑的博客
03-19 4609
原文地址 转载文章，侵删 场景是这样的, 后台传来经过 base64 编码的字符串(原始字符串含有中文), 需要在前端进行解码, 但 js 中的 atob 解码方法不支持 unicode 字符集( btoa 也是), 换言之, 中文被解码出来是会乱码的, 那怎么办呢? 此时就要用到今天介绍的黑魔法了. 黑魔法 // 使用utf-8字符集进行base64编码 function utoa(str)...
书写CSS的5个小技巧让你的样式更规范
09-22
以下是五个关于书写CSS的小技巧，旨在使你的样式表更加规范： 1. **按字母顺序排列属性**： 排列CSS属性按照字母顺序进行，如示例所示，可以使代码看起来更整洁，方便查找特定属性。当需要快速定位或修改某属性时...
帮我写出更好的CSS代码的一些技巧
09-27
网页制作Webjx文章简介：这只是一些帮我写出更好的代码的一些技巧。当然这绝不是此文的结束，当我发现了其它技巧时，我会继续分享的。 1. Reset真的，要一直使用一个reset，无论是使用Eric Meyer Reset、YUI Reset、...
CSS黑魔法之计数器counter的使用技巧
09-24
主要介绍了CSS3黑魔法之计数器counter的使用技巧,文中甚至用它来实现了一个小型的加法计算器,这对于CSS来说还是十分exciting的,需要的朋友可以参考下
CSS黑技巧（1）
weixin_34148456的博客
10-22 98
css黑技巧 多行文本溢出显示省略号(...)的方法 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//规定可现实几行 -webkit-box-orient: v...
前端黑魔法之css3以及h5
不破小子
02-29 998
1.对于超出文本域的文字处理，使用省略号处理(属于css3属性)： 　　　　　　overflow:hidden; 　　　　　　text-overflow:ellipsis; 　　　　　　-o-text-overflow:ellipsis; 　　　　　　white-space:nowrap; 　　　　　　width:100%;
不要再在JavaScript中写 CSS了
weixin_34010566的博客
08-01 167
本文作者是 react-css-modules 和 babel-plugin-react-css-modules 的作者。并不是对 CSS in JavaScript: The future of component-based styling，或是使用样式组件的反对，而是一种补充，web 开发者要了解自己的需求，明白自己使用 styled-co...
黑魔法和知识点
weixin_33898233的博客
04-20 230
http://blog.sunnyxx.com 转载于:https://www.cnblogs.com/mkai/p/8889285.html
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 683
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 625
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1271
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1201
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS关于居中的问题
热爱WebGIS的博客
07-10 652
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
css黑魔法之计数器counter的使用技巧
07-13
总结而言，计数器(counter)是CSS中一项非常实用的黑魔法技巧。通过创建、更新和引用计数器的值，可以在样式规则中生成序号或标记，并且可以通过自定义显示格式来控制计数器的外观。 ### 回答3： CSS中的计数器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值