写在开头：关于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相关篇章了。
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
