这是最常被误用的根源。当你给一个 div 加上 outline: 2px solid red，它不会影响周围元素的位置；但换成 border: 2px solid red，整个盒模型宽度和高度就多了 4px（上下/左右各 2px），可能触发重排或挤掉邻近元素。
css定位元素在RTL语言布局中错位怎么办_使用inset-inline-start等逻辑属性适配双向文本
RTL布局错位源于硬编码物理方…
css
精选推荐
CSS布局中图标与文字无法对齐怎么办_通过line-height与vertical-align精准调节
图标与文字在CSS中无法对齐的…
Golang如何实现静态文件压缩与缓存_Golang Web静态文件优化方法实践
通过Gzip压缩与HTTP缓存…
最新动态
CSS轮廓线设置_outline与border的区别及应用
CSS斜体与倾斜的区别_italic与oblique的微小差异
font-style: italic 不是“让字歪一点”，而是告诉浏览器：“请调用这个字体家族里专门设计的斜体字形”。比如 Open Sans 或 Georgia 都自带独立的 italic 字重文件，字母 a、e、f 的曲线、收笔、倾斜角度全是手绘优化过的。
css透明度如何设置_通过opacity实现元素透明效果
opacity 只能整体控制元素及其所有子元素的透明度，无法单独让背景或文字变透明。
css如何通过媒体查询引入样式_实现响应式设计的样式加载
直接写在 CSS 文件里最稳妥。HTML 中用 <link> 标签带 media 属性也能加载，但会触发额外 HTTP 请求、影响渲染阻塞，且无法做细粒度控制。CSS 内联媒体查询（@media）支持嵌套规则、可复用变量、便于维护。
css:nth-child与:nth-of-type伪类如何高效使用_快速选择指定位置元素
因为 :nth-child 只看「父元素下所有子元素的顺序位置」，不区分标签类型。比如一个 <div> 前面有 <code><p></p> 和 <span></span>，那它可能是第 3 个子元素，但不是第 1 个 <div>。 <p>常见错误现象：<code>ul li:nth-child(2) 想选第二个 <li>，结果没生效——很可能是因为 <ul></ul> 里第一个子元素是注释、空格文本节点，或意外插入了其他标签（如 <div class="ad">）。 <ul> <li>使用前先用浏览器开发者工具检查父容器的「真实子节点结构」，右键 →「Edit as HTML」可看清隐藏节点</li> <li>若父元素中混有多种标签且目标元素不连续，优先考虑 <code>:nth-of-type
:nth-child(n) 的 n 从 1 开始计数，:nth-child(0) 无效
什么时候必须用 :nth-of-type？
CSS解决Flex布局下高度塌陷_理解弹性容器的高度计算
当父容器设了 display: flex，子元素又全是 flex 项（比如没设 height 或内容为空），浏览器很可能把它算成 0 高度——不是 bug，是规范里明确写的：弹性容器的**自动高度不继承子项的“块级”尺寸逻辑**，它只看自身内容盒（content box）的固有尺寸，而 Flex 子项默认不贡献这个尺寸。
CSS原子化类库的引入_Tailwind CSS的配置与安装
不装 CLI 工具、不运行 npm init -y 或 npx tailwindcss init，tailwind.config.js 就不会凭空出现。很多新手卡在“为什么 class 不生效”，实际是压根没这个配置文件。
CSS加载状态过渡_结合伪元素实现简单的Loading视觉
直接说结论：纯CSS做不到监听外部样式表是否加载完成，所谓“CSS加载状态过渡”，本质是用JS触发、CSS实现视觉反馈，伪元素只是其中一种低成本的视觉方案。
CSS定位实现全景图浏览效果_控制大背景图的定位偏移
根本原因是没把鼠标的相对位移，正确映射成背景图的偏移量。浏览器默认的 background-position 是以容器左上角为基准的绝对定位值，而拖拽需要的是“鼠标拖了多少，背景就反向移多少”——这得自己算比例。
CSS工具库Magic.css实战_独特的CSS3特效动画集成
根本原因是它依赖 transform 和 opacity 的初始值触发 CSS 动画，但很多场景下元素加载时已处于“终态”，浏览器跳过动画。比如用 display: none 切换显示、或 JS 动态插入后立刻加 class。