CSS

使用 CSS Flex 实现指定间距的九宫格
Jul 29, 2023
有这样的需求：在指定的宽度中，实现一个 9x9 的九宫格布局，item 之间的间距是固定的，比如 4px。item 的宽度等于容器宽度减去间距后平分，需要…
CSS
CSS 优化字体渲染
Feb 16, 2021
侧重文本的可读性（清晰度）最好的抗锯齿效果 html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } VSCode 如果你用的是 VSCode，也可以开启抗锯齿效果。在设置里搜索font alias…
CSS VSCode
网页排版：精确控制文字行高和间距
Feb 06, 2021
单行高度一行文字的高度等于 font-size 乘以 line-height font-size: 14px, line-height: 1 当行高设置为 1 时，行高度是： 14 * 1 = 14px font-size: 14px, line-height: 1.5 调整到 1.5 时，行高度是： 14 * 1.5 = 21px 文字行内间距文字在一…
CSS HTML
解决 space-between 最后一行的对齐问题
Jan 02, 2020
接这篇文章。如果给 .flex 容器加上 space-between 平均分布对齐的方式： .flex { ... justify-content: space-between; ... } space-between 的效果因为最后一行的元素数量特别少，平均到的间距就很大。但是这不符合设计预…
CSS
CSS flex wrap 布局中设置元素间距
Jan 02, 2020
CSS flex wrap 布局里，没有直接设置间距的参数，默认情况下各元素会紧贴着排列在一起。一个普通的 flex wrap 布局代码： .box { width: 414px; height: 736px; margin: 0 auto; border: 1px solid blue; } .flex { display: flex; flex-wrap: wrap; border:…
CSS