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。此标签可用于将文本分成多列，类似于报纸的外观。现在可以使用 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 属性替换的属性

其他资源

您的项目需求