15個CSS 常見錯誤，請一定要注意避免

不斷發展的 Web 開發領域，掌握 CSS（層疊樣式表）對于制作視覺上令人驚嘆且響應迅速的網站至關重要。

然而，陷阱比比皆是，即使是經驗豐富的開發人員也可能會發現自己陷入了常見的 CSS 錯誤中。

本文剖析了 15 個常見錯誤，提供分步說明和代碼示例，幫助您創建完美的網頁設計。

1. 過度依賴!important：

問題：

過度使用 !important 會導致代碼混亂。

解決方案：

對于更干凈和可維護的樣式，優先考慮特異性而不是 !important。

/* Incorrect */
.element {
    color: red !important;
}

/* Correct */
section.element {
    color: blue;
}

2. 使用通用選擇器進行全局樣式設置：

問題：

當使用通用選擇器 (*) 設計所有元素的樣式時，會出現意想不到的后果。

解決方案：

選擇特定的選擇器來精確定位元素。

/* Incorrect */
* {
    margin: 0;
    padding: 0;
}

/* Correct */
body {
    margin: 0;
    padding: 0;
}

3.忽視響應式設計：

問題：

忽視響應式設計會影響不同設備上的用戶體驗。

解決方案：

實施媒體查詢以實現自適應布局。

/* Incorrect */
.container {
    width: 1000px;
}

/* Correct */
.container {
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}

4. 盒子模型處理效率低下：

問題：

誤解盒子模型會導致布局不一致。

解決方案：

掌握盒子模型并明智地使用盒子大小屬性。

/* Incorrect */
.box {
    width: 100%;
    padding: 20px;
}

/* Correct */
.box {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

5. 未優化的 CSS 選擇器：

問題：

過于復雜的選擇器會影響性能。

解決方案：

選擇更簡單的選擇器以增強性能而不犧牲特異性。

/* Incorrect */
ul li:nth-child(odd) a {
    color: red;
}

/* Correct */
.odd-link {
    color: red;
}

6. 忽略跨瀏覽器兼容性的供應商前綴：

問題：

不包含供應商前綴可能會導致瀏覽器之間的不一致。

解決方案：

使用 Autoprefixer 等工具或手動包含供應商前綴以確保廣泛的瀏覽器兼容性。

/* Incorrect */
.box {
    display: flex;
}

/* Correct */
.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

7. 濫用浮動布局：

問題：

浮動曾經在布局中流行，但可能會導致布局問題和復雜化。

解決方案：

采用 Flexbox 或 CSS 網格來實現現代且可靠的布局結構。

/* Incorrect */
.column {
    float: left;
    width: 50%;
}

/* Correct */
.column {
    display: flex;
    width: 50%;
}

8. 忽視清除浮動：

問題：

未能清除浮動可能會導致意外的布局問題。

解決方案：

使用clearfix技術或使用overflow:hidden; 父元素上的屬性。

/* Incorrect */
.container:after {
    content: "";
    display: table;
    clear: both;
}

/* Correct */
.container {
    overflow: hidden;
}

9. 使用內聯樣式代替外部樣式表：

問題：

內聯樣式阻礙了關注點分離和代碼可維護性。

解決方案：

支持外部樣式表以獲得更干凈、更有組織的代碼。

<!-- Incorrect -->
<div style="color: blue;">Content</div>

<!-- Correct -->
<link rel="stylesheet" href="styles.css">

10. 不隨意使用 Flexbox 居中：

問題：

使用 Flexbox 可以簡化復雜的居中技術。

解決方案：

利用 Flexbox 實現簡單且響應靈敏的居中。

/* Incorrect */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Correct */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

11. 樣式表中過度使用@import：

問題：

過度使用 @import 會導致頁面加載時間變慢。

解決方案：

將樣式表合并到單個文件中并盡量減少 @import 的使用。

/* Incorrect */
@import url("reset.css");
@import url("layout.css");

/* Correct */
/* In styles.css */
@import url("reset.css");
@import url("layout.css");

12.不考慮動畫的性能影響：

問題：

過于復雜的動畫會降低頁面性能。

解決方案：

優化動畫以實現流暢的性能，并考慮使用硬件加速屬性。

/* Incorrect */
.animated-element {
    animation: spin 5s infinite;
}

/* Correct */
.animated-element {
    transform: rotate(360deg);
    transition: transform 0.5s ease-in-out;
}

13. 濫用絕對單位進行響應式設計：

問題：

使用像素等絕對單位作為布局尺寸可能會導致無響應的設計。

解決方案：

使用百分比或視口單位等相對單位進行響應式布局。

/* Incorrect */
.container {
    width: 960px;
}

/* Correct */
.container {
    max-width: 100%;
}

14.字體樣式使用不當：

問題：

忽略定義后備字體可能會導致文本呈現不一致。

解決方案：

指定后備字體并使用網絡安全字體系列以獲得更廣泛的兼容性。

/* Incorrect */
body {
    font-family: 'MyCustomFont', sans-serif;
}

/* Correct */
body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

15. 忘記優化和縮小 CSS：

問題：

忽視優化和縮小 CSS 可能會導致頁面加載時間變慢。

解決方案：

使用 UglifyCSS 或 CSSNano 等工具來縮小和優化用于生產的樣式表。

/* Before Minification */
.class {
    color: red;
    font-size: 16px;
}

/* After Minification */
.class{color:red;font-size:16px;}

總結

通過使用實際示例和代碼片段解決這 15 個常見 CSS 錯誤，您就可以創建高效、響應靈敏且具有視覺吸引力的網頁設計。

HTML標簽相關的字符串格式化

string nl2br ( string $string )

nl2br() 就是將\n 替換成 //javascript對\n才能夠執行換行,對是不能執行換行

htmlspecialchars() 把一些預定義的字符轉換為 HTML 實體。

string htmlspecialchars(string,quotestyle,[character-set])

轉換以下字符及對應的實體

& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >

第二個參數: ENT_COMPAT 只轉換雙引號, 保留單引號, 為默認值 compat: 兼容性

ENT_QUOTES 同時轉換兩種引號 quotes: 引號

ENT_NOQUOTES 不對引號進行轉換

<html>
<body>
<?php
$str="John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>

輸出結果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以將所有的非ASCII碼字符轉換為對應的實體代碼;除字母、數字、\外, 漢字和鍵盤上其他字符都轉換

<?php
$str="A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>

返回的結果:A 'quote' "is bold

A 'quote' "is bold

注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本

htmlspecialchars()和htmlentities()函數對于轉義字符"\"處理,不會轉義實體代碼,要么當轉義字符對待,要么原樣輸出;

PHP中htmlentities和htmlspecialchars的區別

這兩個函數的功能都是轉換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執行。

使用中文時沒什么區別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。

htmlentities轉換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號

addslashes() 在指定的預定義字符前添加反斜杠。

這些預定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)

提示：該函數可用于為存儲在數據庫中的字符串以及數據庫查詢語句準備合適的字符串。

注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數據自動運行 addslashes()。

不要對已經被magic_quotes_gpc轉義過的字符串使用 addslashes()，因為這樣會導致雙層轉義。

遇到這種情況時可以使用函數 get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我們要向字符串中的預定義字符添加反斜杠：

<?php
$str="Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>

輸出：

Who's John Adams? This is not safe in a database query.

Who\'s John Adams? This is safe in a database query.

<?php
header("Content-type:text/html; charset=utf-8");
$str="wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>

輸出:

wo are studying php

wo are studying >wo are studying \0 php< php

stripslashes() 刪除反斜線（"\"）

在提交的表單數據中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，

默認是打開的，如果不處理則將數據保存到數據庫時，有可能會被數據庫誤當成控制符號而引起錯誤。

通常htmlspecialchars()和stripslashes()函數復合的方式，聯合處理表單中的提交的數據htmlspecialchars(stripslashes())

strip_tags()

string strip_tags ( string $str [, string $allowable_tags ] )

剝去 HTML、XML 以及 PHP 的標簽。

<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>

輸出結果:Hello world!

實例:

<?php
$str="<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉換雙引號,為默認參數
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉換為對應的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>

輸出結果:

webserver; & \ 'Linux' & Apache

TML 規范的開發是一個漸進的過程，有時會出現問題。隨著時間的推移，許多元素和屬性被添加到 HTML 中，直到后來 Web 社區集體意識到有更好的方法時才被刪除。由于已棄用和過時的元素和屬性已經存在于網絡上，因此許多現代瀏覽器繼續支持它們的使用。盡管它們可能仍然有效，但您應該始終遵循最新版本的要求 HTML。不能保證瀏覽器對過時和棄用元素的支持會持續下去。有效但執行不A力。

有幾種 HTML 元素和屬性是有效的并且應該被使用，但是這些特性的實現隨著時間的推移而發生了變化，而 Web 開發社區的一些人還沒有注意到。HTMLtables就是一個很好的例子。table在某一時刻，使用 HTML元素創建網頁布局是很常見的。幾乎沒有人再這樣做了，CSS 比tables以往任何時候都更強大。但是，即使是經驗豐富的 Web 開發人員，也存在許多其他不太嚴重的誤用和語法錯誤。以下是一些經常被誤用得完全有效且有用的 HTML 功能以及正確實現的示例。

DOCTYPE

雖然在技術上不是 HTML 元素，但DOCTYPE聲明應該是每個 HTML 文檔中出現的第一件事。這個聲明是瀏覽器文檔中代碼的語言。過去，這個聲明包括幾個部分，可能會有點復雜。然而，在 HTML5 中，這很簡單：

使用該聲明開始每個人 HTML 文檔，Web 瀏覽器將準確地知道您要說什么。

識別字符集

Web 瀏覽器必須知道用于編寫文檔的字符集才能正確呈現它。在絕大多數情況下，要聲明的正確字符集是UTF-8。如果您需要聲明其他任何內容，很可能您已經知道并知道如何去做。如果您不確定，請堅持使用 UTF-8 是一個安全的選擇。在 HTML5 中聲明字符集比在以前的 HTML 版本中要簡單得多。這是現代 HTML5 中聲明的正確語法：

只需將該行放到head您的 HTML 文檔中即可。

鏈接到版權信息

過去，通常使用meta標簽來提供版權信息。但是，這不是處理此任務的正確方法，并且網絡爬蟲無法識別標簽的這種標簽外使用meta。識別版權的正確方法是使用HTML 文檔link中的元素，如下所示：head

您還可以在錨點和區域元素上使用rel="license"屬性值對。

停止注釋掉腳本

在過去，通常使用如下語法將腳本添加到 HTML 文檔中：

這是有充分理由的。在某一時刻，許多瀏覽器無法識別script標簽，并試圖將標簽之間的內容呈現為 HTML，從而導致它們以純文本形式顯示腳本。為了避免這個問題，開發人員會注釋掉文本，這樣它就不會被不受支持的瀏覽器呈現為 HTML。那些日子已經離我們很遠了。所有現代瀏覽器都支持該script標簽。只需完全刪除 HTML 注釋括號，或者更好的是，將 JavaScript 編寫在單獨的文件中，然后使用script標記將其導入到當前的 HTML 文檔中，如下所示：

立即停止使用的 HTML 元素

還有不少元素曾經是 HTML 規范的一部分，但后來被棄用或廢棄。以下是您可能仍在使用的八個 HTML 元素，您應該立即停止使用它們以及您可以使用的替代標簽：

applet：如果您仍在使用此標簽，那么您遇到的問題比使用不推薦使用的標簽更大，因為Java 正在作為一種 Web 編程語言退出。短期內切換到objectorembed元素，但長期停止在 web 上使用 Java。
bgsound: 這個元素曾經被 IE 用來為網站添加背景音樂。背景音樂從一開始就是個壞主意。只是不要這樣做。如果您想將音頻內容添加到您的網站，請使用audio標簽，但不要將其設置為自動播放。
frame：該frame元素及其所有相關元素已從 HTML 規范中刪除。不要使用它們。如果iframe您嘗試嵌入外部網頁，請使用CSS，如果您嘗試設計網站布局，請使用。
hgroup：在過去，您可以通過將標題和副標題包裝在適當的標題級別并將兩個標題包裝在hgroup標簽中來對標題和副標題進行分組。但是，此元素已被棄用。相反，使用單個標題元素來包含標題和副標題，將副標題包裝在span標簽中，并使用 CSS 來控制副標題的樣式。
dir：目錄元素曾經是什么 HTML 規范的一部分，用于表示文件或頁面的列表。改用錨元素的無序列表。
acronym：此元素已被棄用，請改用縮寫標簽abbr。
isindex：此元素在網頁上創建了一個文本字段。但是，從 HTML 4.01 開始，可以使用呈現此標記的form元素input和屬性來完成同樣的事情，type="text"這些標記是不必要的和過時的。
plaintext, xmp, 和listing: 這些標簽是以純文本而不是 HTML 顯示文本的不同方式。如果您想在 HTML 文檔中嵌入純文本，您有兩個選項，pre以及'code'。要以等寬字體顯示文本并保留空格 use pre，要顯示代碼，請使用該code元素并<通過>鍵入<和>替換每個符號來轉義所有符號。

由 CSS 更好地處理的任務

有許多元素和屬性曾經是 HTML 的一部分，但執行的任務更適合 CSS。這些元素已經被棄用，取而代之的是讓 CSS 控制網頁呈現。

由 CSS 屬性替換的元素

曾經使用 HTML 元素（如font、basefont、center、strike和u. 這些元素都已被棄用，取而代之的是 CSS 提供的字體和排版控件。要了解更多信息，請查看我們的字體和網頁排版教程。一個從未真正流行起來的獨特標簽是multicol。此標簽可用于將文本分成多列，類似于報紙的外觀?，F在可以使用 CSScolumns屬性在現代瀏覽器中創建類似但更強大的效果。

由 CSS 屬性替換的屬性

廣泛的 HTML 元素屬性曾經可用于控制 HTML 元素的呈現。幾乎所有這些標簽都已被棄用，現在 CSS 提供了相同的功能。如果您不熟悉 CSS 以及如何實現這些屬性，我們的 CSS 教程將幫助您立即開始使用層疊樣式表。下面是一些更常用的屬性和現在可以用來實現相同結果的 CSS 屬性。

align：此屬性已被強大的 CSS 屬性組合所取代，包括text-align、float和vertical-align.
background和bgcolor：不要使用這些已棄用的 HTML 屬性應用背景圖像和顏色，而是使用background-image和background-colorCSS 屬性。
height和width：這些屬性的使用在某些元素上仍然有效。但是，在所有情況下，都可以通過使用同名的 CSS 屬性來實現相同的效果。
clear：如果要強制一個元素清除一側或兩側的所有其他元素，請使用clearCSS 屬性而不是clearHTML 屬性。
border：雖然此屬性在許多元素上仍然可以正常工作，但使用borderCSS 屬性應用邊框是更好的做法。

其他資源

在本文中，我們介紹了一些最常見的元素和屬性，這些元素和屬性使用不當或已被棄用或過時。然而，我們真的只是觸及了冰山一角。如果您想了解已從 HTML 規范中刪除的所有 HTML 元素和屬性，請參閱以下資源：

在線咨詢

上一篇：KTV宣傳片如何制作
下一篇：終于弄懂了dom型xss和反射型xss的區別

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

15個CSS 常見錯誤，請一定要注意避免

DOCTYPE

識別字符集

鏈接到版權信息

停止注釋掉腳本

立即停止使用的 HTML 元素

由 CSS 更好地處理的任務

由 CSS 屬性替換的元素

由 CSS 屬性替換的屬性

其他資源

您的項目需求