CSS 常用属性汇总

CSS 常用属性汇总

一、盒模型（Box Model）

• width / height：宽/高
• padding：内边距
• margin：外边距
• border：边框（如 1px solid #000）
• box-sizing：如何计算盒子尺寸（content-box | border-box）

二、布局相关

• display：布局类型（block、inline、flex、grid、inline-block等）
• position：定位方式（static、relative、absolute、fixed、sticky）
• top / left / right / bottom：配合定位使用

现代开发中推荐使用display: flex / grid 进行主布局，少用 float，除非做图文环绕，定位属性只用于局部脱离排版或悬浮元素。

• z-index：层级高低
• float：浮动（较旧方式）
• clear：清除浮动

三、Flex 布局常用属性

• display: flex
• flex-direction：方向（row / column）
• justify-content：主轴对齐（flex-start、center、space-between等）
• align-items：交叉轴对齐（stretch、center、flex-start等）
• flex-wrap：是否换行
• gap：子项间距

四、Grid 布局常用属性

• display: grid
• grid-template-columns / grid-template-rows：定义列/行结构
• gap：网格间距
• grid-column / grid-row：子项跨列/行设置

五、文本样式

• color：字体颜色
• font-size：字体大小
• font-weight：粗细（normal、bold、数字）
• font-family：字体
• line-height：行高
• text-align：文本对齐方式（left、center、right）
• text-decoration：下划线等（如 none、underline）
• letter-spacing：字间距
• word-spacing：词间距

六、背景与边框

• background-color：背景颜色
• background-image：背景图
• background-size：背景尺寸（如 cover、contain）
• background-position：背景位置
• background-repeat：是否重复
• border-radius：圆角
• box-shadow：盒子阴影
• border：边框样式（宽度、颜色、线型）

七、列表和表格

• list-style：列表符号样式（none 取消小圆点）
• border-collapse：表格边框合并
• table-layout：表格布局

八、过渡与动画

• transition：过渡动画（如 transition: all 0.3s ease）
• animation：关键帧动画
• transform：2D/3D变换（如 rotate、scale、translate）
• opacity：透明度

九、图片和媒体

• object-fit：图片适应方式（cover、contain）
• max-width：最大宽度
• height: auto：按比例缩放

十、其他常用属性

• overflow：溢出处理（hidden、scroll、auto）
• cursor：鼠标指针样式（如 pointer）
• visibility：可见性（visible、hidden）
• pointer-events：鼠标事件穿透控制