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; /* 标准语法 */
}
