css

精选推荐

最新动态

CSS响应式排版中的孤行控制_防止移动端标题文字过短

2026年2月23日

CSS里的孤行问题，不是“页面只有一行字”这种字面意思，而是指段落末尾或标题开头单独被挤到新行、和主体内容断开——比如一个两字标题简介在窄屏上被强行拆成“简”在上一行、“介”在下一行，或者标题单独占顶、下面正文却空出一大截。这种断裂感在移动端特别刺眼，因为视口宽度小、行高相对大，line-height和font-size稍一变化就容易触发。

CSS轮廓线设置_outline与border的区别及应用

2026年2月23日

这是最常被误用的根源。当你给一个 div 加上 outline: 2px solid red，它不会影响周围元素的位置；但换成 border: 2px solid red，整个盒模型宽度和高度就多了 4px（上下/左右各 2px），可能触发重排或挤掉邻近元素。

CSS斜体与倾斜的区别_italic与oblique的微小差异

2026年2月23日

font-style: italic 不是“让字歪一点”，而是告诉浏览器：“请调用这个字体家族里专门设计的斜体字形”。比如 Open Sans 或 Georgia 都自带独立的 italic 字重文件，字母 a、e、f 的曲线、收笔、倾斜角度全是手绘优化过的。

css:nth-child与:nth-of-type伪类如何高效使用_快速选择指定位置元素

2026年2月23日

因为 :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布局下高度塌陷_理解弹性容器的高度计算

2026年2月23日

当父容器设了 display: flex，子元素又全是 flex 项（比如没设 height 或内容为空），浏览器很可能把它算成 0 高度——不是 bug，是规范里明确写的：弹性容器的**自动高度不继承子项的“块级”尺寸逻辑**，它只看自身内容盒（content box）的固有尺寸，而 Flex 子项默认不贡献这个尺寸。