如何通过7个简单步骤在Firefox中调试JavaS

如何通过7个简单步骤在Firefox中调试JavaScript

hrome因其开发者控制台而闻名。但是Firefox也有自己的开发工具版本！在这篇文章中，我们看看它们。

本文将重点介绍如何在Firefox的开发工具中调试JavaScript代码。Firefox内的开发工具是一个非常强大的工具，可以加快您的错误查找和修复过程！

第1步：项目介绍示例

为了演示如何使用Firefox Dev Tools调试应用程序，我将使用一个简单的添加人窗体。这种形式可以让你输入第一个，中间和最后一个名字。点击'保存'按钮后，表单将进行一些处理，数据将被发送到您的（虚拟）服务器。

这个表单的代码有三个功能：

点击处理程序。
大写字符串函数。
保存功能。

var saveButton=document.getElementById('saveButton');
var firstNameField=document.getElementById('firstName');
var middleNameField=document.getElementById('middleName');
var lastNameField=document.getElementById('lastName');
function onSaveButtonClick(){
var firstName=firstNameField.value;
var middleName=middleNameField.value;
var lastName=lastNameField.value;
// capitalise the names
firstName=capitalizeString(firstName);
middleName=capitalizeString(middleName);
lastName=capitalizeString(lastName);
doSave(firstName, middleName, lastName);
}
function capitalizeString(value){
return value.split('')[0].toUpperCase() + value.slice(1);
}
function doSave(firstName, middleName, lastName){
alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}
saveButton.addEventListener('click', onSaveButtonClick);

不幸的是，在星期五晚上晚些时候将其发送到产品后，您会看到错误报告进入您的仪表板。有一个错误，你需要修复它。快速。

第2步、分析Raygun错误报告

Raygun提供的错误报告有很多信息可用于查找和修复错误，所以我们来看看我们正在处理的内容。

调试错误所需的信息位于堆栈跟踪模块中。

堆栈跟踪的消息部分是对什么是错误的简要概述。在这种情况下，该toUpperCase方法正在被调用一个未定义的值。

堆栈跟踪会告诉您错误发生的位置以及导致该错误发生的函数调用的顺序。正如你在上面的屏幕截图中看到的，错误发生在文件capitalizeString第20行的功能上index.js。

知道哪一行触发了错误意味着你可以直接跳到发生错误的地方，并开始挖掘导致问题的原因。

第3步：探索开发工具的剖析

第一步是在Firefox中启动应用程序并打开开发工具。您可以使用OSX上的快捷键CMD-OPT-I或Windows上的CTRL-SHIFT-I在键盘上执行此操作。

开发工具现在将在浏览器选项卡中打开，并且控制台选项卡将处于活动状态。此选项卡允许您随时执行任意JavaScript代码或查看来自console.log呼叫的任何输出。

尝试输入alert('Hello!');并按Enter键 - 您应该看到警报立即显示。

控制台选项卡是一个有价值的调试工具，因为您可以将它用作便笺，用于在诊断问题时尝试代码和评估变量。

要调试代码，首先需要能够在Dev Tools中浏览源代码。您可以在Debugger选项卡中执行此操作。

此选项卡的左侧窗格具有加载到页面中的所有源文件的树视图。您可以像在IDE中一样导航这些内容，因为内容显示在中央窗格中。选定脚本后，可以使用此窗格中的“大纲”选项卡查看文件功能的概述。

右侧窗格为您提供了所有的调试选项，稍后我会进行讨论。

如果您有很多文件，可以通过在OSX上使用CMD-P或在Windows上使用CTRL-P来搜索它们，然后开始输入文件的名称。

在应用程序中，您知道问题在于index.js文件，因此请从左侧列表中选择以查看其内容。

第4步：为您的代码添加断点

现在你可以查看你的代码，我们希望能够一次一行地查看出错的地方。为此，我们使用断点。断点是代码中特定点的标记，可停止执行，因此您可以在该时间点检查代码的状态，然后逐行继续执行。

有几种不同的方法来添加断点，我将在这里继续。

线路断点

可能最常见的添加断点的方法是找到要停止的特定行并将其添加到此处。导航至您感兴趣的文件和行，然后单击行号。该行会添加一个蓝色标记，并且每次遇到这行代码时执行都会停止。在下面的截图中，它将停止在第7行index.js。

程序化的断点

您还可以通过编程方式添加断点，如果您不希望在Dev Tools中搜索代码时使用IDE，则可以使用这些断点。您还可以使用此方法有条件地引入断点，例如在某些循环迭代中，或者代码在页面加载时运行，并且没有时间手动添加断点。

要做到这一点，你要debugger;

在你想破坏执行的位置添加语句。下面的代码与上面的Line Breakpoint具有相同的效果。

错误断点

开发工具有一个方便的功能，当它在你的代码中遇到异常时会停止执行，允许你检查错误发生时的情况。

要启用此功能，请单击带有暂停符号的停止标志图标。启用后它将变成蓝色。

第5步：通过你的代码

现在我们知道如何闯入我们的代码，我们想要遍历每一行，以便我们能够弄清楚发生了什么问题。首先，在第7行上放置一个断点 - 就在Add按钮的点击处理程序中，这样我们就可以从头开始。

在前一节中，我们从Raygun错误报告中推断出错误来自capitalizeString方法。这种方法被称为三次，所以，哪个实例是罪魁祸首？你可以仔细看看堆栈轨迹，看看它是从第13行发出的导致错误的调用。你知道第13行涉及中间名值。因此，您应该专注于通过正确制作输入来重现错误。

有了这些额外的知识，您可以填写“姓氏”和“姓氏”字段，但将中间名留空以查看是否触发了错误。

点击保存按钮。从这里，Source选项卡将打开，您可以在其中看到已激活的断点。您现在可以开始浏览代码。为此，请使用调试窗格中的四个按钮。

继续执行代码并继续执行，直到下一个断点跳过当前行，将我们移动到下一行跳到该行下一个函数调用的步骤跳出当前函数调用，将callstack备份到一个级别。

您将使用这些步骤一直到您的capitalizeString功能。因此，从第7行开始，使用“Step Over”按钮，直到到达第13行。活动行显示为浅蓝色背景，并在其上方和下方显示线条。

您现在可以使用“Step In”按钮移动到该capitalizeString功能的调用中。

浏览调用堆栈

当你像这样移动代码时，你可能想要跳回到父函数来检查当时发生了什么。为此，请使用Call Stack部分，该部分列出了代码中已经通过的所有函数 - 与Raygun错误报告中显示的Callstack完全相同。

您只需点击此列表中的一个项目，您就会回到该功能。请记住，执行中的当前位置不会更改，因此使用“跳过”按钮将从调用堆栈顶部继续。

第6步：确定您的应用程序的状态

现在您已经导航到发生错误的位置，我们需要检查应用程序的状态并找出导致错误的原因。

有很多选项用于计算变量包含的值，并在代码移动之前评估表达式。我们将依次查看每一个。

鼠标悬停

确定变量值最简单的方法是将鼠标悬停在其上，并且工具提示将随该值弹出。

观察者

您可以将表达式添加到Watch表达式面板，该表达式在您移动代码时显示表达式的当前值。随时了解更复杂的表达随时间变化的情况。

您可以通过单击面板底部的“添加监视表达式”文本来添加这些文本，您可以在其中键入要添加的表达式，然后按Enter键添加它。或者，您可以选择一个表达式，右键单击它并选择“添加监视表达式”。

范围

“范围”面板显示当前范围内的变量及其关联值的列表。Scopes面板类似于Watch表达面板，但由Dev Tools自动生成。Scopes面板非常适合识别局部变量，并且可以避免将它们显式添加到Watch表达式列表中。

控制台

最后，“控制台”选项卡是用于检查表达式值和试验代码的省时工具。只需切换回“控制台”选项卡，输入一些代码，然后按回车。Firefox Dev Tools将在当前断点的上下文和范围内执行代码。

第7步：修复Bug

切换到控制台选项卡，让我们开始分解导致错误的行，以便您可以使用“控制台”选项卡修复它

首先，检查value.split(‘’)呼叫的输出，以便可以获取第一个字符，然后调用该toUpperCase函数。

value.split(‘’)在控制台中执行该表达式会显示它返回一个空数组 - 该代码是错误来自的地方！由于返回值是一个空数组，因此我们尝试调用toUpperCase第一个项目（这是未定义的，因为没有项目）会给出错误。

您可以通过在控制台中输入完整表达式来验证这一点：

所以，要解决这个问题，你需要检查传入capitalizeString函数的字符串是空的还是未定义的。如果是，则需要返回空字符串，而不尝试进行任何处理。

function capitalizeString(value){
if(!value || value.length===0){
return '';
}
return value.split('')[0].toUpperCase() + value.slice(1);
}

概要

这简要介绍了如何在Firefox的开发工具中调试JavaScript 。这是一个非常强大的工具，花时间掌握它将会加快你的调试技能的发展。

不幸的是，在撰写本文时，Firefox的开发者工具并不完全达到Chrome的水平，但它们仍然非常适合调试。

我希望在接下来的几个月里看到这些工具的功能得到了很大的推动，以确保它们与Chrome在开发工具的最前沿竞争。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

最具勇气的行为

仍然是独立思考

并将你的想法大声公之于世

- 2024.03.25 -

在网络设计的世界里，盒子模型是构建网页布局的基石，只有理解了盒子模型，我们才能更好的进行网页布局。

HTML中的每一个元素都可以看成是一个盒子，拥有盒子一样的外形和平面空间，它不可见、不直观，但无处不在，所以初学者很容易在这上面出问题。今天就让我们来深入了解一下盒子模型。

一、盒子模型是什么？

首先，我们来理解一下什么是CSS盒子模型。

简单来说，CSS盒子模型是CSS用来管理和布局页面上每一个元素的一种机制。每个HTML元素都可以被想象成一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。

这四个部分共同作用，决定了元素在页面上的最终显示效果。

二、盒子模型的组成部分

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。其中margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

下面来一一介绍盒子模型的各个组成部分：

2.1 内容（Content）

内容是盒子模型的中心，它包含了实际的文本、图片等元素。内容区域是盒子模型中唯一不可或缺的部分，其他三部分都是可选的。

内容区的尺寸由元素的宽度和高度决定，但可以通过设置box-sizing属性来改变这一行为。

下面通过代码例子来了解一下内容区：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
margin: 20px;
box-sizing: content-box; /* 默认值 */
}
</style>
</head>
<body>

<div>这是一个盒子模型的例子。</div>

</body>
</html>

在这个例子中，.box类定义了一个具有特定样式的<div>元素。这个元素的宽度为200px，高度为100px，背景颜色为浅蓝色。边框为2像素宽的黑色实线，内边距为10像素，外边距为20像素。

由于我们设置了box-sizing: content-box;（这是默认值），所以元素的宽度和高度仅包括内容区的尺寸。换句话说，元素的宽度是200px，高度是100px，不包括内边距、边框和外边距。

如果我们将box-sizing属性设置为border-box，则元素的宽度和高度将包括内容区、内边距和边框，但不包括外边距。这意味着元素的总宽度将是234px（200px + 2 * 10px + 2 * 2px），高度将是124px（100px + 2 * 10px + 2 * 2px）。

总之，内容区是CSS盒子模型中的一个核心概念，它表示元素的实际内容所在的区域。通过调整box-sizing属性，您可以控制元素尺寸是否包括内容区、内边距和边框。

2.2 内边距（Padding）

内边距是内容的缓冲区，它位于内容和边框之间。通过设置内边距，我们可以在内容和边框之间创建空间，让页面看起来不会太过拥挤。

内边距是内容区和边框之间的距离，会影响到整个盒子的大小。

padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*
1、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
2、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top:30px ;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
padding: 40px;
border: 10px transparent solid;
}
.box1:hover {
border: 10px red solid;
}

/*
* 创建一个子元素box2占满box1，box2把内容区撑满了
*/
.box2 {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>

2.3 边框（Border）

边框围绕在内边距的外围，它可以是实线、虚线或者其他样式。边框用于定义内边距和外边距之间的界限，同时也起到了美化元素的作用。

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部，设置边框必须指定三个样式边框大小、边框的样式、边框的颜色

边框大小：border-width
边框样式：border-style
边框颜色：border-color

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

.box {
width: 0px;
height: 0px;
/* background-color: rgb(222, 255, 170); */
/* 边框的大小 如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
*/
border-width: 20px;
/* border-left-width:40px ; */
/*
边框的样式
border-style 可选值
默认值：none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
*/
border-style: solid;
/* 设置边框的颜色 默认值是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色
border-XXX-color: ;
*/
border-color: transparent transparent red transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: turquoise;
/* 简写border
1、 同时设置边框的大小，颜色，样式，没有顺序要求
2、可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
3、去除某个边框
border:none;
*/
border: blue solid 10px;
border-bottom: none;
/* border-top:10px double green ; */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

2.4 外边距（Margin）

外边距是元素与外界的间隔，它决定了元素与其他元素之间的距离。通过调整外边距，我们可以控制元素之间的相互位置关系，从而影响整体布局。

margin-top:; 正值元素向下移动负值元素向上移动
margin-left:; 正值元素向右移动负值元素向左移动
margin-bottom:; 正值元素自己不动，其靠下的元素向下移动，负值元素自己不动，其靠下的元素向上移动
margin-right: ; 正值负值都不动

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 外边距 不会影响到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动，其靠下的元素向下移动，负值 元素自己不动，其靠下的元素向上移动
margin-right: ; 正值负值都不动
简写 margin 可以跟多个值
规则跟padding一样
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/* margin-top: -100px;
margin-left: -100px;
margin-bottom: -100px;
margin-right: -100px; */
margin: 40px;
}

.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

三、盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。

盒子真正的宽和高按下面公式计算

盒子的宽度=内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度=内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

我们还可以用带属性的公式表示：

盒子的宽度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度=height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是默认情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值

content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：规定应从父元素继承box-sizing属性的值

当box-sizing：content-box时，这种盒子模型成为标准盒子模型；
当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

四、盒子模型应用技巧

掌握了盒子模型的基本概念后，我们就可以开始创造性地应用它来设计网页。以下是一些技巧：

使用内边距来创建呼吸空间，不要让内容紧贴边框，这样可以让页面看起来更加舒适。

巧妙运用边框来分隔内容区域，或者为特定的元素添加视觉焦点。
利用外边距实现元素间的对齐和分组，保持页面的整洁和组织性。
考虑使用负边距来实现重叠效果，创造出独特的层次感和视觉冲击力。

CSS盒子模型是前端开发的精髓之一，它不仅帮助我们理解和控制页面布局，还为我们提供了无限的创意空间。现在，你已经掌握了盒子模型的奥秘，是时候在你的项目中运用这些知识，创造出令人惊叹的网页设计了。

记住，每一个细节都可能是打造卓越用户体验的关键。开启你的CSS盒子模型之旅，让我们一起构建更加精彩、更加互动的网页世界！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

家好，我是皮汤。最近一直在研究 TailwindCSS 相关的内容，打算将其用在接下来的各种项目中，之前也写过关于 CSS 工程化方面的文章：2021 年你需要之前的 CSS 工程化技术，今天给大家介绍一篇关于 Tailwind 最新发布的 v3.0 相关的内容。

2021 年 12 月 10 日，TailwindCSS 的创始人 Adam Wathan 宣布 TailwindCSS v3.0 正式发布，带来了一系列性能上的改进、对开发工作流的改善以及大量的新特性。

那么这颗在 CSS 工程化领域极为耀眼的新星在 v3.0 为我们带来了那些有趣的新特性呢？我们接下来就来一一的介绍它们。

随时随地的 Just-in-Time 模式

Tailwind 2.x 里面引入了一种新的模式，Just-in-Time 模式，可以保持开发和生产构建是一致的，且都是按需构建，相比之前 Tailwind 需要将所有基础的内容进行构建来说大大提升了性能，针对任何构建工具，如 Webpack 只需要 800ms 就可以构建完成，而在之前，可能需要 30-45s。

而且得益于 JIT 模式，Tailwind 支持了 “任意值辅助类” 等一系列新的特性。

之前使用 JIT 时，需要在配置文件里面指定模式：

// tailwind.config.js

module.exports={
 // ...
  mode: 'jit',
  // ...
}

然后你就可以享受到极快的构建速度，而且可以使用任意值的辅助类，如：

<div class="top-[-113px]"></div>

这在之前的 Tailwind 版本中是不允许的，如果需要覆盖这种任意值的情况，你还是得定义一个类名，然后撰写对应的 CSS：

<div class="arbitrary-values"></div>

<style>
.arbitrary-values {
  top: -113px;
}
</style>

这种形式显得 Tailwind 比较割裂，所以在 JIT 模式下，因为支持按需构建，所以这种任意值的形式也可以使用 Tailwind 统一的语法进行书写。

而在 v3.0 中，Tailwind 内置了 JIT，无需在配置文件里面声明 JIT 模式，默认就是按需构建、可使用任意辅助类、开发和生产构建方式与产物统一，避免了不一致性、还获得了极大的性能优化。

所有的颜色都开箱即用

在 v3.0 之前，为了关注在开发模式下 CSS 体积的大小，Tailwind 必须要小心的限制可用的颜色，但是在 v3.0 之后，我们可以引入了很多新的调色板颜色，如 cyan（天蓝色）、rose（玫瑰色）、fuchsia（紫红色）、lime（酸橙色）以及 15 中灰色的阴影，而无需担心日益增大的 CSS 文件体积。

支持有颜色的阴影

之前 Tailwind 想要以一种组合式的方式支持带颜色的阴影是很困难的，虽然长期以来，用户都在述求这一项功能，但是一直也没有实现。经过 5 次失败的尝试，最终在 Tailwind v3.0 中实现了这项功能，现在你可以在 Tailwind 中使用这些有颜色的阴影了：

比如下述代码：

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

可以得到如下的效果：

滚动捕捉 API

我们加入了一个完善的用于实现 CSS 滚动捕捉模块的辅助类集合，使得你可以直接在 HTML 里面实现非常丰富的滚动捕捉的效果：

什么是滚动捕捉？也就是滑动到下一个 Item 时，可以选择滑动到此 Item 的某个位置，比如下列的定位在图片中间。

而上面的效果只需要如下的较为简单的 Tailwind 辅助类：

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

在一个 snap 容器里，snap-center、snap-start 等是用于滚动定位的设置项，而 Scroll Margin 则是用于设置相对于定位的偏移，使用形如 scroll-m{side}-{size} 这样的格式进行设置，如 scroll-ml-6 ，则是相对左边再偏移 6 个单位的长度：

<div class="snap-x ...">
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

如上述代码，snap-center 则会在滚动的时候定位在图片的开始位置，而加了 scroll-ml-6 之后，会再相对左边偏移 6 个单位，变成如下效果：

多列布局

我们加入了 columns 列布局支持，也被称之为 “新闻版式布局” 类型，这种布局非常有用，同时应用在底部的导航栏布局设计时也是非常有用的。

如我们大多数网站底部的多列导航栏设计，以 Tailwind 官网为例：

当你使用对应的辅助类如下时：

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

你可以获得如下的效果：

原生的表单控制样式

我们加入了对 CSS accent-color 属性的支持，如为表单里面的文件输入框按钮添加样式，这使得你能够细粒度的为原生的表单控制按钮添加样式，如下代码：

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      "/>
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
    <input type="checkbox" class="accent-violet-500" checked/>
    <span>Yes, send me all your stupid updates</span>
  </label>
</form>

可以获得如下效果：

为选择文件前：

选择文件后：

打印修饰符

我们添加了 print 修饰符，使得你可以在用户打印你的网站时如何展现：

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

比如上述的代码逻辑为，在打印模式下，第一个 article 块不展示，而 div 块展示。

现代aspectratioAPI

我们添加了原生的 aspect ratio ****属性的支持，因为现在浏览器的支持度已经非常高了，即我们可以获得比较完美的横纵比。

比如如下代码，可以设置视频的最佳横纵比：

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

上述代码得到如下结果：

好看的下划线样式

我们现在也支持修改下划线的颜色、粗细等属性了~

如下面的代码：

<p>
  I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at
  <a href="#" class="underline decoration-sky-500 decoration-2">My Company, Inc</a>. Outside of work, I
  like to <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">watch pod-racing</a>
  and have <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">light-saber</a>
  fights.
</p>

可以得到如下的效果：

RTL 与 LTR 修饰符

我们也加入了对 RTL（从右到左）与 LTR（从做到右）等多方向布局的实验性支持，如下代码：

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">...</p>
    <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">...</p>
  </div>
</div>

可以获得如下效果：

Portrait 与 Landscape 修饰符

我们也添加了在不同屏幕方向的修饰符支持，如 portrait （竖屏）、landscape （横屏）修饰符，使得你可以通过不同的修饰符控制在对应屏幕方向上的样式：

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      This experience is designed to be viewed in landscape. Please rotate your
      device to view the site.
    </p>
  </div>
</div>

任意值辅助类支持

虽然看起来不太合理，但是我们依然添加了任意 CSS 值的 Tailwind 辅助类，并使得你可以结合 hover 、lg 等修饰符使用：

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

或者像 56px 或者 44px 这种任意值，与 lg 修饰符一起使用：

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>

使用 CDN 来使用 Tailwind

目前没有一个很好的基于 CSS 的 CDN 方式来使用 Tailwind CSS v3.0，所以我们构建了一个 JavaScript 库来帮助你使用它：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

这种方式仅限于在开发环境下使用，或者当你想构建一个 demo 或者想要尝试一个有趣的想法时，你可以这样使用。只需要在任何想要使用 Tailwind 特性的 HTML 文档里添加 script 标签来引用 https://cdn.tailwindcss.com/ 即可。

以上就是 TailwindCSS v3.0 更新的全部特性了，看到这里，你觉得 TailwindCSS v3.0 怎么样呢？你做好将其用于生产、或者加入构建你下一个应用时的工具箱的准备了?

??/ 感谢支持 /

以上便是本次分享的全部内容，希望对你有所帮助^_^

喜欢的话别忘了分享、点赞、收藏三连哦~

欢迎关注公众号 **程序员巴士**，来自字节、虾皮、招银的三端兄弟，分享编程经验、技术干货与职业规划，助你少走弯路进大厂。

在线咨询

上一篇：英文还可以这么教？手口结合-手势英语教学法(视频）
下一篇：前端多个 Tab 页点击切换时当前页面显示成别的页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何通过7个简单步骤在Firefox中调试JavaS

第1步：项目介绍示例

第2步、分析Raygun错误报告

第3步：探索开发工具的剖析

第4步：为您的代码添加断点

第5步：通过你的代码

第6步：确定您的应用程序的状态

第7步：修复Bug

概要

一、盒子模型是什么？

二、盒子模型的组成部分

三、盒子的大小

四、盒子模型应用技巧

随时随地的 Just-in-Time 模式

所有的颜色都开箱即用

支持有颜色的阴影

滚动捕捉 API

多列布局

原生的表单控制样式

打印修饰符

现代aspectratioAPI

好看的下划线样式

RTL 与 LTR 修饰符

Portrait 与 Landscape 修饰符

任意值辅助类支持

使用 CDN 来使用 Tailwind

您的项目需求