格式

注释

/* 这是个注释 */

选择器

基本选择器

类型 命令 说明
【元素】选择器 元素名 选择是此类型的元素
【id】选择器 #<id值> 选择具有此id属性值的元素
【类】选择器 .<class值> 选择具有此clss属性值的元素
【通配】选择器 * 选择所有元素

复合选择器

类型 命令 说明
【交集】选择器 <选择器1><选择器2><选择器3> 选择不同选择器可以同时匹配到的同一元素
【并集】选择器 <选择器1>,<选择器2>,<选择器3> 选择不同选择器匹配的不同元素

关系选择器

类型 命令 说明
【子】选择器 <选择器1> > <选择器2> 选择 选择器1 匹配的元素，其子元素中是由 选择器2 匹配的元素
【后代】选择器 <选择器1> <选择器2> 选择 选择器1 匹配的元素，后代元素中是由 选择器2 匹配的元素
【兄弟】选择器 <选择器1>+<选择器2> 选择 选择器1 匹配的元素，后面紧跟的是由 选择器2 匹配的元素

属性选择器

命令 说明
[属性名] 选择具有此属性的元素
[属性名=值] 选择具有此属性，并且属性值为指定值的元素
[属性名^=值] 选择具有此属性，并且属性值为指定值开头的元素
[属性名$=值] 选择具有此属性，并且属性值为指定值结尾的元素
[属性名*=值] 选择具有此属性，并且属性值中含有指定值的元素

伪类选择器

为匹配到的元素，添加某些条件，为达到条件的匹配元素添加特定样式

类型 命令 说明
第一个子元素 <选择器1>:first-child 选择 选择器1 匹配的元素，并且是其父元素的 第一个子元素
最后一个子元素 <选择器1>:last-child 选择 选择器1 匹配的元素，并且是其父元素的 最后一个子元素
第n个子元素 <选择器1>:nth-child(n) 选择 选择器1 匹配的元素，并且是其父元素的 第n个子元素
倒数第n个子元素 <选择器1>:nth-last-child(n) 选择 选择器1 匹配的元素，并且是其父元素的 倒数第n个子元素
偶数位元素 <选择器1>:nth-child(even[2n]) 选择 选择器1 匹配的元素，并且是其父元素的 偶数位的元素
奇数位元素 <选择器1>:nth-child(odd[2n+1]) 选择 选择器1 匹配的元素，并且是其父元素的 奇数位的元素
第一个匹配到的元素 <选择器1>:first-of-type 选择 选择器1 匹配的元素，并且是其父元素下 第一个匹配到的元素
最后一个匹配到的元素 <选择器1>:last-of-type 选择 选择器1 匹配的元素，并且是其父元素下 最后一个匹配到的元素
第n个匹配到的元素 <选择器1>:nth-of-type(n) 选择 选择器1 匹配的元素，并且是其父元素下 第n个匹配到的元素
倒数第n个匹配到的元素 <选择器1>:nth-last-of-type(n) 选择 选择器1 匹配的元素，并且是其父元素下 倒数第n个匹配到的元素
唯一匹配的元素 <选择器1>:only-of-type 选择 选择器1 匹配的元素，并且是其父元素下 匹配到的唯一元素
唯一子元素 <选择器1>:only-child 选择 选择器1 匹配的元素，并且是其父元素下 唯一的子元素
相反匹配 :not(<选择器2>) 选择 选择器2 没匹配到的元素
未访问过的a标签 :link 未访问过的a标签（只适用于a标签）
已访问过的a标签 :visited 已访问过的a标签（只适用于a标签）（只能改颜色）
鼠标移入 :hover 选择鼠标移入的元素
鼠标点击 :active 选择鼠标点击的元素
获取焦点元素 :focus 选择获取焦点的元素
没有子元素 :empty 选择没有子元素的元素
禁用元素 :disabled 选择所有禁用的表单元素
锚点元素 :target 选择当前活动锚点的元素
无效元素 :invalid 选择表单元素中的值是非法时的元素

伪元素选择器

为元素的特定内容进行操作

类型 命令 说明
第一个字符 <选择器1>::first-letter 选择 选择器1 匹配到的元素内容的 第一个汉字或字母
第一行字符 <选择器1>::first-line 选择 选择器1 匹配到的元素内容的 第1行字符
（只对块级作用域有效，自动换行只选第一行）
选中字符 <选择器1>::selection 选择 选择器1 匹配到的元素，其被选中的内容
开始 <选择器1>::before 选择 选择器1 匹配到的元素的开始处
（结合content属性使用）（添加的内容无法被选中）
结束 <选择器1>::after 选择 选择器1 匹配到的元素的结束处
（结合content属性使用）（添加的内容无法被选中）

长度单位

相对长度单位

单位 说明
em 相对于当前元素字体大小的长度单位，没有的话继承父级元素字体大小
（如：font-size:12px; 那么 1em == 12px）
rem 相对于根元素<html>字体大小的长度单位
（如：font-size:12px; 那么 1em == 12px）
ex 相对于所用字体中小写英文字母 x 的高度，若无法确定 x 的高度则使用 0.5em 计算
ch 相对于所用字体中数字 0 的高度，若无法确定 0 的高度则使用 0.5em 计算
vw 相对于浏览器窗口的宽度，1vw = 窗口宽度的 1%
vh 相对于浏览器窗口的高度，1vh = 窗口高度的 1%
vmin 选择vw和vh中较小的一个作为单位
vmax 选择vw和vh中较大的一个作为单位
% 根据父元素或字体大小的百分比

详细说明

单位 相对于 说明
% 相对于父元素 width / height 属性的值
静态（ static ）定位的 top/right/bottom/left 属性值
相对（ relative ）定位的 top/right/bottom/left 属性值
相对于指定元素 绝对（ absolute ）定位的 top/right/bottom/left 属性值
固定（ fixed ）定位的 top/right/bottom/left 属性值
相对于字体 font-size：根据父元素的font-size 进行计算
line-height：根据font-size进行计算
vertical-align：根据line-height进行计算
text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算
相对于当前元素 translateX() 根据容器的 width 计算
translateY() 根据容器的 height 计算
transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算

绝对长度单位

单位 说明
cm 厘米
mm 毫米
in 英寸（1in = 96px = 2.54cm）
px 像素，是相对于显示器屏幕分辨率而言的（1px = 1/96in）
pt point，是一种专用的印刷单位“磅”，也可以称为“点”（1pt = 1/72in）
pc pica，中文可称为“派卡”，印刷行业用于描述字体大小的单位，相当于我国新四号铅字的尺寸（1pc = 12pt）

盒子

盒子模型

结构

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

类型

块级元素

  1. 独占一行
  2. 按顺序自上而下排列
  3. 可以设置宽高
  4. 可以包含任意类型元素

行内元素（内联元素）

  1. 在一行上排列，默认情况下，它们不会换行
    • <br>：元素强制换行
    • white-space：使用此属性的 pre 或 pre-wrap 来保留文本中的换行符
    • word-wrap 或 overflow-wrap 属性来控制单词换行
  2. 造成行内元素之间不能紧挨
    • 行内元素（包括：行内块级元素、文本）之间，存在，换行符、空格符、制表符等，会合并为一个空白符并占一定宽度（造成行内元素之间不能紧挨）
  3. 不能设置宽高
    1. 高度由字体大小决定
      • 即使内容包含块级元素，其高度依旧按照字体大小决定，不会被撑起
    2. 宽度由内容多少决定
  4. 内容可以是任意类型元素，但是块级（行内块级）元素会造成意外样式
    • 行内块级元素
      • 会影响上下布局，
      • 会纵向超出行内元素，并撑起所在行内元素的父元素和挤动其相邻元素
      • 但是行内元素本身高度不受影响
    • 块级元素
      • 会影响上下布局
      • 块级元素独占一行，会上下分隔行内元素的其他内容
      • 会造成行内元素上下断开，虽然上部分和下部分是同一元素
      • 背景颜色只渲染行内元素和文本的背景
  5. margin
    1. top/bottom 无效
    2. left/right 有效
  6. padding
    1. padding 的改变会造成行内元素大小的改变
    2. padding-left/right：会影响布局
      • 会横向撑起父元素
      • 会横向挤动其他行内元素
    3. padding-top/bottom：不会影响布局
      • 元素本身大小会发生改变，但是：
        • 不会纵向撑起父元素
        • 也不会挤动上下其他元素
        • 会根据层叠样式优先级，在其他元素下方展示被覆盖部分

行内块级元素

  1. 在一行上排列
  2. 可以设置宽高
  3. margin、padding 有效
  4. 行内块级元素（包括：行内元素、文本）之间，存在，换行符、空格符、制表符等，会合并为一个空白符并占一定宽度（造成行内元素之间不能紧挨）

盒子样式

宽高

设置宽高

width
设置元素的宽度
auto 默认值，浏览器自动计算元素的实际宽度
（块级元素：自适应撑满父级元素）
（行内/行内块级：根据元素内容自动撑开）
inherit 从父元素继承 width 属性的值
initial 重置为默认值
unset 如果继承父元素样式，则等同inherit
如果不继承父元素样式，则等同initial
fit-content 取以下两种值中的较大值：
1：min-content
2：max-content 和 父元素内容区域 中较小值
max-content 【根据元素的内容确定大小】内容中最长的一行
min-content 【根据元素的内容确定大小】内容中不可断行的最大单位（连续的字母，汉字，连续数字，有宽度或外边距的元素）
数字+单位 具体数值配合 px、cm 等单位来定义宽度
% 基于父元素宽度百分比的宽度
height
设置元素的高度
auto 默认值，浏览器自动计算元素的实际高度
(根据元素内容自动撑开)
inherit 从父元素继承 height 属性的值
initial 重置为默认值
unset 如果继承父元素样式，则等同inherit
如果不继承父元素样式，则等同initial
fit-content 取以下两种值中的较大值：
1：min-content
2：max-content 和 父元素内容区域 中较小值
max-content 【根据元素的内容确定大小】内容中最长的一列（纵向排列生效）
min-content 【根据元素的内容确定大小】内容中不可断行的最大单位（连续的字母，汉字，连续数字，有宽度或外边距的元素）（纵向排列生效）
数字+单位 具体数值配合 px、cm 等单位来定义宽度
% 基于父元素高度百分比的高度
max-[width/height]
设置元素的最大 宽度/高度
none 默认值，表示对元素的最大宽度或高度没有限制
inherit 从父元素继承 max-width 或 max-height 属性的值
initial 重置为默认值
unset 如果继承父元素样式，则等同inherit
如果不继承父元素样式，则等同initial
fill-available 父元素的内容区域
fit-content 取以下两种值中的较大值：
1：min-content
2：max-content 和 父元素内容区域 中较小值
min-content 【根据元素的内容确定大小】内容中不可断行的最大单位（连续的字母，汉字，连续数字，有宽度或外边距的元素）
【max-height：纵向排列生效】
max-content 【根据元素的内容确定大小】内容中最长的一行（若父元素内容区域小于最长一行，则不超出父元素内容区域）
【max-height：纵向排列生效】
数字+单位 具体数值配合 px、cm 等单位来定义宽度
% 定义基于父元素 宽度/高度 百分比的最大宽度或高度
min-[width/height]
设置元素的最小 宽度/高度
auto 【min-width】只针对弹性元素的默认值，弹性元素最小宽度为内容所需要宽度
【min-height】浏览器将通过计算为指定元素选择一个 min-height 值
inherit 从父元素继承 min-width 和 min-height 属性的值
initial 重置为默认值
unset 如果继承父元素样式，则等同inherit
如果不继承父元素样式，则等同initial
fill-available 父元素的内容区域
fit-content 取以下两种值中的较大值：
1：min-content
2：max-content 和 父元素内容区域 中较小值
min-content 【根据元素的内容确定大小】内容中不可断行的最大单位（连续的字母，汉字，连续数字，有宽度或外边距的元素）
【min-height：纵向排列生效】
max-content 【根据元素的内容确定大小】内容中最长的一行
【min-height：纵向排列生效】
数字+单位 具体数值配合 px、cm 等单位来定义宽度
% 定义基于父元素 宽度/高度 百分比的最小宽度或高度

默认计算区域

使用 css【 width/height（max/min）属性】设置元素宽高时，只是设置 内容区域 的宽度和高度
元素的真实宽高 以 content + padding + border 的总和进行计算，因此 默认情况下 width/height 不代表元素宽高
* IE5.X 和 6 是内容、内边距和边框的宽高的总和

修改计算区域

属性 说明 值 说明
box-sizing 改变 width/height （max/min）属性设置元素宽高的计算方式
（默认：width/height （max/min）设置内容区域）		 content-box width/height （max/min）设置的区域（默认值）：content
border-box width/height （max/min）设置的区域：content + padding + border
inherit 从父元素继承

边框

基础边框

属性类型

属性 说明 值 说明
border-style 用来指定边框的样式
dotted 点组成的虚线
dashed 短横线组成的虚线
solid 实线
double 两个边框，边框和中间空隙宽度为 border-width 除以3的平均值，除不尽的值空隙将多1个像素
border-width 用来指定边框的样式 px, pt, cm, em 等 css 长度单位
border-color 用来指定边框的颜色
颜色值 规定可用的颜色值

统一设置

  1. 并不需要遵守固定的顺序，顺序打乱也是可以的
  2. 可以省略其中的某个参数，省略的参数将被设置为该参数的默认值
属性 说明 值 说明
border 统一设置元素所有边框的 样式、宽度、颜色 1px solid black 按照顺序设置 [宽度] [样式] [颜色]

分别设置

属性 说明 值 说明
border-[top/right/bottom/left] 置元素【上/右/下/左】某一边的边框 样式、宽度、颜色 1px solid black 按照顺序设置 [宽度] [样式] [颜色]
属性 说明 值 说明
border-[top/right/bottom/left]-[style/width/color] 设置元素【上/右/下/左】某一边框的【样式、宽度、颜色】中某一种属性 [1px/solid/black] 根据css属性赋相应类型的值

圆角边框

统一设置

属性 说明 值 说明
border-radius 根据传入的值，分别设置各角的弧度 4个值 根据顺序：左上、右上、右下、左下
3个值 根据顺序：左上、右上+左下、左下
2个值 根据顺序：左上+右下、右上+左下
1个值 统一设置4个角

单个设置

属性 说明
border-[top/bottom]-[left/right]-radius 单独设置元素某一个角为圆角

单位与弧度

值单位 说明
除% 直角两边弧度相同
% 根据元素宽高的百分比，分别设置直角两边的弧度

图片边框

统一设置

属性 说明 值
border-image border-image-[source/slice/width/outset/repeat]
五个属性的简写形式，用于进行统一配置		 border-image：source || slice [ / width | / width ? / outset ]? || repeat
  • 简写形式的值
    • 顺序：source slice [/width /outset] repeat
      • source slice repeat 三个属性值必填
      • width outset 可选
    • 第一个 /
      • 用来定义 width
      • / 后面按照 上、右、下、左 顺序分别定义宽度
    • 第二个 /
      • 用来定义 outset
      • / 后面按照 上、右、下、左 顺序分别定义偏移
      • 不定义宽度，但是想定义偏移，width 的 / 必须存在，但是不用定义 width 值，两个//可以紧挨
    • 案例
      • border-image:url(./22.png) 48 /40px 30px 20px 10px /20px 10px 5px 2px round
      • border-image:url(./22.png) 48 / /20px 10px 5px 2px round stretch

分别设置

属性 说明 值 说明
border-image-source 指定图片地址
（如果没有设置边框属性 border-[width/style]，则不会显示边框图像） 		none 默认：没有值
url(...) 图片地址
linear-gradient(...) 自定义的渐变色
border-image-slice 将图片按指定宽度分割成9个区域
（如果没有设置边框属性 border-[width/style]，则不会显示边框图像）
（如果没有定义 border-image-slice，则边框四个角为整个图像）
数字 相对于图片的像素
% 相对于图片宽高的百分比
任何值 + fill 保留边框图像的中间部分
4个值 根据顺序：top、right、bottom、left 顺序进行分割
3个值 根据顺序：top、left+right、bottom 顺序进行分割
2个值 根据顺序：top+bottom、left+right 顺序进行分割
1个值 四个边距根据同一值进行切割
border-image-width 设置分割的边框图片，所放置位置的区域宽度（9个区域）
（从border属性最外侧开始，向元素内部扩展的宽度） 		数字+单位 指定具体宽度
% 根据分割后，各边上图片的宽高百分比设置宽度
数字 该值对应 border-width 的倍数
（例如值为 2，则参数的实际值为 2 * border-width）
auto 默认值：与 border-image-slice 相同的值
4个值 根据顺序：top、right、bottom、left 顺序设置边框各方向的宽度
3个值 根据顺序：top、left+right、bottom 顺序设置边框各方向的宽度
2个值 根据顺序：top+bottom、left+right 顺序设置边框各方向的宽度
1个值 四个边距根据同一值进行设置相同的宽度
border-image-outset 设置边框图像的外侧相对于border外侧，向外偏移扩展的距离
（默认：图像的外侧和border外侧重叠）
（值不能为负数） 		数字+单位 向外扩展的具体距离（不能为负数）
数字 扩展距离根据 border-width 的倍数计算
例如值为 2，则表示偏移量为 2 * border-width（不能为负数）
4个值 根据顺序：top、right、bottom、left 顺序设置边框各方向的偏移距离
3个值 根据顺序：top、left+right、bottom 顺序设置边框各方向的偏移距离
2个值 根据顺序：top+bottom、left+right 顺序设置边框各方向的偏移距离
1个值 四个边框根据同一值进行设置相同的偏移距离
border-image-repeat 分割的图片，在 border-image-width 指定的区域中展示方式
（填充 border-image-width 区域）		 stretch 默认值：将被分割的图像，使用拉伸的方式来填充
repeat 将被分割的图像，使用重复平铺的方式来填充
超出的部分会被截断
round 将被分割的图像，使用重复平铺的方式来填充
根据情况缩放图像，保证所有图像都完整
space 将被分割的图像，使用重复平铺的方式来填充
根据情况用空白间隙填充在图像周围，保证所有图像都完整
2个值 第一个参数将用于水平方向，第二个将用于垂直方向
1个值 水平和垂直方向都应用该值

边距

外边距

统一设置

属性 说明 值 说明
margin 统一设置各方向外边距 数字+单位 任何长度单位
% 基于父元素的宽度百分比
inherit 从父元素继承外边距属性的值
4个值 依据顺序：上、右、下、左 分别设置各方向外边距
3个值 依据顺序：上、右+左、下 分别设置各方向外边距
2个值 依据顺序：上+下、右+左 分别设置各方向外边距
1个值 根据值统一设置各方向外边距

分别设置

属性 说明
margin-[top/right/bottom/left] 设置元素[上/右/下/左]外边距
值 说明
数字+单位 任何长度单位
% 基于父元素的宽度百分比
inherit 从父元素继承外边距属性的值

内边距

统一设置

属性 说明 值 说明
padding 统一设置各方向内边距 数字+单位 任何长度单位
% 基于父元素的宽度百分比
inherit 从父元素继承内边距属性的值
4个值 依据顺序：上、右、下、左 分别设置各方向内边距
3个值 依据顺序：上、右+左、下 分别设置各方向内边距
2个值 依据顺序：上+下、右+左 分别设置各方向内边距
1个值 根据值统一设置各方向内边距

分别设置

属性 说明
padding-[top/right/bottom/left 设置元素[上/右/下/左]内边距
值 说明
数字+单位 任何长度单位
% 基于父元素的宽度百分比
inherit 从父元素继承外边距属性的值

轮廓

轮廓位于边框外围（紧贴着边框）

  • 上下左右四个方向不能单独设置，四个方向的宽度、颜色、样式相同
  • 轮廓不影响布局，会与其他元素重叠
  • 轮廓可以不是矩形，但是不能直接创建圆形轮廓
  • 只设置 outline-width 或 outline-color 属性的话，轮廓的设置并不会生效

简写方式

  • 参数的顺序并不是固定的，可以改变它们的顺序

outline : width style color;

基础属性

outline-style
设置轮廓的样式
none 默认值，没有轮廓
dotted 定义点状的轮廓
dashed 定义虚线轮廓
solid 定义实线轮廓
double 两个边框，边框和中间空隙宽度为 border-width 除以3的平均值，除不尽的值空隙将多1个像素
inherit 从父元素继承轮廓样式的设置
outline-width
设置轮廓的宽度。只有当 outline-style 属性的值不为 none 时，outline-width 属性才会生效
thin 较细的轮廓
medium 默认值，中等宽度的轮廓
thick 较粗的轮廓
数字+单位 使用具体数值加单位（px、em、cm 等）的形式设置轮廓的宽度
inherit 从父元素继承轮廓的宽度
outline-color
设置轮廓的颜色
颜色值 规定可用的颜色值
invert 使用背景色的反色来设置轮廓的颜色
inherit 从父元素继承轮廓颜色的设置
outline-offset
设置轮廓与边框之间的距离，默认情况下轮廓是紧贴着边框的
数字+单位 使用具体数值加单位的形式设置轮廓与边框之间的距离，可以为负值
inherit 从父元素继承 outline-offset 属性的值

阴影

  • 可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推
    1
    2
    3
    box-shadow: 0px 0px 0px 3px #bb0a0a,
                0px 0px 0px 6px #2e56bf,
                0px 0px 0px 9px #ea982e;

box-shadow: x y blur spread color inset;

  1. x
    • 必填参数
    • 设置阴影水平方向的偏移
    • 可以为负值
  2. y
    • 必填参数
    • 设置阴影垂直方向的偏移量
    • 可以为负值
  3. blur
    • 可选参数
    • 设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊
    • 不允许使用负值
  4. spread
    • 可选参数
    • 设置阴影的尺寸
  5. color
    • 可选参数
    • 设置阴影的颜色
  6. inset
    • 可选参数
    • 将默认的外部阴影 (outset) 改为内部阴影

滚动条

  • 内容溢出时设置 overflow 展示方式，可以展示滚动条
  • 滚动条存在于 内边距 和 边框 之间
  • 滚动条的出现不影响 内容 + 内边距 + 边框 + 外边距 整体盒子的大小
    • 元素盒子的整体大小不受影响
    • 与计算元素宽度方式的属性 box-sizing 无关
  • 滚动条的出现只会挤压 内容 区域大小

内容溢出

  • 当元素内容超出 元素内容区域宽高 范围，即为内容溢出
  • 应注意元素宽高默认值 auto 设置得元素范围
  • overflow 用于控制内容溢出时展示方式

属性

  • overflow
    • 同时设置宽高两个方向溢出元素范围的显示效果
  • overflow-x
    • 设置宽度方向溢出元素范围的显示效果
  • overflow-y
    • 设置高度方向溢出元素范围的显示效果

值

  1. visible：默认值。溢出内容不会被隐藏，会呈现在元素框之外。
  2. hidden：溢出得内容会被隐藏
  3. scroll：元素会一直显示滚动条，不管内容是否溢出。
  4. auto：内容溢出则显示滚动条，否则不显示滚动条
  5. inherit：从父元素继承 overflow 属性的值。

显示

文本

字体颜色

color

  1. 十六进制值 - 如: ＃FF0000
  2. 一个RGB值 - 如: RGB(255,0,0)
  3. 颜色的名称 - 如: red

行内内容水平对齐

控制每行

text-align

  • 控制元素每行中的 行内元素、行内块级元素、文本 在当前行的水平方向的位置
  • 如果某行的 行内内容 换行，则控制每一行 行内内容 在水平方向的位置
  1. center：行内内容居中
  2. right：行内内容向右侧边对齐
  3. left：行内内容向左侧边对齐
  4. justify：
    • 行内内容向两侧对齐（即：每行靠近两边的行内内容紧挨两侧，其余行内内容平均分配剩余空间）
    • 对最后一行无效（即：对没有自动换行的行内内容无效）

控制最后一行

text-align-last

  • 只控制元素中最后一行中的 行内元素、行内块级元素、文本 在当前水平行方向的位置
  • 方便控制只有一行的元素内容水平对齐方式
  1. center：最后一行行内内容居中
  2. right：最后一行行内内容向右侧边对齐
  3. left：最后一行行内内容向左侧边对齐
  4. justify：最后一行的行内内容向两侧对齐（即：每行靠近两边的行内内容紧挨两侧，其余行内内容平均分配剩余空间）

行内内容水平排列方向

direction

  • 设置元素中每一行行内内容排列方向
  • 设置元素中每一行行内内容靠近方向（靠左、靠右）
  • 行内内容：区分为 文本 和 非文本
  • 此属性会根据输入文字判断行内内容的排列方向
    • 行内内容的文字及后续所有内容会作为一个整体【文本】，此【文本】的排列是独立的，由文字对应的语言习惯方向决定
    • 【文本】与非文本的排列方向，由属性值决定
      1
      2
      3
      4
      5
      /* html 输入 */
      123 456 a 789 b

      /* 设置了 direction: rtl 属性 */
      [a 789 b] 456 123
  1. rtl：从右向左
    1. 紧挨右侧边框
    2. 并且行内内容也从右向左排列（针对文本和非文本间的排列）
  2. ltr：从左向右
    1. 紧挨左侧边框
    2. 并且行内内容也从左向右排列（针对文本和非文本间的排列）

每个字符间距

letter-spacing

设置每个单词字母或每个汉字之间的间隔距离

  1. normal：默认。规定字符间没有额外的空间。
  2. length：指定长度单位值（允许使用负值）。
  3. inherit：规定应该从父元素继承 letter-spacing 属性的值。

基线

  • 基线（baseline）是指一行文本中字符的底部对齐线
  • 顶线和底线距离表示字体大小
  • 行内元素 行内块级元素 文本 默认都是基线对齐
    • 行内元素 行内块级元素 默认元素底部和基线对齐
    • 文本 小写x底部与基线对齐
  • vertical-align 属性可以设置行内内容的垂直对齐方式。行内内容默认值为 baseline，即基线对齐

文本行高

line-height

  • 用于设置每一行文本的高度
  • 文本行高的范围 参考基线资料
    • 字体大小（顶线-底线） + 上半行距 + 下半行距
    • 其值等于两行基线间的距离
  • 行内元素 设置 line-height 属性：其内部的文本的行高会发生改变，但 不会改变此元素的高度 ，却会挤压影响其父元素和上下相邻元素大小和位置
  • 行内块级元素 、块级元素 设置 line-height 属性：其内部的文本的行高会发生改变，且 会改变此元素的高度
  1. normal：设置合理的行距和默认值。
  2. inherit：规定line-height属性值应由父元素继承。
  3. 数字：设置数字，这个数字会乘以当前字体大小来设置行距。即没有上下行距
  4. 长度：设置固定行距。
  5. %：基于当前字体大小的百分比行距。

文本修饰线

text-decoration：简写属性，同时设置修饰位置，颜色，样式

1
2
3
p {
    text-decoration:line [color] [style] [thickness]
}
  1. line：文本修饰的位置
  2. color：文本修饰的颜色
  3. style：文本修饰的样式
  4. thickness：文本修饰的粗细

text-decoration-line：文本修饰的位置

  1. none：表示没有文本修饰效果
  2. inherit：从父元素继承
  3. underline：在文本的下方有一条修饰线
  4. overline：在文本的上方有一条修饰线
  5. line-through：有一条贯穿文本中间的修饰线

text-decoration-color：文本修饰的颜色**

  • 颜色值

text-decoration-style：文本修饰的样式

  1. solid：画一条实线
  2. double：画一条双实线
  3. dotted：画一条点划线
  4. dashed：画一条虚线
  5. wavy：画一条波浪线

text-decoration-thickness：文本装饰线粗细

  1. auto：由浏览器为文本装饰线选择合适的厚度
  2. from-font：如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值，则效果和设置为 auto 一样，由浏览器选择合适的厚度值
  3. 长度：设置一个长度值

缩进文本首行

text-indent

定义一个块元素首行文本内容之前的缩进

  1. length：固定长度值
  2. **%**：基于父元素宽度的百分比
  3. inherit：从父元素继承

文本阴影

text-shadow

  • 由3个 length 值和一个颜色值配置
  • 3个 length 值分别表示 x偏移、y偏移、模糊度
    • 3个值顺序不能变
    • 可以省略 模糊度
  • 颜色值和3个 length 值的前后位置可以随意
  • 可以同时定义多个文本阴影，之间用逗号(,)隔开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;