5 个 CSS 技巧让你效率翻倍!
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MV1HamVqticdptpxj9s74Zde8TLl4wuy7ZepBicasYPKQIIumRple6uCQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p><p>与CSS打交道对后端开发者来说总是噩梦般的存在。在这里，让我们联手对抗那些前端开发者，并学习一些连前端开发者都可能忽略的CSS技巧。</p>
<h2>1. Flexbox中的居中技巧</h2>
<p>我们先从著名的居中div问题开始。这里我们将使用flexbox。无需设置绝对定位或调整边距，只需这样做：</p>
<pre><code>.flex-center-demo {
display: flex;
justify-content: center;
align-items: center;
}
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MHMjQxO11jCwXDEqFQk1AKT1ZOm5sgiaqDuTd94uzFuxtcofV21ibvPkw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><br />
Flexbox居中示例</p>
<h2>2. 快速网格自动布局</h2>
<p>如果你在设计导航栏或仪表盘，这个技巧会很有用。如果你有一些元素需要放在一起，可以使用这个方法。</p>
<pre><code>.auto-grid-demo {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
}
</code></pre>
<p>它会自动以最小宽度120px填充行中的盒子。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_jpg/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MzaUjp0BOIhzmjq9VVU9ldcUlMsSOuYfDWoaiabxIqnd8fEtPo9quesA/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><br />
网格自动布局示例</p>
<h2>3. 相邻兄弟选择器</h2>
<p>当你有相邻元素时，这个技巧很有用，比如在标题下方的作者名字。</p>
<pre><code>h2 + p {
font-style: italic;
color: blue;
}
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MlkJ0p7fgJu9MQsSI51mV7p0HZdOS83Ctic7fCT14O23DweAB0dldjIw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><br />
相邻兄弟选择器示例</p>
<h2>4. 利用伪类not()</h2>
<p>当你在设计一些元素时，如果有某个元素需要特别设计，可以使用这个技巧。以下是一个示例，对除了属于 <code><span leaf="">special</span></code>类的第三个盒子之外的所有盒子应用CSS。</p>
<pre><code>.box:not(.special) {
background-color: #3498db;
color: #fff;
margin: 0.5rem;
padding: 1rem;
border-radius: 4px;
}
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_jpg/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MWiaraaFiapI0licicF099ibAGvBiawUH37CMgpCib8bL2CRlb0ich5a34T8Gmg/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><br />
伪类not()示例</p>
<h2>5. 专业级CSS动画</h2>
<p>初次掌握CSS动画可能会有些困难，使用这些关键帧可以将复杂动画简化为单一规则，便于调整或重用。</p>
<pre><code>@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in-demo {
animation: fadeIn 3s forwards;
background-color: #e67e22;
color: #fff;
padding: 1rem;
text-align: center;
border-radius: 4px;
}
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3MADVCpwx4iaibpNnA2uXTLlpH4COt95n3n1UFlnOAjqgpriaHBibQSFNEicA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><br />
CSS动画示例</p>
<h2>额外技巧！</h2>
<p>这里有一个我经常使用的CSS调试技巧。如果你觉得CSS出了问题，但又不知道哪里错了，可以尝试给每个元素加上边框。这对调试CSS非常有用。</p>
<pre><code>/* Debug: 用红色边框勾勒每个元素 */
* {
outline: 1px solid red !important;
}
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_jpg/Oh6DUyGwLSMIpRKNAPIicPibdFTIEXpW3M64mZ7AwicCI7A3WfgibVBsHuExV8QhkJPOYW1H4M85BneUKTrc1gXibRg/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
页:
[1]