CSS 常用属性

选择器、Flexbox、布局、响应式、动画常用写法

🔍

选择器

.class { }

类选择器

#id { }

ID 选择器

div > p { }

子元素选择器

a:hover { }

伪类（悬停等）

input:focus { }

聚焦状态样式

布局

display: flex;

Flex 弹性布局

display: grid;

Grid 网格布局

position: absolute; top: 0; right: 0;

绝对定位

overflow: hidden;

隐藏溢出内容

Flexbox

justify-content: center;

主轴对齐

align-items: center;

交叉轴对齐

flex: 1;

弹性伸缩占满空间

gap: 16px;

子元素间距

盒模型

margin: 0 auto;

块级元素水平居中

padding: 16px;

内边距

border-radius: 8px;

圆角

box-shadow: 0 4px 12px rgba(0,0,0,.1);

阴影效果

文字

font-size: 16px; line-height: 1.5;

字号与行高

text-align: center;

文字对齐

text-overflow: ellipsis; white-space: nowrap;

单行文字省略

color: #333; background: #fff;

文字与背景色

响应式

@media (max-width: 768px) { }

移动端媒体查询

width: 100%; max-width: 1200px;

流式宽度与最大宽度

object-fit: cover;

图片裁剪填充

动画

transition: all .3s ease;

过渡动画

transform: translateY(-4px);

位移/缩放变换

@keyframes fadeIn { from { opacity: 0; } }

关键帧动画