CSS必知必会备忘录（非常实用）

Alliestrasza
405 阅读12分钟

CSS是用来表现HTML元素应该如何在网页上呈现的层叠样式表，它的全称是：Cascading Style Sheet，简称（CSS）。

CSS不仅可以为HTML页面上的任何元素添加颜色、大小、位置等等，还可以创建一些高级动效，让你的网页更加生动，交互体验更佳。

随着开发人员不断的尝试使用高级CSS技术，并对这些技术做出贡献的同时，浏览器的兼容性也逐步趋于标准化，这让CSS变得越来越占有主导地位。

下面让我们一起来探索这些CSS技巧吧。

警告： 并非所有浏览器都完全支持下面要讲述的某些技术。请在上线站点前，务必检查浏览器兼容性。

01. Background-repeat

CSS背景(Background-repeat)[1]是开发者常用的技术之一，但所有开发人员也许并不完全知道可以使用多种展现方式。

background-repeat属性是用来设置背景图像的重复方式，它与background-image属性来结合使用。

默认情况下，background-repeat属性是在垂直与水平方向重复。

语法

background-repeat: value;

参数

image.png

<div class="container">
    <div class="item">
        <p class="text">background-repeat: repeat;</p>
        <div class="img repeat"></div>
    </div>
    <div class="item">
        <p class="text">background-repeat: repeat-x;</p>
        <div class="img repeat-x"></div>
    </div>
    <div class="item">
        <p class="text">background-repeat: repeat-y;</p>
        <div class="img repeat-y"></div>
    </div>
    <div class="item">
        <p class="text">background-repeat: space;</p>
        <div class="img space"></div>
    </div>
    <div class="item">
        <p class="text">background-repeat: round;</p>
        <div class="img round"></div>
    </div>
    <div class="item">
        <p class="text">background-repeat: no-repeat;</p>
        <div class="img no-repeat"></div>
    </div>
</div>

p {
    margin: 0;
    padding: 0;
}
.container {
    width: 600px;
    height: 600px;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.item {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid green;
    flex: 0 0 44%;
    display: flex;
    flex-direction: column;
}
.img {
    width: 100%;
    height: 100%;
    background-color: #eaeaea;
    background-image: url('https://img2.baidu.com/it/u=151081824,1042399778&fm=26&fmt=auto&gp=0.jpg');
    background-size: 46px;
}
.img.repeat {
    background-repeat: repeat;
}
.img.repeat-x {
    background-repeat: repeat-x;
}
.img.repeat-y {
    background-repeat: repeat-y;
}
.img.space {
    background-repeat: space;
}
.img.round {
    background-repeat: round;
}
.img.no-repeat {
    background-repeat: no-repeat;
}

浏览器兼容性

02. Mask-Image

当你在使用一张图像并只想显示其中某些部分，你就可以使用mask-image[2]这个属性来实现这个效果。

CSS遮罩是一种高级CSS技术，它可以让定义好的规则应用到图像上去，以达到遮罩形状。

任何出现在遮罩形状之外的东西都会被剪掉，只显示遮罩区域的图像。

其实它的工作原理与Photoshop中的矢量蒙版很相似，相当于在图像上面盖了一层布(蒙版)，然后再做一些效果处理。

在图像蒙版中，100%黑色代表图像将完全显示，反之100%透明度代表图像将被完全遮住，由透明度到黑色(黑色到透明度)过渡区间的图像，将在蒙版中显示。

线性渐变遮罩

.img.one {
    -webkit-mask-image: linear-gradient(to top, transparent 0, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 100%);
}
.img.two {
    -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 80%);
    mask-image: linear-gradient(to bottom, transparent 30%%, black 70%);
}

to top(bottom)渐变方向：to top代表由下至上，to bottom，代表由上至下。

transparent(起始位置)透明度位置：0代表由顶点开始，30%代表由图像的顶边到30%的位置开始(当该数值大于0时，小于该数值的图像区域将被完全遮罩)。

black(终止位置)黑色位置：100%代表目标方向的顶点位置，80%代表可以到达的最远遮罩范围(当该数值小于100%时，由该数值到达100%顶点位置的遮罩区域将被完全显示)。

径向渐变遮罩

语法

-webkit-mask-image: radial-gradient( shape size at position, start-color, …, last-color );

参数

image.png

示例

image.png

此时设置半径大小为25% 50%，结合上图的半径大小可以得出：x轴的1/4，y轴的1/2。

位置设置为100% 0%，相当于把圆心设置在图像的右上角顶端。

image.png

浏览器兼容性

image.png

该功能目前还是实验阶段，兼容性还是比较差的，要等正式上线看来还需要等待一段时间。

03. TScroll-Snap-Type

在提这个CSS之前，不得不提一嘴：我相信有很多前端开发人员，应该有过开发轮播图的需求吧，滑动的时候，需要计算一下每次滑动的距离，以方便来判断用户停止操作后，回弹到哪一屏的轮播图。

有了scroll-snap-type后，这种回弹效果就容易的多了，但是现在兼容性比较差，有待普及。

CSS scroll-snap-type[3]是一种高级CSS技术，它可以帮助开发人员能更好的控制滚动体验。

只需要在滚动的容器上，设置属性scroll-snap-type属性的x(横向滚动)或y(纵向滚动)就可以达到效果。

语法

scroll-snap-type: [none | x | y] [mandatory | proximity]

参数

image.png

示例

<div class="container">
    <div class="item">red</div>
    <div class="item">green</div>
    <div class="item">blue</div>
    <div class="item">yellow</div>
</div>

.container {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    display: flex;
    flex-wrap: nowrap;
}
.item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}
.item:nth-child(1) {
    background-color: red;
}
.item:nth-child(2) {
    background-color: green;
}
.item:nth-child(3) {
    background-color: blue;
}
.item:nth-child(4) {
    background-color: yellow;
}

640.gif

scroll-snap-align: start;是用来设置当用户停止操作时，子元素捕捉点以什么方式来对齐，请看下图：

640.gif

浏览器兼容性

640.gif

04. Shape Outside

Shape-outside可以让内容把设置了该属性的元素包裹住，而不是仅限于传统的矩形布局。

语法

shape-outside: values;

示例

<div class="container">
    <div class="item"></div>
    <p>请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？请问什么是50％的黑色画笔？</p>
</div>

.item {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    margin: 10px;
    shape-outside: circle();
    background: url('https://pic2.zhimg.com/0ed287debc9096e9a128c8625227fa2c_xl.jpg') no-repeat;
    background-size: 100%;
    float: left;
}

640.gif

去掉shape-outside: circle()属性后

640.gif

注意： 此属性只适用于浮动元素。

浏览器兼容性

640.gif

05. CSS Grid

CSS Grid[4]可以定义一个由用户自定义行与列的网格布局，不仅支持一级子项进行设置网格，还支持网格嵌套网络进行布局。

这就意外着可以在页面上创建一个多列的网格布局，并使用它来排列嵌套相关目标内容。

语法

/* 父元素 */
display: grid;
grid-template-columns: [ 行数(每行占比) ];
/* 或者 grid-template-columns: [ repeat(行数, 行占比 | 1fr) ]; */
grid-template-rows: [ repeat(列数, 列占比 | 1fr) ];

/* 子元素 */
grid-column: [ 起始行数 | 起始行数 / 终止行数 ];
grid-row: [ 起始列数 | 起始列数 / 终止列数 ];

示例

<div class="container">
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">
        <div class="item a">333</div>
        <div class="item b">444</div>
    </div>
</div>

.container {
    background-color: red;
    color: white;
    display: grid;
    /* 2列 */
    grid-template-columns: repeat(2, 1fr);
    /* 2行 */
    grid-template-rows: repeat(2, auto);
}
.item {
    padding: 10px;
    border: 1px solid white;
    /* grid-column-start: 2;
    grid-column-end: 4; */
}
.item:nth-child(1) {
    /* 第1列 */
    grid-column: 1;
    /* 从第1行到第3行，但不包括第3行 */
    grid-row: 1 / 3;
}
.item:nth-child(2) {
    /* 从第2列到第3列，但不包括第3列 */
    grid-column: 2 / 3;
    /* 第1行 */
    grid-row: 1;
}
.item:nth-child(3) {
    /* 上同 */
    grid-column: 2;
    grid-row: 2;
    /* 网格布局 */
    display: grid;
}
.item.a {
    /* 上同 */
    grid-column: 1;
    grid-row: 1;
}
.item.b {
    /* 上同 */
    grid-column: 2;
    grid-row: 1;
}

640.gif

grid-column相当于 grid-column-start 与 grid-column-end 的缩写，代表：当前列的占比从第几列开始至第几列结束。

grid-row相当于 grid-row-start 与 grid-row-end 的缩写，代表：当前行的占比从第几行开始至第几行结束。

display: subgrid，可以更加语义化的设置子网格嵌套其它网格。但现在兼容性略差，目前仅在高版本火狐下才可以使用。可以先使用display: grid来代替。

另外grid网格布局在响应式设备上也有优异的表现，比如：可以以相等或不相等的列来展示。

<div class="container">
    <div class="item"></div>
    ...若干子元素
</div>

@color-base        : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary  : spin(@color-base, (360 / 3));

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((100vw - 4em) / 4);
    grid-auto-flow: row;
    grid-gap: 1em;
}
.item {
    background-color: @color-base;
}
.item:nth-child(3n) {
    background-color: @triadic-secondary;
}

.item:nth-child(3n + 2) {
    background-color: @triadic-tertiary;
}

640 (1).gif

浏览器兼容性

640 (1).gif

06. HTML/CSS : Smart Quotes

CSS智能引号(也可称呼它为聪明的引号)的出现，不仅增加了网页的语义化，也大大提高了可读性和出色的用户体验。

使用特殊的<q>标签来表示：某段内容是属于特别强调、带有引号的内容，而非使用HTML字符串""、&quot;等来展示。

<q class="one">
    你到底是男人还是女人？你的
    <q class="two">性别</q>
    我实在是捉摸不透！
</q>

.one {
    quotes: "$" "%";
}

640 (1).gif

quotes有两点需要说明：

一、具有继承性，所有的子元素<q>会继承父元素设置的quotes文本。
二、quotes要以对值的方式进行设置，不可单独出现，否则无效。也就是说，设置的值必须是偶数，而非奇数。

.one {
    quotes: "$" "%" "@";
}

640 (1).gif

上图设置了奇数对值，造成设置无效，只展示默认的单、双引号。

.one {
    quotes: "$" "%";
}
.two {
    quotes: "@" '@';
    font-size: 20px;
    color: red;
}

640 (1).gif

也可以单、双引号一起用。

浏览器兼容性

640 (1).gif

07. 快速定位水平滚动条的起因

有时候在调试网页的时候会偶尔碰到网页会出现水平滚动条，这在用户体验上是绝对不允许出现的。此时我们要做的就是定位起因，然后取消水平滚动条。

一般情况下，出现水平滚动条是因为有某个或某些元素的宽度大于可用屏幕宽度造成的。如下图：

640 (1).gif

所以，我们只需要找到这些元素，然后修复下宽度即可解决，下面这种方法可以快速定位到该元素：

* {
     border: 1px solid red;
}

通过给所有元素添加1px的红色边框，这样就可以轻松确定是因为哪个元素造成的水平滚动条。

640 (1).gif

08. Aspect-Ratio

当我们要用CSS设置一个正方形的时候，一般都会设置宽度和高度来解决。

当有了aspect-ratio属性以后，我们完全可以通过设置背景颜色、需要设置的宽度(高度)、宽高比来设置正方式或者长方形，不需要同时设置宽度和高度两个数值。

aspect-ratio宽高比是通过 width / height 来定义的。

<div class="container"></div>

.container {
    margin: 0 auto;
    margin-top: 50px;
    width: 100px;
    background-color: red;
    aspect-ratio: 1 / 1;
    /* aspect-ratio: 1; 可以简写 */
}

640 (1).gif

设置宽度100px，宽度比 1 / 1，相当于宽度100px，高度100px，所以是正方形。

.container {
    margin: 0 auto;
    margin-top: 50px;
    width: 100px;
    background-color: red;
    aspect-ratio: 3 / 2;
}

640 (1).gif

宽度100px，宽高比 3 / 2，相当于宽度100px，高度就是 100 / 3 * 2 = 66.6666px。

.container {
    margin: 0 auto;
    margin-top: 50px;
    height: 100px;
    background-color: red;
    aspect-ratio: 1 / 3;
}

640 (1).gif

高度100px，宽高比 1 / 3，相当于宽度就是 100 / 3 * 1 = 33.3333px，高度100px。

浏览器兼容性

640 (1).gif

总结：用设置的类型数值 / 相对应的比例 * 其它比例。

09. Scroll-Behavior

当我们点击某个锚点，需要平滑滚动到某个元素的目标区域时，用JQ可以这样实现：

// 伪代码
$('.one').on('click', function() {
    if (!$('body, html').is(':animated')) {
        $('body, html').animate({
            scrollTop: $('.one_area').offset().top
        }, 300);
    }
});

代码量还是挺大的，也不太直观，反正就是不舒服。

大家都知道A标签的锚点功能可以实现让浏览器到达指定元素的目标区域，但是没有动效，看起来滚动比较生硬。

有没有不需要写JavaScript代码，并且让A锚点功能滑动的时候，可以变得平滑一些呢？

答案是有的，可以使用scroll-behavior[5]，比如下面的例子：

<div class="btns">
    <a href="#pageA">上班</a>
    <a href="#pageB">下班</a>
    <a href="#pageC">辞职</a>
</div>
<scroll-container>
    <scroll-page id="pageA">上班</scroll-page>
    <scroll-page id="pageB">下班</scroll-page>
    <scroll-page id="pageC">辞职</scroll-page>
</scroll-container>

.btns {
    display: flex;
    font-size: 24px;
    margin-bottom: 10px;
}
.btns a {
    color: red;
    margin: 0 6px;
}
scroll-container {
    width: 200px;
    color: #333;
    font-weight: bold;
    font-size: 30px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
scroll-page {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
scroll-page:nth-child(1) {
    background-color: #ef476f;
}
scroll-page:nth-child(2) {
    background-color: #ffd166;
}
scroll-page:nth-child(3) {
    background-color: #06d6a0;
}

20210802_135552.gif

浏览器兼容性

20210802_135552.gif

10. :where伪类函数

这样的场景大家一定没少碰到过吧：有时候碰到复杂的结构，并且想同时对多个元素(header, main, footer)设置相同的样式时，CSS可能会这样写：

<div class="container">
    <div class="one">
        <header>我是头部</header>
    </div>
    <span>
        <main>我是主体</main>
    </span>
    <div class="test">
        <a href="#" class="link">链接一枚</a>
        <footer>我是底部</footer>
    </div>
</div>

.container header,
.container main,
.container footer {
    color: red;
}

其实在小鲸实际工作当中，还有比这更复杂，可读性更差的呢。。。就不说了，都是泪。

:where()伪类函数就是为了解决这个问题而出现的：

:where() 伪类函数接受一个或多个选择器列表做为参数，使列表中的选择器每项都可以被选择。

.container :where(header, main, footer) {
    color: red;
}

/* less写法 */
.container {
    header,
    main,
    footer {
        color: red;
    }
}

20210802_135552.gif

:where()语法有点类似于less语法糖，简化的编码代码的工作量，同时也提高了可读性。

浏览器兼容性

20210802_135552.gif

11. ::Selection伪元素

当你在浏览网页的时候，会经常使用鼠标选择一段或多段文本，此时选择区域的默认高亮状态一般都是白字、蓝底。

20210802_151532.gif

此时如果你想自定义实现高亮状态的样式，可以使用::selection伪元素来实现。

/* 修改全局高亮状态 */
::selection {
    color: red;
    background-color: yellow;
}

/* 只修改某个元素的高亮状态 */
.container::selection {
    color: red;
    background-color: yellow;
}

20210802_152314.gif

浏览器兼容性

20210802_152314.gif

12. Caret-Color

输入框黑呼呼的光标颜色，是不是看烦了？不如换个颜色，换份心情？

20210802_153422.gif

你只需要给准备设置的输入型元素加上caret-color属性，并输入你想要的颜色，就可以改变光标一成不变的面貌！

input {
    caret-color: red;
}

20210802_153710.gif

浏览器兼容性

20210802_153710.gif

13. Drop Shadow

box-shadow大家一定不陌生，从字面上可以看出，它叫做盒阴影(矩形影子)。

语法

box-shadow: [外(内)阴影 x轴偏移量 y轴偏移量 强度 扩散度 颜色]

要知道任何一个标签元素，都是以盒模型来渲染的，具体渲染成什么，以实际内容而定。

比如：img、input、select等等。

给元素设置了box-shadow后，阴影会以盒子本身来渲染阴影，上那么的中规中矩。

<img src="https://mbdp01.bdstatic.com/static/landing-pc/img/logo_top.79fdb8c2.png" />

img {
    width: 200px;
    padding: 10px 20px;
    border: 1px solid red;
    box-shadow: 10px 16px 4px 0px rgba(0, 0, 0, .5);
}

20210802_153710.gif

语法

drop-shadow: [x轴偏移量 | y轴偏移量 | 阴影半径 | 颜色]

drop-shadow[6]是可以根据符合的图像本身，来渲染出相应的阴影形状。

drop-shadow与box-shadow虽然很相似，但也有区别：

  • box-shadow是属性，表示在整个盒模型创建一个矩形阴影。
  • drop-shadow是filter滤镜函数，表示创建一个符合图像本身形状的透明通道阴影。
  • box-shadow允许使用inset来设置内阴影，但drop-shadow不允许使用inset参数。
img {
    width: 200px;
    padding: 10px 20px;
    border: 1px solid red;
    filter: drop-shadow(10px 16px 4px #264653);
}

20210802_153710.gif

由此可以看出，drop-shadow不仅可以渲染图像本身的形状，连我们设置的边框也可以被渲染。

有没有很酷炫~~~

随着时间的推移，CSS会变得越来越强大，如今它在网页上的表现，展现出了惊人的视觉效果。\

让我们拭目以待，期待更多强大的功能，让之前从未可能实现的需求，轻松实现。

相关资料

[1] Background-repeat - developer.mozilla.org/zh-CN/docs/…

[2] Mask-Image - developer.mozilla.org/zh-CN/docs/…

[3] Scroll-Snap-Type - developer.mozilla.org/zh-CN/docs/…

[4] Grid - developer.mozilla.org/en-US/docs/…

[5] Scroll-Behavior - developer.mozilla.org/zh-CN/docs/…

[6] Drop-Shadow - developer.mozilla.org/en-US/docs/…

最后

感谢您抽出宝贵的时间阅读本文，希望对您有所帮助。

如果您遇到什么疑问或者建议，欢迎多多交流，大家共同进步。

在阅读过程中，如果有不正确的地方，希望您能提出来，我会努力改正并提供更优质的文章。

avatar
文章
阅读
粉丝