2017-03-29

记录一些自己不熟悉的 CSS 属性

最后更新： 2018-01-05

阅读次数：次

许可协议：知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

CSS Text

CSS Text Module Level 4

CSS Text 是一个管理文字表现的 CSS 模块，例如换行、对齐、空格处理、大小写。

letter-spacing： 定义字符间的间距
text-align-last： 定义所在块元素最后一行的内容的对齐方式
text-indent： 定义块元素的首行文本内容之前应该有多少水平空格
- 这个属性经常这样使用：text-indent: 2em; ，意思是首行缩进 2 个中文字符（或 4 个英文字符）
text-transform： 定义英文内容以什么样的方式在页面显示
- capitalize： 每个单词的首字母都变为大写，其他字母大小写不变
- uppercase： 所有字母都变为大写字母
- lowercase： 所有字母都变为小写字母
white-space： 设置处理元素中空白的方式
- normal： 默认值，连续的空白符会被合并，换行符会被当作空白符来处理。填充 line 盒子时会自动换行。
- nowrap： 类似 normal，但是它在填充 line 盒子时不会自动换行
- pre： 连续的空白符会被保留，遇到换行符时会换行，但是在填充 line 盒子时不会自动换行
- pre-wrap： 连续的空白符会被保留。在遇到换行符，或者需要为了填充 line 盒子时会自动换行
- pre-line： 连续的空白符会被合并。在遇到换行符，或者需要为了填充 line 盒子时会自动换行

word-break： 指定了怎样在 单词内断行
- normal： 默认值
- break-all： 对于 non-CJK (中文/日文/韩文) 文本，可在任意字符间断行
- keep-all： CJK 文本不断行。 Non-CJK 文本表现同 normal。
overflow-wrap： 是否允许溢出容器的文本内容进行断行
- normal： 默认值，溢出内容不断行
- break-word： 溢出的内容将被切割后移到下一行，从而达到换行效果

注意区分 word-break 与 overflow-wrap 换行行为的区别

See the Pen how to break word by percy (@percy507) on CodePen.

word-spacing： 定义单词间的间距
text-overflow： 定义如何向用户发出未显示的溢出内容的信号（该属性只能作用于块级元素的溢出，并且要求该块级元素是左右溢出，上下溢出无效）
- ellipsis： 溢出内容标识为省略号
- 也可以自定义溢出内容标识字符

CSS text-overflow: ellipsis; not working?

/* 通常下面 3 个属性一块儿使用，force div contents to stay in one line */
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 但是上面的代码只能作用于单行，对于多行，请参看下面给出的链接 */

Pure CSS for multiline truncation with ellipsis

内容多栏布局

CSS Multi-column Layout Module

CSS Columns 是一种定义了多栏布局的模块，它能够表现出将内容在列之间怎么流动的以及间隙和分割线怎么使用。

column-count： 定义内容应该被划分的列数
column-gap： 设置元素列之间的间隔大小
column-width： 设置每列显示的宽度

CSS 媒体查询 @media

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 800px)" href="pc.css" />

注意，以上 link 标签中引用的 css 文件总是会被下载，但只有当 media 为 true 时才会被应用。

<!-- 样式表中的CSS媒体查询 -->
<style>
  @media (max-width: 600px) {
    .facet_sidebar {
      display: none;
    }
  }
</style>

以下是一些常用的媒体特性
- width： 视口（viewport）的宽度（min-width、max-width）
- height： 视口（viewport）的高度（min-height、max-height）
- device-width 和 device-height 不再被赞成使用
- 0.0 尴尬了，MDN 上显示的好多特性都没用过，以后补

Flex 布局

CSS Flexible Box Layout Module Level 1

Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。现在主流浏览器都支持 Flex ，可以放心使用。

/* 应用在块元素上的 flex */
.box {
  display: flex;
}

/* 应用在行内元素上的 flex */
.inline {
  display: inline-flex;
}

下图是 flex 弹性盒子的示意图。

flex

应用在 flex 容器上的属性
- flex-direction： 定义主轴的方向（即子项目的排列方向）
- flex-wrap： 指定 flex 元素是单行显示还是多行显示
- flex-flow： 这个属性是 flex-direction 和 flex-wrap 的简写属性
- justify-content： 定义子项目在主轴上的对齐方式
- align-items： 定义子项目在交叉轴上的对齐方式
- align-content： 定义了多根轴线的对齐方式。如果容器只有一根轴线，该属性不起作用

/* 默认值都是第一个值 */

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: <flex-direction> || <flex-wrap>;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center | baseline | stretch;
  align-content: flex-start | flex-end | center | space-between | space-around |
    stretch;
}

应用在 flex 容器子项目上的属性
- order： 定义子项目的排列顺序。数值越小，排列越靠前，默认为 0
- flex-grow： 定义子项目的拉伸因子，默认为 0（即如果存在剩余空间，也不放大）
- flex-shrink： 定义子项目的缩小比例，默认为 1（即如果空间不足，就缩小该项目）
- flex-basis： 指定子项目在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
- flex： flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写形式
- align-self： 定义指定子项目在交叉轴上的对齐方式，可覆盖父元素的 align-items 属性

.flex-item {
  order: <integer>;
  flex-grow: <number>; /* positive number only */
  flex-shrink: <number>; /* positive number only */
  flex-basis: <length> | auto; /* default auto */
  flex: [ 0 1 none ] | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" >
    ];
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Transforms

CSS Transforms Level 1

CSS Transforms 模块定义了通过应用对应的 CSS 属性能使元素在二维或三维空间完成哪些转变。

backface-visibility： 定义元素的背面是否可见。默认情况下元素背面是可见的，而因为元素的背面总是透明的，所以元素发生翻转时，可以看到正面的镜像。

backface-visibility: visible | hidden;

See the Pen backface-visibility by percy (@percy507) on CodePen.

perspective： 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。当值为 0 或负值时，无透视变换。
perspective-origin： 指定了观察者的位置（默认为 center，即 50% 50%）

perspective: none | <length>;
perspective-origin: x-position [y-position];

transfom： 通过 transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）变换。

各种变换的具体语法看这里：transform-function

/* 注意：可以一次为元素添加多种变换 */
transform: translateX(10px) rotate(10deg) translateY(5px);

transform-origin： 定义元素变形基于的原点

/* x-offset y-offset z-offset */
transform-origin: 50% 50% 0; /* default value */

transform-style： 指定该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的扁平化平面内（默认为 flat，即在扁平化平面内）

transform-style: flat | preserve-3d;

CSS Animations

CSS Animations Level 1

CSS Animations 是 CSS 的动画模块，它定义了如何用关键帧来随时间推移对 CSS 属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

animation: ...   /* 下面一系列属性的简写形式 */
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation-iteration-count：infinite，表示无限循环
animation-direction：normal，正常
- alternate： 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向
- reverse： 反向运行动画，每周期结束动画由尾到头运行
- alternate-reverse： 动画反向开始交替（第一次反向，第二次正向，循环）
animation-fill-mode：forwards 假设动画只执行一次，则这个属性可以让动画在执行完成后保持最后一帧时的状态
animation-play-state：running | paused 定义一个动画是否运行或者暂停