css制作代码大全
CSS 基础语法
CSS（层叠样式表）通过选择器和声明块控制页面样式。基本语法如下：
选择器 {
属性: 值;
属性: 值;
}示例：
body {
font-family: Arial;
background-color: #f0f0f0;
}常用选择器
- 元素选择器：直接匹配HTML标签
p { color: blue; } - 类选择器：通过
.前缀匹配类名.text-red { color: red; } - ID选择器：通过
#前缀匹配唯一ID#header { background: black; } - 后代选择器：嵌套关系匹配
div p { font-size: 14px; }
盒模型属性
控制元素布局的核心属性：
.box {
width: 200px;
height: 100px;
padding: 20px; /* 内边距 */
border: 1px solid #000; /* 边框 */
margin: 10px; /* 外边距 */
box-sizing: border-box; /* 包含边框计算宽度 */
}弹性布局（Flexbox）
实现水平或垂直对齐的现代布局方案：
.container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
gap: 10px; /* 子项间距 */
}
.child {
flex: 1; /* 自适应填充 */
}网格布局（Grid）
二维布局系统示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
grid-gap: 15px;
}
.grid-item {
grid-column: span 2; /* 跨两列 */
}动画与过渡
过渡效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}关键帧动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}响应式设计
通过媒体查询适配不同设备：
@media (max-width: 768px) {
.menu { display: none; }
.mobile-btn { display: block; }
}常见效果实现
居中元素：
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}阴影与圆角：
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 8px;
}预处理器（Sass/Less）
Sass嵌套语法示例：
.nav {
ul { margin: 0; }
li { display: inline-block; }
a { color: #333; }
}实用工具类
Bootstrap风格的快捷类：
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.d-none { display: none; }
