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:鼠标事件穿透控制
相关推荐
奕辰杰15 分钟前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny2 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
路光.3 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!3 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作4 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹4 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz5 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°5 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南5 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔5 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js