主流 CSS 框架和组件库的响应式设计断点规格

有时，我们拿到的图片素材与我们期望的方向刚好相反，或者我们想用同一张图片素材实现正反两个方向的效果。这时就需要用到 CSS 翻转图片的技巧（把 `👉` 显示为 `👈`）。 > 注意，是把图片进行镜像翻转，而不是让图片围绕中心点旋转。 > 其实这个技巧不仅只对图片有用，对其他元素也同样有效。 代码片断 方案一 /* 水平镜像翻转 */ .flip-horizontally { transfo

当容器的最大高度有限制时，如果其内部文本超长溢出，用省略号把文本超出指定行数之后的部分截断是个常见需求。 本文讨论多行文本超长截断的场景。 代码片段 .container { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 行数 } > `-web

当文本超长溢出容器宽度时，用省略号把文本截断是个常见需求。 本文仅讨论单行文本超长截断的场景。 代码片段 .container { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

当一个容器的所有子元素都具备浮动属性时，容器的高度并不会被撑开，这往往是不符合预期的。此时需要一种称作 “clearfix” 的方法来实现 “闭合浮动” 的效果。 有人把这个场景笼统地称为 “清除浮动”，但实际上还是 “闭合浮动” 的说法更准确一些。 代码片段 类： .clearfix::after { content: ''; display: table; clear:

.container { display: flex; justify-content: center; align-items: center; } 限制条件 无限制条件。即： * 容器无需定宽定高。 * 子元素无需定宽定高。 坑 * 当容器指定 `display: flex;` 之后，如果它的子元素不止一个，则这些子元素会尽可能水平排列，这可能与预期不符。

**HTML** 的 `<style>` 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是 CSS 的格式。 名称来源 Style，样式。 最佳实践 * 如果 `type` 属性未指定，则默认为 `text/css`。因此该属性可省略。