CSS 技巧：使你的 CSS 更加专业
bbtvking
7年前
<h2>CSS 专业的技巧</h2> <p>提示的收集，以帮助提升你的CSS技巧。</p> <h3>目录</h3> <h2>专业的技巧</h2> <ol> <li>使用 :not() 选择器来决定表单是否显示边框</li> <li>使用负的 nth-child 来选择元素</li> <li>使用 “形似猫头鹰” 的选择器</li> <li>使用 max-height 来建立纯 CSS 的滑块</li> <li>利用 Flexbox 去除多余的外边距</li> <li>利用属性选择器来选择空链接</li> <li>给 “预设” 链接定义样式</li> <li>用 rem 来调整全局大小；用 em 来调整局部大小</li> <li>隐藏没有静音、自动播放的影片</li> <li>使用选择器 :root 来控制字体弹性</li> <li>将 font-size 关于表单元素为更好的移动体验</li> </ol> <h3>使用CSS复位</h3> <p>CSS重置帮助实施用干净的石板为造型元素在不同的浏览器风格的一致性。您可以使用CSS复位库像 <a href="/misc/goto?guid=4958534205926200382" rel="nofollow,noindex">Normalize</a> 等，也可以使用一个更简化的复位方法：</p> <pre> <code class="language-css">* { box-sizing: border-box; margin: 0; padding: 0; }</code></pre> <p>现在的元素将被剥离利润率和填充和 box-sizing ，您可以管理与CSS盒模型布局。</p> <p><a href="/misc/goto?guid=4959736139447860382" rel="nofollow,noindex">演示</a></p> <p>注意：如果按照尖下面你可能会选择不包含在你的CSS复位 box-sizing 财产。</p> <h3>继承 box-sizing</h3> <p>从 html 元素继承 box-sizing 就好：</p> <pre> <code class="language-css">html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }</code></pre> <p>如此在插件或其它组件里改变 box-sizing 变得简单。</p> <h3>使用 :not() 选择器来决定表单是否显示边框</h3> <p>与其加上边框……</p> <pre> <code class="language-css">/* 添加边框 */ .nav li { border-right: 1px solid #666; }</code></pre> <p>……然后去掉最后一个元素的边框……</p> <pre> <code class="language-css">/* 去掉边框 */ .nav li:last-child { border-right: none; }</code></pre> <p>……不如使用 :not() 伪类来达成同样的效果：</p> <pre> <code class="language-css">.nav li:not(:last-child) { border-right: 1px solid #666; }</code></pre> <p>当然，也可以使用 .nav li + li 或者 .nav li:first-child ~ li 来达成，但是 :not() 选择器的方式更清晰明了，一目了然。</p> <p><a href="/misc/goto?guid=4959736139537345042" rel="nofollow,noindex">演示</a></p> <h3>为 body 元素添加行高</h3> <p>不必为每一个 <p> ， <h*> ，等元素逐一添加 line-height ，为 body 元素添加就好了：</p> <pre> <code class="language-css">body { line-height: 1.5; }</code></pre> <p>文本元素可以很自然地继承 body 的样式。</p> <p><a href="/misc/goto?guid=4959736139618670723" rel="nofollow,noindex">演示</a></p> <h3>垂直居中任何元素</h3> <p>这不是黑魔法，真的可以垂直居中任何元素：</p> <pre> <code class="language-css">html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }</code></pre> <p>这还不够？垂直方向，水平方向……任何元素，任何时间，任何地方？CSS-Tricks <a href="/misc/goto?guid=4958972659646719420" rel="nofollow,noindex">有篇好文</a> 讲到了各种居中的技巧。</p> <p>注意：IE11 对 flexbox 的支持 有点 bug 。</p> <p><a href="/misc/goto?guid=4959736139732490454" rel="nofollow,noindex">演示</a></p> <h3>逗号分隔的列表</h3> <p>列表的每项都由逗号分隔：</p> <pre> <code class="language-css">ul > li:not(:last-child)::after { content: ","; }</code></pre> <p>使用了 :not() 伪类，因此最后一项没加逗号。</p> <p>注意：这一技巧对于无障碍，屏幕阅读器而言并不理想，需要注意。</p> <h3>使用负的 nth-child 来选择元素</h3> <p>使用负的 nth-child 可以选择 1 至 n 个元素。</p> <pre> <code class="language-css">li { display: none; } /* 选择第 1 至第 3 个元素并显示出来 */ li:nth-child(-n+3) { display: block; }</code></pre> <p>或许你已经掌握了，试下这个：</p> <pre> <code class="language-css">/* 选择第 1 至第 3 个元素并显示出来 */ li:not(:nth-child(-n+3)) { display: none; }</code></pre> <p>就是这么简单。</p> <p><a href="/misc/goto?guid=4959736139813277146" rel="nofollow,noindex">演示</a></p> <h3>使用 SVG 图标</h3> <p>没有理由不使用 SVG 图标：</p> <pre> <code class="language-css">.logo { background: url("logo.svg"); }</code></pre> <p>SVG 在所有分辨率下都可以良好缩放，IE9+ 及其它所有浏览器都支持，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。</p> <p>注意：针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：</p> <pre> <code class="language-css">.no-svg .icon-only:after { content: attr(aria-label); }</code></pre> <h3>使用 “形似猫头鹰” 的选择器</h3> <p>这个名字可能比较陌生，不过全局选择器 ( * ) 和 相邻兄弟选择器 ( + ) 一起使用，效果非凡：</p> <pre> <code class="language-css">* + * { margin-top: 1.5em; }</code></pre> <p>在此示例中，遵循其他元素的文档流中的所有元素将都接收上边距 margin-top: 1.5em 的样式。</p> <p>更多 “形似猫头鹰” 的选择器，可参考 <em>A List Apart</em> 上面 Heydon Pickering 的文章</p> <p><a href="/misc/goto?guid=4959736139903148158" rel="nofollow,noindex">演示</a></p> <h3>使用 max-height 来建立纯 CSS 的滑块</h3> <p>max-height 与 overflow hidden 一起来建立纯 CSS 的滑块：</p> <pre> <code class="language-css">.slider { max-height: 200px; overflow-y: hidden; width: 300px; } .slider:hover { max-height: 600px; overflow-y: scroll; }</code></pre> <p>移入滑块元素时增大它的 max-height 的值，便可以显示溢出部分。</p> <h3>创造格子等宽的表格</h3> <p>table-layout: fixed 可以让每个格子保持等宽：</p> <pre> <code class="language-css">.calendar { table-layout: fixed; }</code></pre> <p>无痛的 table 布局。</p> <p><a href="/misc/goto?guid=4959736139989639955" rel="nofollow,noindex">演示</a></p> <h3>利用 Flexbox 去除多余的外边距</h3> <p>与其使用 nth- ， first- ， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：</p> <pre> <code class="language-css">.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }</code></pre> <p>列之间的间隙相等，并且首尾没有多余的间隙。</p> <h3>利用属性选择器来选择空链接</h3> <p>当 <a> 元素没有文本内容，但是有 href 属性的时候，可以显示它的 href 链接：</p> <pre> <code class="language-css">a[href^="http"]:empty::before { content: attr(href); }</code></pre> <p>相当简便。</p> <p><a href="/misc/goto?guid=4959736140071771152" rel="nofollow,noindex">演示</a></p> <h3>给 “预设” 链接定义样式</h3> <p>给 “预设” 链接定义样式：</p> <pre> <code class="language-css">a[href]:not([class]) { color: #008000; text-decoration: underline; }</code></pre> <p>通过 CMS 系统插入的链接，通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式。</p> <h3>一致的垂直节奏</h3> <p>通用选择器 ( * ) 跟元素一起使用，可以保持一致的垂直节奏：</p> <pre> <code class="language-css">.intro > * { margin-bottom: 1.25rem; }</code></pre> <p>一致的垂直节奏可以提供视觉美感，增强内容的可读性。</p> <h3>内在比例盒</h3> <p>要创建具有内在比一个盒子，所有你需要做的就是应用顶部或底部填充，从一个div：</p> <pre> <code class="language-css">.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }</code></pre> <p>使用20％的填充使得框等于其宽度的20％的高度。不管视口的宽度，子元素的div将保持其宽高比（100％/ 20％= 5:1）。</p> <p><a href="/misc/goto?guid=4959736140160701416" rel="nofollow,noindex">演示</a></p> <h3>为破碎图象定义样式</h3> <p>只要一点CSS就可以美化破碎的图象：</p> <pre> <code class="language-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%; }</code></pre> <p>以添加伪元素的法则来显示使用者信息和虚线图像URL的引用：</p> <pre> <code class="language-css">img:before { content: "We're sorry, the image below is broken :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }</code></pre> <p>了解更多关于这类样式的技巧 Ire Aderinokun 的 原帖 .</p> <h3>用 rem 来调整全局大小；用 em 来调整局部大小</h3> <p>在根设置基本字体大小后 ( html { font-size: 100%; } ), 请设置为文本元素的字体大小 em :</p> <pre> <code class="language-css">h2 { font-size: 2em; } p { font-size: 1em; }</code></pre> <p>然后设置字体大小的模块 rem :</p> <pre> <code class="language-css">article { font-size: 1.25rem; } aside .module { font-size: .9rem; }</code></pre> <p>现在，每个模块变得条块分割，更容易、灵活的样式，以便于维护。</p> <h3>隐藏没有静音、自动播放的影片</h3> <p>这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音，则不显示视频：</p> <pre> <code class="language-css">video[autoplay]:not([muted]) { display: none; }</code></pre> <p>再次，我們趁著使用的偽類。</p> <h3>使用选择器 :root 来控制字体弹性</h3> <p>在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度，使用 :root :</p> <pre> <code class="language-css">:root { font-size: calc(1vw + 1vh + .5vmin); }</code></pre> <p>现在，您可以利用基于计算的值 root em 单位： root :</p> <pre> <code class="language-css">body { font: 1rem/1.6 sans-serif; }</code></pre> <p><a href="/misc/goto?guid=4959736139903148158" rel="nofollow,noindex">演示</a></p> <h3>将 font-size 关于表单元素为更好的移动体验</h3> <p>为了避免在HTML表单元素缩放移动浏览器（Safari浏览器的iOS， <em>et AL</em> 。）当一个 <选择> 下拉被窃听，加上 字体size 的选择规则：</p> <pre> <code class="language-css">input[type="text"], input[type="number"], select, textarea { font-size: 16px; }</code></pre> <p>:dancer:</p> <h3>支持情况</h3> <p>这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。</p> <p> </p>