Language - CSS - 样式

文章摘要： 总结CSS对于HTML标签的属性和参数的整理汇总。本文章的案例将使用“外联样式”的引入方式编写。

提示：建议通过浏览器中自带的的网页关键词搜索来快速定位。

盒子模型（盒子）

提示：只有块级元素才能设置宽度和高度。

宽度和高度

属性名

width：盒子内容区本身宽度
height：盒子内容区本身高度
max-width：盒子最大宽度
max-height：盒子最大高度

参数值

数值px：尺寸大小。
数值%：根据父级元素的百分比大小。
vh：窗口高度，范围（0~100），实时监听
vw：窗口宽度，范围（0~100），实时监听
min-content：元素是其内容的最小值
max-content：元素是其内容的最大值

案例

/* 外联样式*/
div {
 /* 设置宽度*/
 width:100px;
 width:100%;
 width: 20vh;       /*宽度是屏幕高度的20%*/
 width: 20vw;       /*宽度是屏幕宽度的20%*/
 /* 设置高度*/
 height:100px;
 height:100%;
 height: 20vh;      /*高度是屏幕高度的20%*/
 height: 20vw;       /*宽度是屏幕宽度的20%*/
 }

固定宽高比

提示：兼容性一般，谨慎使用。

属性名

aspect-ratio：设置一个块级元素的宽高比，实现动态改变大小但不改变比例。

参数值

宽 / 高：直接写数字。

案例

/* 外联样式*/
div {
  aspect-ratio: 4 / 3;
}

外边距、边距、内边距

属性名

margin 外边距四条边
margin-top 顶部边距
margin-bottom 底部边距
margin-left 左边边距
margin-right 右边边距外边距
--- ---
border 边距四条边
border-top 顶部边距
border-bottom 底部边距
border-left 左边边距
border-right 右边边距边框
--- ---
padding 内边距四条边
padding-top 顶部边距
padding-bottom 底部边距
padding-left 左边边距
padding-right 右边边距内边距
--- ---


`margin` 外边距四条边 `margin-top` 顶部边距 `margin-bottom` 底部边距 `margin-left` 左边边距 `margin-right` 右边边距	外边距
---	---
`border` 边距四条边 `border-top` 顶部边距 `border-bottom` 底部边距 `border-left` 左边边距 `border-right` 右边边距	边框
---	---
`padding` 内边距四条边 `padding-top` 顶部边距 `padding-bottom` 底部边距 `padding-left` 左边边距 `padding-right` 右边边距	内边距
---	---

参数值

auto：设置浏览器边距
数值%：使用百分比的边距
数值px 数值px 数值px 数值px：分别表示上右下左
数值px 数值px 数值px：分别表示上左右下
数值px 数值px：分别表示上下左右
数值px：表示上右下左

案例

/* 外联样式*/
div {
  /*设置浏览器边距*/
  padding: auto;

 /* 设置内边距*/
 padding: 10px 10px 10px 10px; /*上  右  下  左*/
 padding: 10px 10px 10px; /*上  左右  下*/
 padding: 10px 10px; /*上下  左右*/
 padding: 10px; /*上右下左*/

 padding-top: 20px; /*顶部内边框的边距*/
 padding-top: 10%; /*通过百分号来控制*/
 }

边框样式

属性名

border-style：指定四条边样式
border-top-style：顶边样式
border-left-style：左边样式
border-bottom-style：底边样式
border-right-style：右边样式

参数值

none：无边框
hidden：隐藏边框，与none类似，但用于解决边框冲突
dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：凹槽边框，效果取决于边框颜色
ridge：凸槽边框，效果取决于边框颜色
inset：内嵌边框，效果取决于边框颜色
outset：外凸边框，效果取决于边框颜色

案例

style {
  /*上  右  下  左*/
  /*上  左右  下*/
  /*上下  左右*/
  /*上右下左*/
  /*样式可以应用于元素的四条边，也可以分别应用于每条边*/
  border-style: solid dotted dashed double;
  /*修改单个边*/
  border-top-style: solid;
}

内减模式

不需要手动减法，不会再撑大盒子模型尺寸
box-sizing: border-box;

边框颜色

属性名

border-color：边框的颜色。

参数值

name：指定颜色的名称，如 red
RGB：指定 RGB 值, 如 rgb(255,0,0)
Hex：指定16进制值, 如 #ff0000

案例

style {
  border-color: orange;
}

圆角

属性名

border-radius：设置元素的外边框的圆角。

参数值

数值px
数值%

案例

style {
  /*宽高的一半/50%*/
  border-radius: 50%;
  /*左上角、右上角、右下角、左下角*/
  border-radius: 20px 20px 20px 20px;
  /*左上角、[右上、左下角]、右下角*/
  border-radius: 10px 20px 50px;
  /*[左上、右下角]、[右上、左下角]*/
  border-radius: 10px 50px;
}

阴影

属性名

box-shadow：给元素设置阴影效果

参数值

x轴偏移量 y轴偏移量模糊半径扩散半径颜色 [内外阴影]
内外阴影参数可选：默认外阴影，设置inset内阴影。

案例

style {
  box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
}

透明度

属性名

opacity：设置整个元素的透明度（包含背景和内容）。

参数值

0：完全透明（元素不可见）
1：不透明
0~1之间的小数：半透明

案例

style {
  box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
}

盒子的模式/布局转换

“隐藏模式、内行模式、块级模式、行内块级模式”,“弹性布局、网格布局”的转换。
更多：table表格布局

属性名

display

参数值

none：隐藏模式。
inline：行内模式。
block：块级模式。
inline-block：行内块级模式。
flex：弹性布局。（一个维度上的布局）
grid：网格布局。（两个维度上的布局）

案例

style {
  /*隐藏元素且不会占用任何空间的布局*/
  display: none;

  /*行内布局*/
  display: inline;

  /*块级布局*/
  display: block;

  /*行内块级布局*/
  display: inline-block;

  /**弹性布局
  - 能够调整其子元素的宽度和高度，以适应不同的屏幕大小和设备。
  **/
  display: flex;

  /*网格布局*/
  display: grid;
}

定位（盒子）

定位类型

属性名

position

参数值

static：（默认定位）遵循正常的文档流对象。
relative：（相对定位）相对于元素自身原本位置的偏移量，没有脱离文档流（即仍然占用空间）。
absolute：（绝对定位）元素自身相对于 “（相对定位）父级元素” 的偏移量，有脱离文本流（即不占用空间）。
fixed：（固定定位）元素自身相对于浏览器窗口进行定位，有脱离文本流（即不占用空间）。
sticky：（粘性定位）元素自身一开始处于 “相对定位”，当页面滚动超出目标区域时，将切换为 “固定定位” 固定在一个位置。

案例

/* 外联样式*/
div {
  position: absolute;
 }

定位/偏移位置

属性名

top：顶部
left：左边
bottom：底部
right：右边

参数值

auto：（默认值）通过浏览器计算底部的位置。
数值px：具体大小
百分比%：百分比

案例

/* 外联样式*/
div {
  top: 5%;
 }

裁剪绝对定位的元素

属性名

clip

参数值

rect (数值, 数值, 数值, 数值)：设置元素的形状。
auto：（默认值）不应用任何剪裁。

案例

/* 外联样式*/
div {
  clip: rect(0px,60px,200px,0px);
}

浮动（盒子）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

限制元素周围的浮动

属性名

clear：限制当前元素周围的其他元素浮动

参数值

left：在左侧不允许浮动元素。
right：在右侧不允许浮动元素。
both：在左右两侧均不允许浮动元素。
none：（默认值）允许浮动元素出现在两侧。

案例

/* 外联样式*/
div {
  clear: left;
}

指定元素自身的浮动

属性名

float：指定当前元素自身的浮动方向。

参数值

left：元素向左浮动。
right：元素向右浮动。
none：（默认值）元素不浮动，并会显示在其在文本中出现的位置。

案例

/* 外联样式*/
div {
  float: right;
}

堆叠层级（盒子）

属性名

z-index：设置定位元素的层级顺序，改变定位元素的显示顺序。

参数值

auto：（默认）堆叠顺序与父元素相等。
数值：设置元素的堆叠顺序。

案例

/* 外联样式*/
div {
  /*将元素的堆叠顺序放在最底层*/
  z-index:-1;
}

元素溢出（盒子）

处理元素溢出

属性名

overflow：控制溢出元素的内容的显示方式。

参数值

visible：（默认值）内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且隐藏多于内容。
scroll：内容会被修剪，并且显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则会显示滚动条以便查看其余的内容。

案例

/* 外联样式*/
div {
  overflow: scroll;
}

处理边缘溢出

属性名

overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域

参数值

visible：不裁剪内容，可能会显示在内容框之外。
hidden：裁剪内容 - 不提供滚动机制。
scroll：裁剪内容 - 提供滚动机制。
auto：如果溢出框，则应该提供滚动机制。
no-display：如果内容不适合内容框，则删除整个框。
no-content：如果内容不适合内容框，则隐藏整个内容。

案例

/* 外联样式*/
div {
  /*指定如何处理顶部/底部边缘的内容溢出元素的内容区域*/
  overflow-y: scroll;
  /*指定如何处理右边/左边边缘的内容溢出元素的内容区域*/
  overflow-x: scroll;
}

`flex`弹性布局（盒子）

提示：必须先将元素的“父级元素”改为flex弹性布局。

主轴对齐`justify-content`

属性名

justify-content：水平对齐。（给父级容器设置）

参数值

flex-start：（默认值）水平左对齐。
flex-end：水平右对齐。
center：水平居中。
space-between：水平均匀分布，两端边缘对齐，“元素之间”的间隔相同。
space-around：水平均匀分布，“元素之间”是“两端边缘”的2倍间距。
space-evenly：水平均匀分布，“元素之间”与“两端边缘”的间距相同。

案例

/* 外联样式*/
div {
  justify-content: space-between;
 }

侧轴对齐`align-items`

当前弹性容器内所有弹性盒子的侧轴对齐方式。
当元素很多时，为了排在一行内，将会对元素尺寸进行拉伸。

属性名

align-items：垂直方向对齐方式。（给父级容器设置）

参数值

stretch：（默认值）水平两端对齐。弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）（前提是没有设置高度）
flex-start：垂直顶部对齐。
flex-end：垂直底部对齐。
center：垂直居中。

案例

/* 外联样式*/
div {
  align-items: center;
 }

轴向反转`flex-direction`

主轴默认在水平方向，侧轴默认在垂直方向。

属性名

flex-direction：水平、垂直方向互相转换。（给父级容器设置）

参数值

row：（默认）水平方向，从左向右。
column：垂直方向，从上向下。
row-reverse：水平方向，从右向左。
column-reverse：垂直方向，从下向上。

案例

/* 外联样式*/
div {
  flex-direction: column;
 }

是否允许换行`flex-wrap`

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名

flex-wrap：空间不够时是否换行。（给父级容器设置）

参数值

wrap：换行
nowrap：（默认）不换行

案例

/* 外联样式*/
div {
  flex-wrap: wrap;
 }

行对齐`align-content`

属性名

align-content：（给父级容器设置）

参数值

flex-start：（默认）弹性盒子从起点开始依次排列。
flex-end：弹性盒子从终点开始依次排列。
center：弹性盒子沿主轴居中排列。
space-between：弹性盒子沿主轴均匀排列，空白间距分在弹性盒子之间。
space-around：弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧。
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。

案例

/* 外联样式*/
div {
  align-content: center;
 }

调整单个侧轴对齐的弹性盒子`align-self`

单独控制某一个弹性盒子的侧轴对齐方式。
在父级是flex弹性布局的情况下，单独设置父级下的子级元素对齐方式。

属性名

align-self：对当前单个元素进行设置对齐方式。（给弹性盒子设置）

参数值

auto：（默认）继承容器的 align-items 属性。
flex-start：顶部位置对齐。
flex-end：底部位置对齐。
center：居中位置。
baseline: flex 项将根据它们的基线对齐。基线通常是文本的底部，但也可以是 flex 项中最高文本行的基线。
stretch: flex 项将拉伸以填充容器。注意，这种对齐方式只有在 flex 项未设置高度时才会生效。

弹性伸缩比`flex`

属性名

flex：控制弹性盒子的主轴方向的尺寸。（给弹性盒子设置）

参数值

整数数字，表示占用父级剩余尺寸的份数。

案例

/* 外联样式*/
div {
  /*代表根据有几个弹性盒子，进行等分，写1代表盒子数量对容器宽度等分后的1份的宽度*/
  flex: 1;
  
  /*防止display: flex;的子元素受到拉伸*/
  flex-grow: 0;  /*元素不会伸展*/
  flex-shrink: 0; /*子元素不会收缩*/
 }

`grid`网格布局（盒子）

提示：必须先将元素的“父级元素”改为grid网格布局。

设置列宽和行高

属性名

（给父级容器设置）
grid-template-columns：指定每列的列宽。
grid-template-rows：指定每行的行高。

参数值

支持px、%等。
fr：单位fr，代表等分。

案例

/* 外联样式*/
div {
  /*写法一*/
  grid-template-columns: 1fr 1fr 1fr;  /*3列，每列宽度相等*/
  grid-template-rows:  1fr 1fr 1fr;    /*3行，每行高度相等*/

  /*写法二*/
  grid-template-columns: repeat(3, 1fr); /*3列，每列宽度相等*/
  grid-template-rows: repeat(3, 1fr);    /*3行，每行高度相等*/
 }

行列边距

属性名

（给网格盒子设置）
gap：设置网格之间的边距。

参数值

px、%等，具体的大小。

案例

/* 外联样式*/
div {
  gap: 10px;  /*设置网格之间的边距是10px*/
 }

合并网格

属性名

（给网格盒子设置）
grid-column：跨列，横向合并网格。
grid-row: 跨行，纵向合并网格。

参数值

<起始线条> / <结束线条>：合并之间的线条，等于合并之间的网格。

案例

/* 外联样式*/
div {
  grid-column: 1 / 3; /*跨列，横向方向上合并两个格子*/
  grid-row: 1 / 3：   /*跨行，纵向方向上合并两个格子*/
 }

遮罩/蒙版属性

控制元素的透明度、亮度，从而实现部分被遮罩的效果。
参考文章

遮罩图像

属性名

mask-image：指定要用作遮罩的图像。

参数值

none：没有遮罩图像。
url('<图片路径或URL>')：将图片作为遮罩元素。
url(<html元素>)：通过元素选择器选择html元素作为遮罩。

遮罩模式

属性名

mask-mode：定义多个图像遮罩层的混合模式。

参数值

alpha黑白图、luminance基于亮度、match-source

遮罩重复方式

属性名

mask-repeat：控制遮罩图像的重复方式。

参数值

repeat-x水平平铺、repeat-y垂直平铺、repeat水平垂直平铺、no-repeat不平铺、space会发生裁剪、round不会发生裁剪

遮罩位置

属性名

mask-position：定义遮罩图像的位置

参数值

top、bottom、left、right、center

裁剪区域

属性名

mask-clip：遮罩的裁剪方式。

参数值

content-box、padding-box、border-box、fill-box、stroke-box、view-box、no-clip

定位原点

属性名

mask-origin

参数值

==待完善==

遮罩大小

*属性名

mask-size：遮罩图像的尺寸。

参数值

auto、cover、contain

遮罩的起点

属性名

mask-origin

参数值

==待完善==

复合遮罩（布尔运算）

属性名

mask-composite

参数值

add相加、subtract相减、intersect相交、exclude排除

过度属性

属性名

transition：可以为一个元素在不同状态之间切换的时候添加过度效果。

参数值

过度的属性花费的时间(s)
过度属性的可选值：具体的css属性、all（所有属性都产生过度效果）

案例

/* 外联样式*/
div {
  transition: all 1s;
}

平面/空间转换属性

平面转换又称2D转换，改变盒子在平面内的形态（位移、旋转、缩放、倾斜）。
空间转换又称3D转换，为元素添加透视效果。
为元素添加动态效果，一般与“过度属性”配合使用。

属性名

transform
参数值
translate(<x轴移动距离>, <y轴移动距离>)：位移，取值（像素单位数值、百分比<按盒子自身尺寸>、支持负数）。
translate3d(<x轴移动距离>, <y轴移动距离>, <z轴移动距离>)：位移，取值（像素单位数值、百分比<按盒子自身尺寸>、支持负数）。
translateX(<x轴移动距离>)：x轴位移。
translateY(<y轴移动距离>)：y轴位移。
translateY(<z轴移动距离>)：z轴位移。
rotate(<旋转角度>)：旋转，角度单位是deg，取值（正数是顺时针旋转、负数是逆时针旋转）。
scale(缩放倍数)：等比缩放，取值大于1表示放大，小于1表示缩小。
scale(<x轴缩放倍数>, <y轴缩放倍数>)：取值是数字。
skew(<倾斜角度>)：倾斜，角度单位是deg，取值（正数是顺时针旋转、负数是逆时针旋转）。

案例

/* 外联样式*/
div {
  /*位移*/
  transform: translate(500px, 500px); /*移动到指定的位置*/
  transform: translateX(500%); /*向右移动5个自身单位大小*/
  /*旋转*/
  transform: rotate(360deg);
  /*位移 + 旋转*/
  transform: translateX(600px) rotate(360deg);
  /*缩放*/
  transform: scale(2);

}

平面转换 - 改变转换原点

属性名

transform-origin：转换原点默认是盒子中心点。

参数值

<水平原点位置> <垂直原点位置>：取值可以是（方位名词、像素单位数值、百分比）
方位名词取值：top顶部、left左边、bottom底部、right右边、center中心
数值取值：100px。
百分比取值：100%。

案例

/* 外联样式*/
div {
  /*设置原点位置*/
  transform-origin: right bottom;
  transform-origin: 0px 0px;

}

动画属性

animation
@keyframes：动画帧

光标属性（实例）

属性名

cursor：显示光标移动到指定的类型。

参数值

url：需使用的自定义光标的 URL。（注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。）
default：默认光标（通常是一个箭头）
auto：（默认）浏览器设置的光标。
crosshair：光标呈现为十字线。
pointer：光标呈现为指示链接的指针（一只手）
move：此光标指示某对象可被移动。
e-resize：此光标指示矩形框的边缘可被向右（东）移动。
ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize：此光标指示矩形框的边缘可被向上（北）移动。
se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize：此光标指示矩形框的边缘可被向下移动（南）。
w-resize：此光标指示矩形框的边缘可被向左移动（西）。
text：此光标指示文本。
wait：此光标指示程序正忙（通常是一只表或沙漏）。
help：此光标指示可用的帮助（通常是一个问号或一个气球）。

案例

/* 外联样式*/
div {
  cursor: pointer;
}

轮廓属性（实例）

轮廓颜色

属性名

outline-color

参数值

invert：（默认）执行颜色反转（逆向的颜色）,可使轮廓在不同的背景颜色中都是可见。
name：指定颜色的名称，如 red
RGB：指定 RGB 值, 如 rgb(255,0,0)
Hex：指定16进制值, 如 #ff0000

案例

style {
  outline-color: orange;
}

轮廓样式

属性名

outline-style

参数值

none：无边框
hidden：隐藏边框，与none类似，但用于解决边框冲突
dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：凹槽边框，效果取决于边框颜色
ridge：凸槽边框，效果取决于边框颜色
inset：内嵌边框，效果取决于边框颜色
outset：外凸边框，效果取决于边框颜色

案例

style {
  outline-style: solid;
}

轮廓宽度

属性名

outline-width

参数值

thin：规定细轮廓。
medium：（默认）规定中等的轮廓。
thick：规定粗的轮廓。
length：允许您规定轮廓粗细的值。

案例

style {
  outline-width: thin;
}

文本属性（实例）

文本书写方向

属性名

direction

参数值

ltr：（默认）从左往右。
rtl：从右往左。

案例

style {
 direction:ltr;
}

文本水平对齐

属性名

text-align：水平方向上进行对齐。

参数值

left：（默认）左对齐。
right：右对齐。
center：居中对齐。
justify：两端对齐。

案例

style {
    text-align: center;
}

文本垂直对齐

属性名

vertical-align：垂直方向上进行对齐。

参数值

baseline：（默认）基线对齐。
top：顶部对齐。
middle：居中对齐。
bottom：底部对齐。

案例

style {
    vertical-align: middle;
}

文本行高

属性名

line-height

参数值

normal：（默认）设置合理的行间距。
整数：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
数值px：设置固定的行间距。
数值%：基于当前字体尺寸的百分比行间距。

案例

style {
    line-height: 2;
    line-height: 10px;
    line-height: 10%;
}

文本间距

属性名

letter-spacing

参数值

normal：（默认）规定字符间没有额外的空间。
数值px：指定字符间的固定间距。（允许为负值）

案例

style {
 letter-spacing:100px;
}

文本字间距

属性名

word-spacing

参数值

normal：（默认）定义单词间的标准空间。
数值px：设置固定的字间距。（允许是负数）

案例

style {
  word-spacing:30px;
}

文本修饰线

属性名

text-decoration

参数值

none：（默认）定义标准的文本。
underline：文本下边添加一条线。
overline：文本上边添加一条线。
line-through：文本中间添加一条线。
blink：定义闪烁的文本。

案例

style {
    text-decoration: none;                 /*没有文本装饰*/
    text-decoration: underline red;        /*红色下划线*/
    text-decoration: underline wavy red;   /*红色波浪形下划线*/
    text-decoration: underline overline;   /*同时添加上面和下面的线*/
}

缩进文本首行

属性名

text-indent

参数值

数值px：固定数值的缩进。
数值%：基于父极元素宽度百分比的缩进。

案例

style {
    text-indent: 100px;
}

控制字母大小写

属性名

text-transform

参数值

none：（默认）定义带有小写字母和大写字母的标准的文本。
capitalize：文本中的每个单词以大写字母开头。
uppercase：将英文全部转换为大写字母。
lowercase：将英文全部转换为小写字母。

案例

style {
    text-transform: lowercase;
}

文本颜色

属性名

color

参数值

十六进制：例如#ff0000
RGB：例如rgb(255,0,0)
RGBA：带透明度的颜色值，例如rgb(255,0,0，0.5)，透明度取值范围是（0~1）。
颜色名称：例如red红色、gray灰色、black黑色、white白色、purple紫色

案例

style {
 /*方式一*/
 color:#ff0000;
 /*方式二*/
 color:rgb(255,0,255);
  /*方式三，透明度取值范围是（0~1）*/
 color:rgb(255,0,255,0.5);
 /*方式四*/
 color:yellow;
}

文本阴影

属性名

text-shadow

参数值

h-shadow：（必需）水平阴影的位置，允许负值。
v-shadow：（必需）垂直阴影的位置，允许负值。
blur：（可选）模糊的距离。
color：（可选）阴影的颜色。参阅 CSS 颜色值。

案例

style {
    text-shadow: 2px 2px 4px #000000;
}

超出部分显示省略号

属性名

text-overflow

参数值

ellipsis：超出部分显示省略号。

案例

style {
    text-overflow: ellipsis;
}

字体属性（实例）

字体系列

属性名

font-family

参数值

指定的系列名称，具体字体的名称，
允许通过,逗号添加多个字体。

案例

style {
  font-family: "微软雅黑";
}

固定的绝对大小值：xx-smallXX小、x-smallX小、small小、medium中等、large大、x-largeX大、xx-largeXX大
smaller：比父元素更小的尺寸。
larger：比父元素更大的尺寸。
length：固定的值。
数值%：基于父元素大小的百分比值。
数值vh：根据屏幕高度变化。
数值vw：根据平面宽度变化。

案例

style {
  /* <absolute-size>，绝对大小值 */
  font-size: xx-small;
  font-size: x-small;
  font-size: small;
  font-size: medium;
  font-size: large;
  font-size: x-large;
  font-size: xx-large;
  
  /* <relative-size>，相对大小值 */
  font-size: larger;
  font-size: smaller;
  
  /* <length>，长度值 */
  font-size: 12px;
  
  /* <percentage>，百分比值 */
  font-size: 80%;
  
   /* 根据屏幕高度，即屏幕高度的一半 */
  font-size: 50vh;
}

字体斜体

属性名

font-style

*参数值

normal：（默认值）浏览器显示一个标准的字体样式。
italic：斜体的字体样式。
oblique：倾斜的字体样式。

案例

style {
  font-style: italic;
}

字体粗细

属性名

font-weight

参数值

normal：默认值。定义标准的字符。
bold：定义粗体字符。
bolder：定义更粗的字符。
lighter：定义更细的字符。
数值

案例

style {
  font-weight: bold;
  font-weight: 900;
}

设置元素中空白的处理方式

属性名

white-space

参数值

normal：（换行）（默认）忽略换行符、制表符、行尾空格，当遇到边界自动换行。
nowrap：（不换行）忽略换行符、制表符、行尾空格、遇到边界不会换行，直到遇到<br>标签为止。
pre：保留换行符、制表符、行尾空格、文字换行，与HTML中的<pre>标签一致。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符。
break-spaces：

案例

style {
 white-space: normal;
 white-space: nowrap;
 white-space: pre;
 white-space: pre-wrap;
 white-space: pre-line;
 white-space: break-spaces;
}

以小型大写字体或者正常字体显示文本

设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

属性名

font-variant

参数值

normal：（默认值）浏览器会显示一个标准的字体。
small-caps：浏览器会显示小型大写字母的字体。

案例

style {
  font-variant:small-caps;
}

背景属性（实例）

背景颜色

属性名

background-color

参数值

十六进制：例如#ff0000
RGB ：例如rgb(255,0,0)
颜色名称：例如red红色、gray灰色、black黑色、white白色、purple紫色

案例

style {
 /*方式一*/
 background-color:#ff0000;
 /*方式二*/
 background-color:rgb(255,0,255);
 /*方式三*/
 background-color:yellow;
}

背景图片/渐变颜色

属性名

background-image

参数值

url(<图片文件>)：本地文件路径/网络URL地址。
linear-gradient(<渐变方向>, <颜色1> <终点位置>, <颜色2> <终点位置>....)：线性渐变，渐变方向（取值方位名词、角度）、终点位置（取值百分比）。（渐变方向和终点位置可选）
linear-gradient(<半径> at <圆心位置>, <颜色1> <终点位置>, <颜色2> <终点位置>....)

案例

style {
  /*图片背景*/
 background-image: url("./图片.png");
  /*线性渐变背景*/
  background-image: linear-gradient(
    45deg, red 65%, blue
  );
    background-image: linear-gradient(
    transparent, rgba(0,0,0,0.5)
  );
}

背景图片平铺方式

属性名

background-repeat

参数值

no-repeat：不进行平铺。
repeat-x：水平方向平铺。
repeat-y：垂直方向平铺。
repeat：（默认）平铺。

案例

style {
 background-repeat:no-repeat;
}

背景图片位置

属性名

background-position：设置图片的偏移位置。

参数值

center：居中。
left：左边。
right：右边。
top：顶部。
bottom：底部。
x% y%：0%代表左，50%代表居中，100%代表右。
数值px 数值px：支持负数。

案例

style {
 /* 方法一*/
 background-position:left;
 /* 方法二*/
 background-position:0% 50%;
 /* 方法三*/
 background-position:left top;
}

背景图片缩放

属性名

background-size

参数值

cover：等比缩放，以完全覆盖背景区，允许图片超出范围。
contain：等比缩放，以完全装入背景区，图片适应背景区的最大尺寸，允许不全部覆盖背景区。
x% y%：根据盒子尺寸计算图片大小。
数字+单位：

案例

style {
 background-size:scroll;
}

背景图片固定

属性名

background-attachment

参数值

scroll：（默认）背景图片随着页面的滚动而滚动。
fixed：背景图片不会随着页面的滚动而滚动。
local：背景图片会随着元素内容的滚动而滚动。

案例

style {
 background-attachment:scroll;
}

列表属性（实例）

将图像设置为列表项标志

属性名

list-style-image

参数值

URL：图像的路径。
none：（默认）无图形被显示。

案例

style {
  list-style-image: url('./image.jpg');
}

列表项标志的位置

属性名

list-style-position

参数值

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：（默认值）保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

案例

style {
  list-style-position: outside;
}

列表项标志的类型

属性名

list-style-type

参数值

none：无标记
disc：（默认）实心圆
circle：空心圆
square：实心方块
decimal：阿拉伯数字
decimal-leading-zero：0开头的数字标记（01, 02, 03）
lower-roman：小写罗马数字（i, ii, iii, iv, v）
upper-roman：大写罗马数字（I, II, III, IV, V）
lower-alpha：小写英文字母The marker is lower-alpha（a, b, c, d, e）
upper-alpha：大写英文字母The marker is upper-alpha（A, B, C, D, E）
lower-greek：小写希腊字母（alpha, beta, gamma）
lower-latin：小写拉丁字母（a, b, c, d, e）
upper-latin：大写拉丁字母（A, B, C, D, E）
hebrew：传统的希伯来编号方式
armenian：统的亚美尼亚编号方式
georgian：传统的乔治亚编号方式（an, ban, gan）
cjk-ideographic：简单的表意数字
hiragana：日文平假名字符（a, i, u, e, o, ka, ki）
katakana：日文片假名字符（A, I, U, E, O, KA, KI）
hiragana-iroha：日文平假名序号（i, ro, ha, ni, ho, he, to）
katakana-iroha：日文片假名序号（I, RO, HA, NI, HO, HE, TO）

案例

style {
  list-style-type: disc;
}

图片属性（实例）

实现图片居中 + 等比 + 填满父级元素

案例

#img {
    max-width: none; /* 允许图片超出其原始尺寸 */
    max-height: none; /* 允许图片超出其原始尺寸 */
    width: 100%; /* 图片宽度设置为父元素的100% */
    height: 100%; /* 图片高度设置为父元素的100% */
    object-fit: cover;
}

==待完善==

表格属性（实例）

更多属性和参数，请参考“盒子模型属性”。

折叠边框

用于控制表格边框是分开的还是合并的。
属性名
border-collapse
参数值
collapse：边框合并
separate：边框分开（默认值）

表格边距

同时控制多个表格之间的边距。
属性名
border-spacing
参数值
待完善