Css样式属性中的“参数”，更准确地说通常是指属性的取值，而不是属性名本身。比如 display、position、color 是属性名，block、absolute、纯白色 才是对应的常见参数或取值。要回答“Css样式类型属性中有哪些参数”，更实用的方式就是按常用属性列出可用取值类型、典型示例和适用场景。

Css样式属性的参数通常指什么

在 CSS 里，完整写法通常由“属性名: 取值”组成，所以多数用户问“参数有哪些”，实际想了解的是某个属性可以填写哪些取值。属性名负责说明控制什么，取值负责说明怎么显示，两者不能混用。

常见取值类型主要有长度值、百分比、颜色值、关键字、函数值和全局值。长度值包括 px、em、rem、vw、vh，百分比常用于宽高和定位，颜色值常见有颜色名、十六进制、rgb 和 rgba，函数值常见有 url、calc、translate 和 rotate。

此外还有一组很多属性都支持的全局值，例如 inherit、initial、unset、revert。这些值不专属于某一个属性，但在排查继承、重置默认样式和恢复浏览器行为时很常用。

• 长度值常见写法包括 px、em、rem、vw 和 vh，常用于字号、宽高、间距和圆角
• 百分比值常见写法包括 50% 和 100%，常用于宽度、高度、背景尺寸和定位偏移
• 颜色值常见写法包括 red、纯白色、rgb(255,255,255) 和 rgba(0,0,0,0.5)
• 关键字取值常见写法包括 block、none、center、bold、cover 和 hidden
• 函数值常见写法包括 url(image.png)、calc(100% - 20px)、translateX(10px) 和 rotate(45deg)
• 全局值常见写法包括 inherit、initial、unset 和 revert

文字和字体相关属性有哪些常见参数

文字与字体类属性主要控制文本颜色、字号、字重、字形、对齐和装饰效果。这一组属性最常见的参数类型是颜色值、长度值、数字值和关键字。

如果想快速查参数，可以从高频属性入手。color 决定文字颜色，font-size 决定字号，font-family 决定字体族，font-weight 决定粗细，line-height 决定行距，text-align 决定对齐方式。

这类属性直接影响阅读体验，所以设置时通常优先考虑“是否易读”和“是否符合层级”。同样是字体设置，标题更常用较大字号和较高字重，正文更常见正常字重和适中的行高。

• color 的常见取值包括颜色名、十六进制颜色、rgb 颜色和 rgba 透明颜色，例如 深灰色 或 rgb(51,51,51)
• font-size 的常见取值包括 px、rem、em、百分比和关键字，例如 16px、1rem、120%
• font-family 的常见取值包括具体字体名称和通用字体族，例如 "Microsoft YaHei"、serif、sans-serif
• font-weight 的常见取值包括 normal、bold、bolder、lighter 和 100 到 900 的数值
• font-style 的常见取值包括 normal、italic 和 oblique
• line-height 的常见取值包括无单位数字、px、em 和百分比，例如 1.6、24px
• text-align 的常见取值包括 left、center、right 和 justify
• text-decoration 的常见取值包括 none、underline、overline 和 line-through

盒模型与尺寸间距属性有哪些参数

盒模型相关属性决定元素占多大空间，以及内容、边框和外部留白怎么分布。这里最常见的参数类型是长度值、百分比、auto 和组合写法。

width、height、margin、padding、border、box-sizing 都属于高频属性。尤其是 margin 和 padding，经常需要写一到四个值；border 则往往是宽度、样式、颜色三部分组合。

如果页面出现模块拥挤、间距错乱、宽度超出或边框显示异常，通常就要检查这一组属性及其具体取值。

• width 和 height 的常见取值包括 auto、px、%、vw、vh、max-content 和 min-content
• min-width、max-width、min-height、max-height 的常见取值包括 px、%、none 和 auto
• margin 的常见取值包括单个长度值、两个值、三个值、四个值以及 auto，例如 0 auto
• padding 的常见取值包括单个长度值和一到四个方向组合值，例如 12px 16px
• border 的常见写法包括 1px solid 浅灰色，也可分别写 border-width、border-style 和 border-color
• border-style 的常见取值包括 none、solid、dashed、dotted 和 double
• box-sizing 的常见取值包括 content-box 和 border-box

布局和定位属性中常用的参数有哪些

布局与定位是 CSS 中最容易影响整体结构的一组属性，常见属性包括 display、position、top、left、float、clear，以及 flex 和 grid 相关属性。

其中 display 和 position 最核心。display 决定元素参与排版的方式，position 决定定位规则；在弹性布局和网格布局中，还需要掌握主轴、交叉轴、对齐和间距相关取值。

这组属性的参数主要由关键字、长度值、百分比和整数值构成，设置错误时往往会直接导致元素换行异常、重叠、错位或无法居中。

• display 的常见取值包括 block、inline、inline-block、none、flex、inline-flex、grid 和 inline-grid
• position 的常见取值包括 static、relative、absolute、fixed 和 sticky
• top、right、bottom、left 的常见取值包括 auto、px 和 %
• float 的常见取值包括 left、right 和 none
• clear 的常见取值包括 none、left、right 和 both
• z-index 的常见取值包括 auto 和整数值，例如 1、10、999
• flex-direction 的常见取值包括 row、row-reverse、column 和 column-reverse
• justify-content 的常见取值包括 flex-start、center、flex-end、space-between、space-around 和 space-evenly
• align-items 的常见取值包括 stretch、flex-start、center、flex-end 和 baseline
• gap 的常见取值包括 px、rem 和百分比，用于 flex 或 grid 项之间的间距
• grid-template-columns 的常见取值包括固定长度、百分比、repeat 函数和 fr 单位，例如 repeat(3,1fr)

背景边框和视觉效果属性有哪些参数

背景和视觉效果类属性主要决定模块外观，不改变文档结构，但会明显影响页面质感。这里常见的参数类型有颜色值、图片地址、关键字、长度值和阴影组合值。

background 系列属性既可以拆开写，也可以合并写。border-radius、box-shadow、opacity、overflow 则是界面开发中经常直接查询参数的属性。

如果用户想让卡片更有层次、图片更适配容器、内容超出时裁切得更自然，通常就是从这一组属性里找对应参数。

• background-color 的常见取值包括颜色值和 transparent
• background-image 的常见取值包括 none、url(image.jpg) 和 linear-gradient(...)
• background-repeat 的常见取值包括 repeat、no-repeat、repeat-x 和 repeat-y
• background-position 的常见取值包括 left top、center center、50% 50% 和具体长度值
• background-size 的常见取值包括 auto、cover、contain 以及具体尺寸，例如 100% 200px
• border-radius 的常见取值包括单个像素值、多角值和百分比，例如 8px、50%
• box-shadow 的常见参数包括水平偏移、垂直偏移、模糊半径、扩散半径和颜色，例如 0 4px 12px rgba(0,0,0,0.15)
• opacity 的常见取值是 0 到 1 之间的小数，例如 0.5 和 1
• overflow 的常见取值包括 visible、hidden、auto 和 scroll

过渡变换与常见全局参数怎么用

除了基础排版和布局属性，CSS 里还有一组常被问到的参数来自过渡、动画和变换。它们主要用在交互效果中，常见取值包括时间值、函数值、角度值和关键字。

同时，一些全局取值几乎适用于多数属性，理解这些值可以减少很多样式冲突。比如 inherit 表示继承父元素，initial 表示恢复规范默认值，unset 会根据属性是否可继承决定行为。

如果只是想先掌握最常查的内容，可以优先记住 transition、transform、cursor，以及常见全局值的用法。这样在写按钮、卡片、导航和浮层时会更顺手。

• transition 的常见参数包括属性名、持续时间、缓动函数和延迟时间，例如 all 0.3s ease
• transition-timing-function 的常见取值包括 ease、linear、ease-in、ease-out 和 ease-in-out
• transform 的常见函数包括 translate、scale、rotate 和 skew，例如 translateY(-2px)
• cursor 的常见取值包括 default、pointer、text、move 和 not-allowed
• visibility 的常见取值包括 visible、hidden 和 collapse
• inherit 表示继承父元素对应属性的值，适合需要统一文字或颜色时使用
• initial 表示恢复属性的初始默认值，适合清除已有样式影响
• unset 表示可继承属性按 inherit 处理，不可继承属性按 initial 处理

Css样式属性很多，但“参数”真正要看的重点是每个属性能写哪些取值。更直接的记法不是只背属性分类，而是掌握“属性名 + 常见取值类型 + 示例场景”的对应关系，这样在设置文字、间距、布局、背景和交互效果时，才能更快找到正确答案。

《夸克》非常好用的免费AI浏览器

下载APP查看