前端——正儿八经的CSS常规样式及常识梳理技巧向（五）

样式及常识梳理技巧向（五）"/>

前端——正儿八经的CSS常规样式及常识梳理技巧向（五）

写在开头：关于CSS的知识深似海，张鑫旭老师研究了十年时间，如今仍钻研其中，足可以说明其里面海量的知识点及独特的魅力。本人每每遇到一些难以透彻理解的CSS问题，便会去张鑫旭老师的博客寻找想要的答案。对于这门有点“小坑”却魅力十足的语言，接下来马上将开始技巧篇。内容肯定无法包含方方面面但应该还算实用，毕竟我也才入前端不久，本篇也将是近期的最后一篇CSS相关文章了。

重置样式，摆脱一些标签自带样式

      a {/* all: unset; 不建议使用该属性，虽然代码简洁，但是兼容性及浏览器引擎渲染问题会很麻烦*/text-decoration: none;color: initial;/* 字体颜色使用默认值，算是比较好的一种重置方式，不用考虑部分浏览器在点击时,字体颜色变化问题 */}button {border: 1px solid;/* 对于border-color来说是虽然在不设置的情况下会渲染为默认颜色，但是却不可以进行border-color：initial的设置 *//* 当然border-color属性本身也不存在继承（inherit）的情况 */cursor: pointer;outline: 0;/* 取消点击时边框变色的问题，至于其他的效果实现就不多做考虑了，可根据各自需求实现 */}input {outline: 0;/* outline该属性：本人最常用的场景便是清除原有的button、文本框的默认突出边框样式了 */}
复制代码

常用伪类与伪元素技巧

HTML代码：

    <div class="demo"><div class="demo1 demo0"></div><div class="demo2 demo0"></div><div class="demo3 demo0"></div><div class="demo4 demo0"></div><div class="demo5 demo0"></div></div>
复制代码

CSS代码：

      .demo {display: inline-flex;/* 第三篇布局篇已经说过了，对于flex布局就不多做说明了，兼容性问题，10年时间了，除非你非要用IE10-，其他问题不大 *//* 当然补充一点，flex与inline-flex的区别，其实就是一个是行内元素、一个是块级元素，即line-flex宽度可以由子元素撑开 *//* 且line-flex无margin属性，但是对于接下来我要实现的伪元素是绝对合适的 */border: 1px solid;/* 对于边框的重叠问题，同样的在布局篇也有说，最好不要使用margin负边距来实现，可能会因为父元素的margin问题而出现“bug” */margin: 0 auto;}.demo0 {background-color: aquamarine;width: 100px;height: 100px;}.demo0:not(.demo5) {/* 第四篇CSS动画篇有说明，一般情况下伪类选择器不会是较优解的，但是对于伪类中的:not还算较为常用的 */border-right: 1px solid;}.demo1:hover {/* 要说伪类中最为“脸熟”的莫过于:hover了，在用户体验方面，一行简单的代码最能实现不错的效果 */background-color: blueviolet;/* 剩下的例如:checked、:visited、:focus等等也都有实际的应用场景或者奇淫技巧的作用，但是这里就不展开说了 */}.demo::after{content: "";/* 对于伪元素来说content属性是必须的，哪怕其值为空，也是必须进行设置的。 */width: 100px;height: 100px;/* 对于伪元素中最为常用的::after与::before伪元素来说，他是不会出现在dom树上面的，所以常见的百分比设置是不会有作用的 */background-color: pink;/* 对于该类别的伪元素来说，虽然没有明确说明其为块级元素，但他是有margin属性的，且该属性是有效的 */transition: 1s;/* 小小地使用一下动画中的过渡属性，详情上一篇CSS动画篇已经有足够的说明了 */}.demo:hover::after{/* 伪类与伪元素的结合使用，其实由:、::来区分伪类与伪元素无论从语法上还是实际使用上都方便了很多 */opacity: 0;/* 当然你如果想要直接在伪元素上作用一个伪类，目前是无法实现的，毕竟伪元素并没有出现在dom树上 *//* 况且具体需求，应该用较优解的写法来实现，而不是去纠结这些，选择有时候比努力更重要 */}
复制代码

容易被忽视，但相当重要的CSS选择符

HTML代码：

    <div class="demo"><div class="demo1 demo0"></div><div class="demo2 demo0" data-border="border"></div><div class="demo3 demo0 demo0-1"></div><div class="demo4 demo0" data-border="border"></div><div class="demo5 demo0 demo0-1"></div></div>
复制代码

CSS代码：

      .demo {display: inline-flex;}.demo0 {width: 100px;height: 100px;background-color: antiquewhite;}.demo2 {transition: 1s;/* 再次回忆一次，过渡属性。transition-name并不是所有CSS属性都是能有作用的，常见的例如display、margin中的auto、background-color *//* 当时说的我所理解的原因即，这三个属性无“过渡”状态,那么我再来看一下background-color属性，其过渡状态可以看作与opacity相同的过渡状态 */}.demo1:hover {/* 我们来实现一下，通过一个元素的:hover，来达到多个元素的状态变化 */background-color: blueviolet;}.demo1:hover + .demo2 {/* 相邻兄弟元素 */background-color: blueviolet;}.demo1:hover ~ .demo0-1 {/* 同级的其他元素 */background-color: blueviolet;}div[data-border="border"]{/* 这个可以算是属性选择器的其中一种较复杂版，感兴趣的可以自行再去详细了解 */border-right: 1px solid;/* 其他的例如“ , ” “  ” “ > ”也都属于常用的CSS选择符，但是由于其太基础了，就不浪费篇幅详细说明了 */}
复制代码

CSS来实现各种基础形状

      .demo0 {/* 三角形 */width: 0;height: 0;border: 20px solid transparent;/* 盒模型分为IE传统盒模型与标准盒模型，而一般情况下浏览器都是根据IE传统盒模型渲染的，此时我们可以先将content大小设为0 *//* 在这种情况下，由于content大小为零，单边的边框就将会是一个三角形形状了 */border-top: 20px solid yellowgreen;}.demo1 {/* 梯形 */width: 10px;height: 5px;/* 由前两个?我们可以很明了的清除，width、height对应的是内边距长度，当然内边距长度如果改变外边距长度也是会跟着变化的 */border: 20px solid transparent;/* 可能有人疑惑为何我要先写整体border，再用部分border属性去覆盖，但是实践过这两个?后应该就可以明白了 *//* 整体border负责外边距的长度变化，且不会影响到内边距的长度 */border-top: 20px solid yellowgreen;/* 而部分border属性影响的是图形的高度变化 */}.demo2 {/* 平行四边形 */width: 100px;height: 100px;/* transform: skew(20deg);虽然transform: skew(20deg)等同于transform: skew(20deg,0)但是更建议下面这种写法 */transform: skewX(20deg);/* transform: skewX(20deg);即水平方向倾斜，角度越大（不超过90deg）倾斜程度及越大，在90deg时会出现“bug”问题 */margin-left: 30px;background-color: blueviolet;}.demo3 {/* 半圆 */width: 100px;height: 50px;/* 因为是半圆根据border-radius属性，我们要确定宽高，若是水平方向的半圆则高是宽的一半，反之则宽是高的一半 */border: 1px solid;border-radius: 50px 50px 0 0;/* border-radius包含四个属性方向：上左、上右、下右、下左沿顺时针方向，通过设置这四个属性值，我们最终就能够得到一个半圆 *//* 当然了存在的属性值必须要大于相对应的宽高，该?中就是要>=50px */}.demo4 {/* 其余如多边形等，都是可以通过基础图形拼装的，就不一一说明了，这是最后一个? *//* 简易对话框 */width: 100px;height: 50px;background-color: antiquewhite;border: 1px solid;position: relative;}.demo4::before {position: absolute;content: "";width: 15px;height: 15px;transform: rotate(45deg);/* 通过四边形2D平面旋转，与主内容四边形互相遮罩产生视觉效果差，从而实现一个简易版对话框 */border: 1px solid transparent;/* 当然其效果还有其他的实现方式，例如利用padding（内边距）等等，就不多做赘述了 *//* 较复杂的对话框样式则可以将border与content大小相结合进行使用，这里也不多做赘述了 */background: inherit;border-bottom: 1px solid;border-right: 1px solid;/* 利用不同边框的颜色不同，及背景颜色继承的特性从而实现边框效果 */bottom: -9px;left: 50%;/* 该图形还是涉及到了不少知识点的，且实现的方式也有不少，例如将伪元素的定位方式改成margin控制其实也是可以的 *//* 但是在考虑到margin可以潜在的负边距“bug”及边距重叠问题，还是更建议使用较优解定位来进行处理 */}
复制代码

隐藏元素的多种方式

      .demo0 {/* 关于隐藏元素的部分总结，多行代码就不做说明了，这里的都是单行CSS即可视觉上隐藏元素 *//* 不占用位置空间的,但是两个all属性的意义其实是相似的，并因为浏览器引擎渲染问题不建议使用 *//* 写在这里真的是为了可能出现的奇葩面试题，实际操作中display：none足够用了 */all: initial;all: unset;display: none;/* 占用位置空间的隐藏，常用的为opacity：0可以用于动画效果， visibility: hidden;与visibility: collapse;除表格外用法相同*//* 还有五条都是transform（动画转换）包含的属性，除了后两个移出到页面之外，也都是有需求场景的。当然虽然那两个属性看似移出到页面之外 *//* 但也是占用了空间的，这点与定位有所不同 */opacity: 0;visibility: hidden;visibility: collapse;transform: scale(0, 0);transform: rotateX(90deg);transform: rotateY(90deg);transform: translateX(-9999px);transform: translateY(-999px);} 
复制代码

禁止用户选中文本

      .demo0 {/* hack尽量少写，其实对于屏蔽选中文字有好处也有坏处，具体场景具体实现为好 *//* 况且对于一些友好的框架，如angular来说，本身就已经帮你写好hack了 */-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;}
复制代码

到底换不换行，怎么换行的问题

      .demo0 {/* 不换行 */white-space: nowrap;/* 只能在半角空格或连字符处换行。 */word-break: keep-all;/* 默认自动换行就不做说明了 *//* 在连续数字或符号或字母下的强制换行 */word-break: break-all;}
复制代码

对于图片的简单处理

      img{/* 可以被动画效果支持，但属性会互相覆盖，只支持一种filter效果 */filter: blur(5px);/* 图片进行高斯模糊数值越大越模糊 */filter: brightness(0.5);/* 图片进行明暗处理，当为0~1区间的时候为图片较原图较暗，当大于1则高亮 */filter: contrast(1.5);/* 图片进行对比度调整，数值越大曝光效果越大 */filter: grayscale(0.8);/* 其实可以被看做是黑白图像制作、即灰度图像 *//* 其实前端要做的事情已经越来越重要了，一些简单的UI工作，也可以用些许CSS属性实现了 *//* 还有一些其他的filter所包含的属性，具体情况可以自行查证实践 *//* 可能还会有人想到clip属性（图片截取），但是该属性在MDN当中已经明确说明已被废弃，不太建议使用 */}
复制代码

对于文本的简单处理

      .demo0{/* 每个“连续”英文字符串首字母大写 */text-transform: capitalize;/* 所有英文字母小写 */text-transform: lowercase;/* 所有英文字母大写 */text-transform: uppercase;/* 字符、文字、字母之间的间距，支持负数 */letter-spacing: 2px;/* 保留空白符,但不会“正常”换行 */white-space: pre;/* 保留空白符，且正常换行 */white-space: pre-wrap;}
复制代码

背景颜色的简单处理

      .demo0 {/* 单色颜色设置 */background-color: aqua;/* 渐变色（混合色）设置，background-color、background-image若同时出现，用户所能看到的优先是background-image属性 */background-image: linear-gradient(red,yellow,blue);/* linear-gradient(direction, color-stop1, color-stop2, ...); 默认方向为从上到下，可以指定角度或方向*//* color-stop是由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）*//* 当然了千万不要小看渐变这个小小的属性，他的特效作用可不简单的只有这一点，只是具体其他效果实现就不细说了 */}
复制代码

最后说两句：其实关于CSS的内容还有太多太多可以讲的技巧，但是有些限于篇幅原因，有些限于想不起来了，也就不再多一一说明了。但是CSS的魅力却是已经被掀开了一角神秘的面纱，具体的有关CSS的世界只有亲自去体会才能明白更多。而下一篇也要开始js相关篇章了。

转载于: