css制作规则

CSS 制作规则

CSS（层叠样式表）用于控制网页的样式和布局。以下是核心规则和最佳实践：

选择器与声明块

• 选择器：指定样式应用的HTML元素，如 p、.class 或 #id。
• 声明块：用 {} 包裹，包含属性和值，如 { color: red; }。

p {
    color: blue;
    font-size: 16px;
}

层叠与优先级

• 层叠：多个样式规则作用于同一元素时，后定义的规则覆盖前者。
• 优先级：!important > 行内样式 > ID选择器 > 类/伪类选择器 > 元素选择器。

.text {
    color: green !important; /* 最高优先级 */
}

盒模型

• 组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）。
• box-sizing：border-box（包含边框和内边距在内的总宽度）或 content-box（默认）。

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* 总宽度保持300px */
}

布局与定位

• Flexbox：弹性布局，通过 display: flex 实现灵活排列。
• Grid：网格布局，使用 display: grid 定义行列结构。
• 定位：position 属性（static、relative、absolute、fixed、sticky）。

.container {
    display: flex;
    justify-content: center;
}
.item {
    position: absolute;
    top: 10px;
}

响应式设计

• 媒体查询：根据屏幕尺寸应用不同样式。
• 单位：使用 vw、vh、% 等相对单位适配不同设备。

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

性能优化

• 减少选择器复杂度：避免嵌套过深（如 div ul li a）。
• 压缩文件：移除空格和注释，减小CSS文件体积。
• 使用CSS变量：便于维护和复用。

:root {
    --primary-color: #3498db;
}
.button {
    background-color: var(--primary-color);
}

浏览器兼容性

• 前缀：部分属性需加厂商前缀（如 -webkit-、-moz-）。
• 渐进增强：先确保基础功能，再添加高级特性。

.box {
    -webkit-border-radius: 10px; /* Chrome/Safari */
    -moz-border-radius: 10px;    /* Firefox */
    border-radius: 10px;         /* 标准语法 */
}