CSS 黑魔法小技巧,让你少写不必要的JS,代码更高雅ITeye - 千亿集团

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

2019-01-10 17:34:17 | 作者: 振博 | 标签: 内容,能够,运用 | 浏览: 2989

3、运用 nth-of-type 挑选某范围内的子元素 table表格红绿相间,显现的愈加直观
 table 
 tbody 
 td 1 /td 
 /tr 
 td 2 /td 
 /tr 
 td 3 /td 
 /tr 
 td 4 /td 
 /tr 
 td 5 /td 
 /tr 
 td 6 /td 
 /tr 
 /tbody 
 /table 
tbody tr:nth-of-type(2n){ 
background-color: red;
tbody tr:nth-of-type(2n+1){
background-color: green;
}

你也这样来做,挑选5-10的子元素。
table tr:nth-child(n+5):nth-child(-n+10) {
 background-color: red;
}
4、让文字像古诗相同竖着呈现 有时分,需求容器的文字从上到下摆放,而不是从左往右摆放,如图所示:

这是segmentfault的回到顶部,他的完成很简略,便是设置必定宽度让其折行,假如我要完成这种需求呢?

writing-mode 这个 CSS 特点,咱们是不是很少见到,很少用到!咱们往往称不常见的东西为“冷僻”,就像是不常见的文字咱们叫“冷僻字”,因而不常见的 CSS 特点,咱们能够叫做“冷僻特点”, writing-mode 给咱们的感觉便是一个“冷僻特点”,很弱,可有可无。这个特点能够追溯到 IE 5.5 年代,兼容性是适当好的。

 h4 咏柳 /h4 
 p 碧玉妆成一树高, br 万条垂下绿丝绦。 br 不知细叶谁裁出, br 二月春风似剪刀。 /p 
 div 
 h4 咏柳 /h4 
 p 碧玉妆成一树高, br 万条垂下绿丝绦。 br 不知细叶谁裁出, br 二月春风似剪刀。 /p 
.verticle-mode {
 writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl; 
 writing-mode: vertical-rl;
/* IE7比较弱,需求做点额定的动作 */
.verticle-mode {
 *width: 120px;
.verticle-mode h4,
.verticle-mode p {
 *display: inline;
 *writing-mode: tb-rl;
.verticle-mode h4 {
 *float:right;
}

更多细节与评论请移步张鑫旭教师的这篇文章: 改动CSS国际纵横规矩的writing-mode特点

5、完成鼠标悬浮内容主动撑开的过渡动画 需求为一个列表添加个动画,容器的高度是不确定的,也便是高度为 auto ,悬浮时分撑开内容有个过渡动画

如下图所示:

而用 CSS3 完成的话,因为高度的不确定,而 transtion 是需求详细的树枝,所以设置 height:auto 是无法完成作用的,能够经过 max-height 这个特点直接的完成这么个作用, css 款式是这样的:

 ul 
 div 列表1 /div 
 div 列表内容 br 内容列表内容 br 内容列表内容 br 内容 /div 
 /li 
 div 列表1 /div 
 div 列表内容 br 内容列表内容 br 内容列表内容 br 内容 /div 
 /li 
 div 列表1 /div 
 div 列表内容 br 内容列表内容 br 内容列表内容 br 内容 /div 
 /li 
 /ul 
.bd {
 max-height:0;
 overflow:hidden;
 transition: all 1s ease-out;
li:hover .bd {
 max-height: 600px;
 transition-timing-function: ease-in;
}

跟前面 GIF 差不多,这儿就不录 GIF 了,有爱好的能够自己测验感受一下

6、运用 pointer-events 禁用 a 标签事情作用 在做 tab 切换的时分,当选中当时项,禁用当时标签的事情,只要切换其他 tab 的时分,才从头请求新的数据。

pointer-events 是一个用于 HTML 指针事情的特点。

pointer-events 能够禁用 HTML 元素的 hover/focus/active 等动态作用。

默许值为 auto ,语法: pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

 ul 
 a href="https://google.com" aaa /a 
 /li 
 a href="https://facebook.com" bbb /a 
 /li 
 a href="https://stackoverflow.com" ccc /a 
 /li 
 /ul 
.active{
 pointer-events: none;
 }

如同没什么作用:joy:

7、 CSS 怎么完成文字两头对齐 红框地点的文字有四个字的、三个字的、两个字的,假如不两头对齐能够挑选居中对齐,或许右对齐。可是假如要想文字两头对齐呢?
 div 名字 /div 
 div 手机号码 /div 
 div 验证码 /div 
 div 账号 /div 
 div 暗码 /div 
div{
margin:10px 0; 
width:100px;
border:1px solid red;
text-align-last: justify;
}

8、运用 :not() 去除导航上不需求的特点 有时分导航栏需求之间需求用逗号,进行阻隔,可是最终一个不需求
 ul 
 li a /li 
 li b /li 
 li c /li 
 li d /li 
 li e /li 
 /ul 
li{
list-style:none;
margin-bottom:10px;
display:inline-block;
ul li:not(:last-child)::after {
 content: ",";
}

当然,你能够运用 .nav li + li (不包括榜首个li) 或许 .nav li:first-child ~ li (不包括最终一个li), 可是运用 :not() 的目的特别明晰, CSS 挑选器依照人类描绘它的办法界说边框。

或许,你现已学习了一些关于 运用 :not(),你还能够测验:

/* 挑选1到3的元素并显现 */
li:not(:nth-child(-n+3)){
 display: none;
}
9、移动web页面支撑弹性翻滚 在IOS机型中,非body元素的翻滚条会十分不流通,又不想用JS模仿翻滚条。

传统 pc 端中,子容器高度超出父容器高度,一般运用 overflow:auto 可呈现翻滚条拖动显现溢出的内容,而移动 web 开发中,因为浏览器厂商的体系不同、版别不同,导致有部分机型尤其是 IOS 机型不支撑弹性翻滚,然后在开发中制作了所谓的 BUG 。

body{
-webkit-overflow-scrolling: touch; /* ios5+ */
overflow:auto;
}

-webkit-overflow-scrolling 特点具有承继作用,所以在 body 上设置即可,这样部分翻滚条就十分的流通了。

一切翻滚条都适当的流通了

10、美化浏览器自带的 radio , checkbox 特点 规划师:你那个单选框按钮好丑啊,跟我的规划稿差好远。程序员:我有什么办法,浏览器便是这样的。。。

记住刚开始写页面时分,被浏览器各种默许的 UI 款式厌恶到了,最初的确也没啥办法,横竖也不影响功用,就那样吧。

先讲一下原理:checkbox hack技能

咱们运用 CSS 一些特别的挑选器,然后合作单选框以及复选框自带的一些特性,能够完成元素的显现躲藏作用。然后经过一些简略的扩展,咱们能够不运用任何 JavaScript 代码完成相似:自界说的单复选框,“更多”打开与收起作用,选项卡切换作用,或是多级下拉列表作用等等。

信任许多前端开发人员都会遇到 boss 让修正 checkbox 和 radio 款式,究竟自带的款式太丑了。后来咱们发现修正自带款式并不是那么简略,最终直接使出杀手锏——点击之后替换图片。

今日教咱们一种办法,不必替换图片,随意修正款式。

先讲一下原理:两个要害东东,一是伪类挑选器 :checked ,表明对应控件元素(单选框或是复选框)选中时的款式;二便是加号 + 相邻兄弟挑选器,这个符号表明挑选后边的兄弟节点。所以,两者合作,就能够轻松自如操控后边元素的显现或许躲藏,或是其他款式了。

而怎么让单复选框选中和不选中了,那便是 label 标签了哈, for 特点锚定对应的单选框或是复选框,然后点击这儿的 label 标签元素的时分,对应的单复选框就会选中或是撤销选中。然后,就有上面的作用啦!

这儿只给一个 radio 单选框的代码,仅供参考:

 div 
 label 
 span 前端工程师 /span 
 input type="radio" name="radioName" id="radioName1" hidden/ 
 label for="radioName1" /label 
 /label 
 label 
 span 后端工程师 /span 
 input type="radio" name="radioName" id="radioName2" hidden/ 
 label for="radioName2" /label 
 /label 
 label 
 span 全栈工程师 /span 
 input type="radio" name="radioName" id="radioName3" hidden/ 
 label for="radioName3" /label 
 /label 
 /div 
.radio-beauty-container {
 font-size: 0;
 $bgc: green;
 %common {
 padding: 2px;
 background-color: $bgc;
 background-clip: content-box;
 .radio-name {
 vertical-align: middle;
 font-size: 16px;
 .radio-beauty {
 width: 18px;
 height: 18px;
 box-sizing: border-box;
 display: inline-block;
 border: 1px solid $bgc;
 vertical-align: middle;
 margin: 0 15px 0 3px;
 border-radius: 50%;
 :hover {
 box-shadow: 0 0 7px $bgc;
 @extend %common;
 input[type="radio"]:checked+.radio-beauty {
 @extend %common;
}

美化radio单选框在线预览地址: 点击我呀

美化checkbox复选框在线预览地址: 点击我呀

更多关于这方面的介绍和比如能够参看 张鑫旭 大神的这篇文章: CSS radio/checkbox单复选框元素显隐技能

11、改动 input 焦点光标的颜色 规划师觉得默许的光标颜色有点与全体规划风格不符合,有点突兀,想换成赤色的
 input value="This field uses a default caret." / 
 input value="I have a custom caret color!" / 
input {
 caret-color: auto;
 display: block;
 margin-bottom: .5em;
input.custom {
 caret-color: red;
}

12、 rem 布局不再运用 JavaScript 设置

这儿不讨论 rem 的原理以及细节,还不了解的童鞋主张去恶补一下。

有时分,移动端用 rem 布局时分,依据不同的屏幕宽度要设置不同的 font-size 来做到适配,要写一坨 JS 来设置,能不能不必JS呢?

例如:以 750px 规划稿作为基准,根节点设置 font-size 为 100px ,只考虑 DPR 为 2 的状况,只考虑最简略的状况

document.querySelector(html).style.fontSize = `${window.innerWidth / 7.5 }px`;

现在移动端 css3 单位 vw , wh 兼容性现已很不错了,在不需求兼容太低版别的安卓机状况下能够这样来:

html{
font-size: 100vw / 750
}

就这么简略的设置, rem 就能够运用了

13、运用 transparent 特点完成各种三角形,提示框 在不运用图片的状况,完成一个简略的三角形箭头
#triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid red;
 border-bottom: 50px solid transparent;
}

复杂点的话,相同的原理还能够完成一个 五角星 ,原理都是运用 transparent 的通明特点。

14、让网站一切图片变成是非颜色的 记住2008年时分汶川大地震时分,许多网站图片都变成是非颜色吊唁逝者
 img src="https://user-gold-cdn.xitu.io/2017/9/25/0844cf44a8d8c4ed026d6c488a6e9b80?
imageView2/1/w/500/h/200/q/85/interlace/1" 
img.desaturate {
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
}

15、完成文字的波涛线作用 完成文字波涛线的着重作用,如图所示

信任咱们关于 text-decoration 这个特点并不生疏,在重置 a 标签的默许款式时,咱们常常要这样写: text-decoration: none; 可能对它了解的人也很少,实际上 text-decoration 是一个复合特点,由 line 、 style 和 color 组成。

所以咱们能够完成这样的作用:

惋惜的是 line 只要 underline (下划线)、 overline (上划线)和 line-through (删去线)。假如忽然需求下划波涛线,怎么办呢?不要急,奇特的 CSS 会帮你做到的。首要,你需求先了解一下 突变的运用技巧 。

说一下这儿的思路,咱们首要要用两段突变结构一个根本元素:X(这儿我就不放图了),下一步就比较重要了,咱们要截取X的上半部分,得到一个V,然后结合 repeat 构成波涛线。下面是用 scss 写的一个 mixin ,便利今后运用。

@mixin waveline($color,$h) {
 position: relative;
 ::after {
 content: ;
 display: block;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 height: $h;
 background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
 linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
 background-size: $h * 2 $h * 2;
 }

这些技巧在当时版别的 Chrome , Firefox , Safari , 以及 Edge , 和 IE11 能够作业,移动端根本都没问题, IE 重度开发者慎用。

相关兼容性自行查找: https://caniuse.com/ 风趣的 GitHub 库房

国服榜首切图仔的 CSS 库房:你想知道的 CSS 奇技淫巧,在这儿,都有。 iCSS -- interesting css

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表千亿集团立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章