css框架

/* 示例代码：一个简单的 CSS 框架 */

/* 1. 归零样式（Reset CSS） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. 基础布局类 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }

/* 3. 其他常用样式 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.padding-10 {
    padding: 10px;
}

/* 解释说明：
这是一个简单的 CSS 框架，包含了归零样式、基础布局类和其他常用样式。
1. 归零样式用于移除浏览器默认的外边距和内边距，并设置盒模型为 border-box。
2. 基础布局类提供了容器、行和列的定义，方便快速构建响应式布局。
3. 其他常用样式提供了一些常用的文本对齐和间距类，简化了样式的编写。
*/