CSS开发过程中的20个快速提升技巧

这篇文章带你20个CSS技巧，这些技巧可以帮助你解决工作中遇到的常见问题，让你逐渐成为一个CSS高手。

目录：

一、重置CSS——打造清晰标准的网站样式

CSS重置库如normalize.css已经得到广泛应用多年，它们为网站样式提供了一个清晰的标准，确保跨浏览器之间的一致性。大部分项目并不需要这些库包含的所有规则。一个简单的规则可以应用于布局中的所有元素，删除所有的margin和padding，改变浏览器默认的盒模型。使用“box-sizing: border-box;”声明可以确保元素的宽度和高度包括内容、内边距和边框。如果你的网站使用继承的盒模型形式，可以跳过这一步。

二、继承盒模型——让盒模型从html继承

让盒模型从html开始继承是一种有效的CSS策略。通过设置html的盒模型，可以影响整个网站的布局方式。使用flexbox布局可以避免使用浮动时出现的margin问题，例如栅格布局、组合或图片画廊。使用flexbox的space-between属性值可以轻松实现空间均匀分布。

三、解决lists边框的问题——使用:not()伪类

在web设计中，我们经常使用last-child和nth-child选择器来覆盖原先声明在父选择器上的样式。例如，在导航菜单中，我们可以使用边框为链接创建分割符，然后使用特定的选择器来移除最后一个链接的边框。这种方法虽然可以实现效果，但会造成样式的混乱。通过利用not伪类，我们可以在想声明的元素上只使用一种样式。这种方法更具有语义化和易于理解。例如，“.nav li:not(:last-child)”将为除了最后一个li以外的所有li添加边框样式。

四、简化body样式——提升CSS效率

垂直居中任何元素也是一个常用的布局技巧。在没有准备使用CSS Grid布局的时候，设置垂直居中布局的全局规则可以为基础的内容布局奠定一个优雅的基础。这可以通过设置`html`和`body`的高度为100%，并使用`-webkit-align-items`、`-ms-flex-align`和`align-items`属性来实现。

使用SVG图标也是一个很好的实践。SVG图标在所有分辨率下都能完美显示，且所有浏览器都支持。将SVG用作可交互元素时，可能会遇到加载问题。但可以通过狼蚁网站SEO优化规则来确保SVG的访问性。在使用SVG图标时，只需要像其他图片一样设置背景即可。例如，`.logo { background: url("logo.svg"); }`。

使用“OWL选择器”也是一种强大的CSS技巧。通用选择器（universal selector）和相邻的兄弟选择器（adjacent sibling selector）+ 可以为紧跟在其他元素后的所有元素设置统一的规则，从而创建更加均匀的类型和间距。例如，使用选择器“+ ”可以为所有相邻的元素设置外边距。

一致的垂直节奏对于创建视觉美学和增强内容可读性至关重要。可以通过在特定布局的元素的内部使用通用选择器来创建一致的垂直节奏。Box Decoration Break属性允许对换行文本应用样式，而不会破坏元素的填充和页边距的完整性。这对于在悬停时应用突出显示或在滑块中设置子文本样式特别有用。通过将这些属性设置为`clone`，可以将颜色、背景、页边距和填充应用于每行文本。

12、巧妙利用属性选择器展示空链接

13、优化默认链接样式

在样式表中，我们经常会为链接（A标签）设置一个通用样式。这可能导致为子元素中的链接编写额外的样式规则变得复杂，且在CMS如WordPress上使用时可能会出现问题。为此，我们可以尝试一种更简洁的方式来为默认链接添加样式：`a[href]:not([class])`。这样，只有没有类属性的链接会被这个样式影响，避免了不必要的冲突。

14、利用比率创建自适应框

创建一个具有固定比率的框并不复杂。只需将div的底部填充设为特定百分比即可。例如，使用`padding-bottom: 20%;`的div会自动根据其宽度调整高度，保持设定的比率。无论视口大小如何变化，其子元素都能保持一致的纵横比。

15、优雅处理破碎的图像

当网页上的图像出现问题时，可能会产生不雅观或混乱的效果。通过简单的CSS技巧，我们可以创建更美观的替代方案。例如，当图像无法加载时，我们可以使用`img:before`和`img:after`伪元素来显示友好的提示信息，包括图像的缺失以及图像的URL。

16、灵活使用rem和em进行字体大小调整

在CSS中，rem和em是两种常用的单位来设置字体大小。设置根元素的字体大小后（例如html字体大小为15px），我们可以使用rem来设置包含元素的字体大小，如`article { font-size: 1.25rem; }`。而对于局部元素，我们可以使用em来设置其字体大小，如`h2 { font-size: 2em; }`。这样，每个元素都能根据其上下文和层级来适应不同的字体大小。

17、应对自动播放视频的挑战

当处理无法轻易控制源代码的内容时，对于自定义用户样式表来说，隐藏未静音的自动播放视频是一个实用的技巧。通过巧妙地运用CSS，我们可以确保用户体验更加流畅和舒适。

掌握这些技巧，让网页加载不再打扰访问者——自动播放视频声音控制及精彩的not（）伪选择器应用

===============================