本文为翻译作品，原文链接：10 CSS One-Liners to Transform Your Web App
CSS 让你能够创建美观且响应式的网页设计。
然而，编写 CSS 代码可能既耗时又具有挑战性，特别是如果你不熟悉最新的技术和最佳实践。
幸运的是，有几个一行代码的技巧可以帮助你简化你的 CSS 代码，让你的项目更加高效。
在这篇文章中，我将介绍 10 个 CSS 一行代码的技巧，这些技巧可以改造你的项目，帮助你轻松创建自己满意的网页设计。
1. 居中一个 div
居中一个 div 涉及到将一个 div 元素定位在页面的中心，或者定位在父容器的内部。使用 CSS 居中一个 div 有几种方法，包括使用 text-align、position 和 display 属性。
水平居中：要水平居中一个 div，你可以使用以下 CSS 代码：
.container {
display: flex;
justify-content: center;
}
这将创建一个 flex 容器，它会将其子元素排列成一行，并水平居中它们。
垂直居中：要垂直居中一个 div，你可以使用以下 CSS 代码：
.container {
display: flex;
align-items: center;
}
这将创建一个 flex 容器，它会将其子元素排列成一列，并垂直居中它们。
水平和垂直居中：要同时水平和垂直居中一个 div，你可以使用以下 CSS 代码：
.container {
display: flex;
justify-content: center;
align-items: center;
}
这将创建一个 flex 容器，它会将其子元素排列成一行，并同时水平和垂直居中它们。
2. 创建自由流动元素
display: flex 是一个 CSS 属性，允许你创建一个 flex 容器。它用于创建可以排列成行或列的自由流动元素，并且可以调整大小以适应可用空间。
以下是如何使用 display: flex 创建一行元素的示例：
.container {
display: flex;
}
这将创建一个 flex 容器，它会将其子元素排列成一行。然后你可以使用其他 CSS 属性，如 justify-content、align-items 和 flex-wrap 来进一步自定义元素的布局。
3. 在 DOM 中任意定位元素
相对定位用于修改元素的最终位置，包括使其与页面上的其他元素重叠。它通过将元素的 position 属性设置为 relative 来工作。一旦元素在正常流中占据了位置，你就可以使用 top、bottom、left 和 right 属性修改其最终位置。以下是一个示例：
.element {
position: relative;
top: 10px;
left: 20px;
}
这将使元素从其原始位置向下移动 10px 并向右移动 20px。
绝对定位用于相对于其最近的定位祖先元素定位一个元素。它通过将元素的 position 属性设置为 absolute 来工作。以下是一个示例：
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这将在其最近的定位祖先元素内水平和垂直居中元素。
4. 通用盒模型设置
最常见的 CSS 错误之一是忘记设置 box-sizing 属性。这个属性决定了元素的宽度和高度如何计算。默认情况下，box-sizing 属性设置为 content-box，这意味着元素的宽度和高度仅包括其内边距和边框。这可能会导致意外的布局问题。
为了解决这个问题，你可以简单地添加以下一行代码到你的 CSS 中：
{
box-sizing: border-box;
}
这将为页面上所有元素设置 box-sizing 属性为 border-box。这意味着元素的宽度和高度将包括其内边距、边框以及内容。
5. 响应式图片
图片是任何网站的重要组成部分，但让图片响应式也是一个挑战。如果你的图片代码不正确，它们在不同的屏幕尺寸上可能会显得拉伸或扭曲。
为了使你的图片响应式，你可以使用以下一行代码：
img {
max-width: 100%;
height: auto;
}
这将确保你的图片永远不会占用超过可用空间的 100%，并且它们会保持其纵横比。
6. 元素居中
在 CSS 中水平和垂直居中元素可能有点棘手。然而，有一个简单的一行代码，你可以用来居中页面上的任何元素：
.center {
margin: 0 auto;
}
这将使元素在页面上水平居中。你也可以添加以下代码来使元素垂直居中：
.center {
text-align: center;
}
7. 创建自定义复选框样式
复选框经常用于表单中，但它们的外观可能相当乏味。通过一点 CSS，你可以轻松创建与你网站的外观和感觉相匹配的自定义复选框样式。
以下是一个你可以用来创建简单复选框样式的一行代码：
input[type="checkbox"] {
-webkit-appearance: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
width: 16px;
height: 16px;
display: inline-block;
}
input[type="checkbox"]:checked {
background-color: #ddd;
}
这将创建一个具有灰色背景和蓝色边框的复选框。当复选框被选中时，背景颜色将变为浅灰色。
8. 让文本更平滑
文本在屏幕上有时会出现锯齿状或模糊。这是因为字体渲染方式的原因。你可以使用以下一行代码使你的文本看起来更平滑：
text-rendering: optimizeLegibility;
这将告诉浏览器使用一种渲染技术，使文本即使在低分辨率屏幕上也能看起来更平滑。
9. 清除浮动
浮动可以是一个有用的 CSS 布局技术，但如果你不小心，它们也会造成问题。一个常见的问题是浮动元素可能与页面上的其他元素重叠。
为了防止这种情况发生，你可以使用以下一行代码来清除浮动：
.clearfix:after {
content: "";
display: block;
clear: both;
}
这将添加一个 clearfix 类到任何你想在其之后清除浮动的元素。
10. 重置所有样式
有时，你可能想要从头开始使用你的 CSS。为了重置页面上所有的样式，你可以使用以下一行代码：
{
margin: 0;
padding: 0;
border: 0;
font-size: 16px;
font-family: sans-serif;
}
这将重置所有的边距、内边距、边框、字体大小和字体家族到它们的默认值。
总结
你可以在你的 Web 应用中使用这 10 个 CSS 一行代码，在几分钟内优化它的外观和感觉！
原文链接：https://juejin.cn/post/7333215594203152419 作者：前端为什么
