如何通過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

您的項目需求