CSS 属性的简写
在 CSS 中，简写属性允许我们用更少的代码来表示多个相关的属性。这不仅使代码更简洁，而且提升了可读性。以下是一些常用的 CSS 简写属性及其示例。
1. margin 和 padding
margin 和 padding 可以简写为一个或四个值，具体取决于需要设置的边距或内边距数量。
/* 所有边相同 */
margin: 10px; /* 上、右、下、左均为 10px */
/* 垂直 | 水平 */
padding: 5px 10px; /* 上、下 5px，左、右 10px */
/* 上 | 右 | 下 | 左 */
margin: 10px 15px 20px 25px; /* 上 10px，右 15px，下 20px，左 25px */
2. border
border 属性可以合并边框的宽度、样式和颜色。
border: 1px solid #000; /* 1px 宽，实线，黑色 */
3. background
background 属性可以简写为多个相关的背景属性。
background: #fff url('image.png') no-repeat center; /* 背景色，背景图，背景重复，背景位置 */
4. font
font 属性可以简写字体的多个属性。
font: italic bold 16px/1.5 "Helvetica", sans-serif; /* 样式、粗细、大小/行高、字体系列 */
5. list-style
list-style 属性可以简写列表的样式。
list-style: square inside #f00; /* 列表样式类型、位置、颜色 */
6. overflow
overflow 属性可以简写为两个值。
overflow: auto hidden; /* 水平溢出 | 垂直溢出 */
7. transition
transition 属性可以简写为多个过渡属性。
transition: all 0.3s ease-in-out; /* 所有属性，持续时间，过渡曲线 */
8. flex
flex 属性简写了弹性容器的多个属性。
flex: 1 1 100px; /* flex-grow | flex-shrink | flex-basis */
9. grid
grid 属性可以简写为多个网格属性。
grid: 1fr 2fr / 100px auto; /* 行的大小 | 列的大小 */
10. text
text 属性可以简写为多个文本相关的属性。
text: underline bold 12px/1.5 "Arial"; /* 下划线、粗细、字体大小/行高、字体系列 */
总结
使用 CSS 简写属性可以减少代码量，提高样式表的可读性。在编写 CSS 时，尽量利用这些简写属性，以保持代码简洁并增强可维护性。记住，虽然简写可以提高效率，但在使用时也要确保代码的清晰易懂，避免过度压缩导致的可读性下降。
