CSS 常用属性汇总

CSS 常用属性汇总

一、盒模型(Box Model)

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

二、布局相关

  • display:布局类型(blockinlineflexgridinline-block等)
  • position:定位方式(staticrelativeabsolutefixedsticky
  • top / left / right / bottom:配合定位使用

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

  • z-index:层级高低
  • float:浮动(较旧方式)
  • clear:清除浮动

三、Flex 布局常用属性

  • display: flex
  • flex-direction:方向(row / column
  • justify-content:主轴对齐(flex-startcenterspace-between等)
  • align-items:交叉轴对齐(stretchcenterflex-start等)
  • flex-wrap:是否换行
  • gap:子项间距

四、Grid 布局常用属性

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

五、文本样式

  • color:字体颜色
  • font-size:字体大小
  • font-weight:粗细(normalbold、数字)
  • font-family:字体
  • line-height:行高
  • text-align:文本对齐方式(leftcenterright
  • text-decoration:下划线等(如 noneunderline
  • letter-spacing:字间距
  • word-spacing:词间距

六、背景与边框

  • background-color:背景颜色
  • background-image:背景图
  • background-size:背景尺寸(如 covercontain
  • 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变换(如 rotatescaletranslate
  • opacity:透明度

九、图片和媒体

  • object-fit:图片适应方式(covercontain
  • max-width:最大宽度
  • height: auto:按比例缩放

十、其他常用属性

  • overflow:溢出处理(hiddenscrollauto
  • cursor:鼠标指针样式(如 pointer
  • visibility:可见性(visiblehidden
  • pointer-events:鼠标事件穿透控制
相关推荐
奋斗的小羊羊28 分钟前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿34 分钟前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡34 分钟前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友2 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光2 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_2 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~3 小时前
CSS @media 媒体查询
前端·css·媒体
shix .3 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug4 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴4 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript