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

　　发布于2026-07-22　阅读（0）

扫一扫，手机访问

1、使用CSS重置（reset）

CSS重置库（比如normalize.css）已经流行了很多年，它们确实能让网站样式在不同浏览器下保持一致性。但大多数项目其实用不到库里的所有规则。其实，一条简单的规则就能搞定：给所有元素去掉margin和padding，再改一下盒模型。

*{box-sizing:border-box;margin:0;padding:0}

注意，这里的box-sizing声明是可选的——如果你打算用下面继承的盒模型形式，可以直接跳过它。

2、继承盒模型

让盒模型从html开始继承，后续所有元素都统一使用这个规则，省心又省力：

html {    box-sizing: border-box;  }    *, *:before, *:after {    box-sizing: inherit;  }

3、使用flexbox布局来避免margin的问题

以前用浮动做栅格布局或图片画廊时，总得写一堆清除浮动和重置外边距的代码，一不小心还会碰到nth-child、first-child、last-child的坑。现在好了，flexbox的space-between属性直接搞定，代码干净利落：

.flex-container{display:flex;justify-content:space-between;}.flex-container .item{              flex-basis:23%;}

4、使用:not() 解决lists边框的问题

很多导航菜单会用border给每个链接加分割线，然后单独取消最后一个的border。这种“先加后删”的方式很啰嗦，而且容易出问题。其实用:not()伪类一巴掌拍死除最后一个以外的所有元素，更简洁也更语义化：

.na v li:not(:last-child) {    border-right: 1px solid #666;  }

当然，.na v li+li 或者 .na v li:first-child ~li 也能实现，但:not()读起来更直观，维护起来也轻松。

5、body上加入line-height样式

很多新手写CSS喜欢到处重复声明字号和行高。其实只要在body上统一设置一个line-height，整个项目的垂直节奏就稳了，代码量也大幅减少：

body {line-height: 1.5;}

注意这个值没有单位，它告诉浏览器行高是字体大小的1.5倍，既灵活又标准。

6、垂直居中任何元素

在CSS Grid全面普及之前，写一个垂直居中的全局规则会让你的布局优雅很多。用flexbox就能轻松实现：

html, body {height: 100%;    margin: 0;  }    body {    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    display: -webkit-flex;    display: flex;  }

7、使用SVG icons

SVG适配所有分辨率，浏览器支持度也够好，是时候把.png、.jpg、.gif这些老伙计替换掉了。FontAwesome 5也提供了SVG版本的图标字体。使用方式和普通图片一样简单：

.logo {    background: url("logo.svg");  }

有一点需要注意：如果SVG用在交互元素（比如按钮）上，可能会因为加载失败而显示空白。可以加一条规则兜底，确保能访问到（当然，HTML里要写好相应的aria属性）：

.no-svg .icon-only:after {    content: attr(aria-label);  }

8、使用“OWL选择器”

通用选择器*和相邻兄弟选择器+组合起来，能给你的文档流中所有元素一套统一的间距规则，非常强大：

* + * {    margin-top: 1.5rem;  }

这个技巧能让标题和段落之间的间距均匀一致，视觉上更舒服。比如H3后面的H4，或者一段文字之后的另一段，至少保持1.5rem（大概30px）的间距。

9、一致的垂直结构

一致的垂直节奏能让内容更好读，看起来也更专业。如果上面的OWL选择器太“通用”，你可以在特定容器内用通用选择器*来创建局部一致的垂直节奏：

.intro > * {   margin-bottom: 1.25rem;  }

10、对更漂亮的换行文本使用box-decoration-break

有时候你想给长文本的每一行单独加背景色、间距或边框，而不是把整个段落变成一个“大色块”。box-decoration-break属性就能做到，它只对每行文本应用样式，同时保持填充和边距的完整性。在悬停高亮或滑块内文本装饰中特别实用：

.p {display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}

这里的display: inline-block让颜色、背景、边距和填充分别作用于每行文本，clone声明则确保这些样式均匀地应用到每一行上。

11、等宽表格单元格

表格布局有时候挺头疼，尤其是列宽不一致时。其实只要设置table-layout: fixed，所有单元格就会自动等宽：

.calendar {    table-layout: fixed;  }

12、强制使用属性选择器显示空链接

这个技巧对CMS生成的链接特别友好——很多CMS不会给链接加特定的class，但你可以通过属性选择器来精确控制。比如，一个没有文本内容但href有值的a标签，让它显示链接地址：

a[href^="http"]:empty::before {    content: attr(href);  }

13、样式“默认”链接

几乎每个样式表里都有一大堆a标签的样式，然后又在子元素里写一堆覆盖规则。这很麻烦，尤其在WordPress这类CMS里，一不小心就会把按钮颜色也搞乱。试试这种“低干扰”的默认链接样式，只影响那些没有class的a标签：

a[href]:not([class]) {    color: #999;    text-decoration: none;  transition: all ease-in-out .3s;}

14、比率框

想创建一个固定宽高比的容器？只需要给div设置顶部或底部填充即可：

.container {    height: 0;    padding-bottom: 20%;    position: relative;  }    .container div {    border: 2px dashed #ddd;    height: 100%;    left: 0;    position: absolute;    top: 0;    width: 100%;  }

这里padding-bottom设为20%，容器的宽高比就是5:1（100%宽度 / 20%高度）。无论视口怎么变，子元素都能保持这个比例。

15、风格破碎的图像

图片加载失败是常有的事，一个空白的占位太丑了。用下面这段CSS，让破碎的图片看起来也像精心设计过的：

img {    display: block;    font-family: Helvetica, Arial, sans-serif;    font-weight: 300;    height: auto;    line-height: 2;    position: relative;    text-align: center;    width: 100%;  }img:before {    content: "We're sorry, the image below is missing :(";    display: block;    margin-bottom: 10px;  }    img:after {    content: "(url: " attr(src) ")";   display: block;    font-size: 12px;  }

16、使用rem进行全局大小调整；使用em进行局部大小调整

先设置根字号，比如html { font-size: 15px; }，然后用rem定义包含元素的字体大小——这样整个布局的缩放就统一了：

article {    font-size: 1.25rem;  }    aside {    font-size: .9rem;  }

接着，内部的文本元素（比如h2、p）用em来定义相对大小，这样它们就会相对于父元素自动调整：

h2 {    font-size: 2em;  }    p {    font-size: 1em;  }

这样一来，每个包含区域都变成了独立的“模块”，样式更灵活、更容易维护。

17、隐藏未静音的自动播放视频

有些页面加载时自动播放的视频会突然出现声音，很烦人。用这个技巧配合:not()伪选择器，可以自动隐藏那些未静音的自动播放视频：

video[autoplay]:not([muted]) {    display: none;  }

18、灵活运用root类型

响应式布局中，字体大小如果能自动根据视口调整，就能省去很多媒体查询。用:root和视口单位，根据视口宽度和高度计算字体大小：

:root {    font-size: calc(1vw + 1vh + .5vmin);  }

然后你就可以放心地用rem来定义其他元素的字号了：

body {    font: 1rem/1.6 sans-serif;  }

结合上面rem/em的技巧，控制效果会更好。

19、在表单元素上设置字体大小，以获得更好的移动体验

移动端浏览器（比如iOS Safari）在点击