CSS参考

一个免费的视觉引导CSS

通过实例学习：cssreference是一个免费的视觉引导CSS。它采用了最流行的性质，并说明和动画举例说明他们。

GitHub

default align-content: stretch;

每条线将延伸到填充的剩余空间。

在这种情况下，容器为300px高。所有框都50px高，除了第二个谁是100px高的。

align-content: flex-start;

每行只能填补它的空间需要。他们都将移向开始了Flexbox的容器的十字轴。

align-content: flex-end;

每行只能填补它的空间需要。他们都将移向结束了Flexbox的容器的十字轴。

align-content: center;

每行只能填补它的空间需要。他们都将移向中心的Flexbox的容器的十字轴。

align-content: space-between;

每行只能填补它的空间需要。在剩余的空间就会出现之间的线路。

align-content: space-around;

每行只能填补它的空间需要。在剩余的空间将平均分配周围的行：第一行之前，在两者之间，并在最后一个之后。

＃CSS对齐项

定义Flexbox的项目的方式，根据所述对准十字轴，线Flexbox的容器内。

align-items: flex-start;

该Flexbox的项目，于对准开始的的十字轴。

缺省情况下，横轴是垂直的。这意味着Flexbox的项目将被对准垂直于顶部。

align-items: flex-end;

该Flexbox的项目，于对齐结束的的十字轴。

缺省情况下，横轴是垂直的。这意味着Flexbox的项目将被对准垂直于_bottom。

align-items: center;

将Flexbox的项目，于对准中心的的十字轴。

缺省情况下，横轴是垂直的。这意味着Flexbox的物品将被集中 垂直。

align-items: baseline;

该Flexbox的项目，于对齐基线的的十字轴。

缺省情况下，横轴是垂直的。这意味着Flexbox的项目将赞同以有基线他们的文字沿水平线对齐。

align-items: stretch;

该Flexbox的项目将在整个伸展十字轴。

缺省情况下，横轴是垂直。这意味着Flexbox的项目将填补了整个垂直空间。

＃CSS对齐自

工作像align-items，但只适用于单一的，而不是Flexbox的项目，所有的人。

align-self: flex-start;

如果容器具有align-items: center与靶有align-items: flex-start，只有目标将在交叉轴的起点。

默认情况下，这意味着将对准垂直于顶部。

align-self: flex-end;

如果容器具有align-items: center与靶有align-items: flex-end，只有目标将在交叉轴的端部。

默认情况下，这意味着将对准垂直于底部。

align-self: center;

如果容器具有align-items: flex-start与靶有align-items: center，只有目标将在交叉轴的中心。

默认情况下，这意味着它会被垂直居中。

align-self: baseline;

如果容器具有align-items: center与靶有align-items: baseline，只有目标将在交叉轴的基线。

默认情况下，这意味着它将沿着文字的basline对齐。

align-self: stretch;

如果容器具有align-items: center与靶有align-items: stretch，只有目标将沿着整个横轴伸展。

＃CSS动漫延迟

定义动画有多久前等待的时间开始。动画只能在其被推迟的第一迭代。

default animation-delay: 0s;

动画将等待零点几秒，因此马上开始。

animation-delay: 1.2s;

您可以使用十进制值中秒的关键字s。

animation-delay: 2400ms;

您可以使用毫秒代替秒，关键字ms。

animation-delay: -500ms;

您可以使用负值：动画将开始就好像它已经被打了500ms。

＃CSS动画方向

定义在哪个方向动画播放。

default animation-direction: normal;

动画播放向前。当它到达末端，则在第一个关键帧开始。

animation-direction: reverse;

在播放动画时向后：开始在最后一个关键帧，在第一个关键帧结束。

animation-direction: alternate;

动画播放向前，再向下：

  • 开始于第一个关键帧
  • 停在最后一个关键帧
  • 再次启动，但在最后的关键帧
  • 停在第一个关键帧

animation-direction: alternate-reverse;

动画播放向后，再向前：

  • 开始于最后一个关键帧
  • 停在第一个关键帧
  • 再次启动，但在第一个关键帧
  • 停在最后一个关键帧

＃CSS动画持续时间

定义动画持续多久。

default animation-duration: 0s;

默认值是零秒：动画根本不会玩。

animation-duration: 1.2s;

您可以使用十进制值中秒的关键字s。

animation-duration: 2400ms;

您可以使用毫秒代替秒，关键字ms。

＃CSS动画填充模

定义发生了什么之前，动画开始和之后它结束。填充模式可以告诉浏览器如果动画的风格也应适用之外的动画。

default animation-fill-mode: none;

该动画的风格并不影响默认的风格：动画开始之前，以及动画结束后返回到默认状态的元素设置为默认状态。

animation-fill-mode: forwards;

在动画结束时应用的最后一个样式保留之后。

animation-fill-mode: backwards;

动画的风格就已经被应用之前实际开始动画。

animation-fill-mode: both;

该样式应用于之前和之后播放动画。

＃CSS动画迭代计数

定义了动画多少次播放。

default animation-iteration-count: 1;

动画将只播放一次。

animation-iteration-count: 2;

可以使用整数值来定义一个特定的次数的动画将播放量。

animation-iteration-count: infinite;

通过使用关键字infinite，动画将无限期播放。

＃CSS动画名

定义其使用动画关键帧。

default animation-name: none;

如果没有指定动画的名称，没有动画播放。

animation-name: fadeIn;

如果指定了名，关键帧匹配该名称将被使用。

例如，fadeIn动画看起来像这样：

@keyframes淡入{
  从{
    不透明度：0;
  }
  至 {
    不透明度：1;
  }
}

animation-name: moveRight;

又如：moveRight动画：

@keyframes MoveRight的{
  从{
    变换：translateX（0）;
  }
  至 {
    变换：translateX（100像素）;
  }
}

＃CSS动画播放状态

如果定义动画播放与否。

default animation-play-state: running;

如果animation-duration与animation-name定义，动画将自动开始播放。

animation-play-state: paused;

动画设定停在了第一个关键帧。

这比具有或者没有不同animation-duration或animation-name在所有。如果动画暂停，应用该样式是，的第一个关键帧，而不是默认的样式。

在这个例子中，平方是通过默认可见，但上的第一个关键帧fadeAndMove时，opacity被设定为0。暂停时，动画将在这一个关键帧“卡壳”，因此将是无形的。

@keyframes fadeAndMove {
  从{
    不透明度：0;
    变换：translateX（0）;
  }
  至 {
    不透明度：0;
    变换：translateX（100像素）;
  }
}

＃CSS动画定时功能

如何定义之间的值开始和结束的计算的动画。

default animation-timing-function: ease;

动画开始缓慢，在中间的加速，并在结束减慢。

animation-timing-function: ease-in;

动画开始慢慢地，逐渐加速，直到结束。

animation-timing-function: ease-out;

动画很快开始，并逐渐减速，直到结束。

animation-timing-function: ease-in-out;

像ease，但更明显。

动画很快开始，并逐渐减速，直到结束。

animation-timing-function: linear;

动画有一个*恒定的速度。

animation-timing-function: step-start;

动画跳跃瞬间的最终状态。

animation-timing-function: step-end;

动画停留在初始状态，直到最后，当它立即跳转到最终状态。

animation-timing-function: steps(4, end);

通过使用steps()带有整数，你可以定义一个特定的数字达到年底前的步骤。元素的状态会不会逐渐变化的，而是跳跃的州在不同的时刻。

＃CSS动画

为速记属性animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode 和 animation-play-state。

只有animation-duration与animation-name被需要。

＃CSS背景附件

定义如何滚动页面时背景图像的行为。

default background-attachment: scroll;

背景图像会随着页面滚动。它也将定位并根据它施加到元件调整本身。

background-attachment: fixed;

背景图像将不与页滚动，并且根据视口保持定位。它也将定位并根据视口调整本身。其结果是，背景图像将可能仅部分可见。

＃CSS背景素材

定义多远背景应该延长的元素中。

default background-clip: border-box;

背景整个单元甚至完全延伸，下边界。

background-clip: padding-box;

背景仅延伸到边缘的边界的：它包括填充，但不是边框。

background-clip: content-box;

背景仅延伸到边缘的内容：它不包括填料，也没有边框。

＃CSS背景色

定义了元素的背景的颜色。

default background-color: transparent;

缺省情况下，背景颜色是透明，基本上意味着有没有背景颜色。

background-color: red;

您可以使用一个140+颜色名称。

background-color: #05ffb0;

您可以使用十六进制颜色代码。

background-color: rgb(50, 115, 220);

您可以使用RGB（）颜色代码：

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0和255。

background-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色码：

  • 前3个值是 rgb
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

background-color: hsl(14, 100%, 53%);

您可以使用HSL（）色码：

  • 的第一个值是hue可以去从0到359
  • 所述第二值是saturation与去从0％至100％
  • 第三值是对luminosity去从0％至100％

background-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一个颜色代码：

  • 前3个值是 hsl
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

＃CSS背景图片

定义为元素的背景的图像。

default background-image: none;

删除任何背景图像。

background-image: url(./images/jt.png);

使用在定义的图像URL路径。这个路径可以是相对于（对CSS文件）或绝对（象http://cssreference.io./images/jt.png）。

background-image: linear-gradient(red, blue);

可以定义一个线性梯度为背景图像。

您需要定义至少两种颜色。第一个将在顶部，底部的第二个启动。

默认角度为to bottom（或180deg），这意味着该梯度是垂直，从顶部开始，在元件的底部结束。

background-image: linear-gradient(45deg, red, blue);

您可以指定一个角度，无论是在程度，或者用关键字。

当使用辈分，您指定的方向渐变，或当它结束。所以0deg指的顶级元素，如12:00的时钟。

在这个例子中，45deg装置2:30，或右上角。

background-image: radial-gradient(green, purple);

您可以定义一个径向渐变作为背景图像。

您需要定义至少两种颜色。第一个将在中心，在边缘处的第二个。

background-image: radial-gradient(circle, green, purple);

您可以指定形状的径向渐变：圆形或椭圆形（默认）。

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

您可以指定颜色停止使用百分比值。

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

您可以指定在那里的坡度应终止：

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

喜欢跟background-position，你可以指定位置的梯度。

＃CSS背景出身

定义了背景图像的原点。

default background-origin: padding-box;

背景图像开始在边缘的边界：内的空白，但没有边界。

background-origin: border-box;

背景图像开始下边界。

background-origin: content-box;

背景图象仅开始于边缘内容：它不包括填料，也没有边框。

＃CSS背景位置

定义了背景图像的位置。

default background-position: 0% 0%;

背景图像将被定位在0％上的水平轴和0％在垂直轴上，这意味着该元素的左上角。

background-position: bottom right;

您可以使用组合位置的关键字：center，top，bottom，left和right。

background-position: center center;

背景图像将被定位在该元件的中心。

＃CSS背景重复

定义背景图片如何重演整个元素的背景，从后台位置开始。

default background-repeat: repeat;

背景图像都将重演水平和垂直方向。

background-repeat: repeat-x;

背景图像只会重演水平。

background-repeat: repeat-y;

背景图像只会重演垂直。

background-repeat: no-repeat;

背景图像将只出现一次。

＃CSS背景大小

定义了背景图像的大小。

default background-size: auto auto;

背景图像将保持其原始大小。

例如，在此背景图像是960像素由640像素大。其纵横比是3 2，它比它的容器（它是150像素高），从而，可以更大的剪切。

background-size: 120px 80px;

您可以指定一个尺寸像素：

  • 的第一个值是水平尺寸
  • 第二个是垂直尺寸

background-size: 100% 50%;

您可以使用百分比值，以及。小心，这可能改变长宽比的背景图像，并导致意想不到的结果。

background-size: contain;

关键字contain将调整的背景图像，以确保它仍然是完全可见。

background-size: cover;

关键字cover将调整的背景图像，以确保该元件被完全覆盖。

＃CSS背景

为速记属性background-image background-position background-size background-repeat background-origin background-clip background-attachment 和 background-color。

＃CSS下边框颜色

像border-color，但对于底部边框而已。

border-bottom-color: transparent;

应用一个透明色的底边框。底边框仍然会占用空间的定义border-width值。

border-bottom-color: red;

您可以使用一个140+颜色名称。

border-bottom-color: #05ffb0;

您可以使用十六进制颜色代码rgb()，rgba()，hsl()，hsla()...

＃CSS边框左下角半径

定义半径的左下角。

default border-bottom-left-radius: 0;

删除任何边界半径。

border-bottom-left-radius: 20px;

您可以使用像素值。

border-bottom-left-radius: 50%;

您可以使用百分比值。在本实施例中，半径开始中途的底部边界，并在中途结束左边框。

border-bottom-left-radius: 20px 50%;

如果设置两个值，第一个是对底部边框，第二个用于左边框。

＃CSS边框右下角半径

定义半径右下角的。

default border-bottom-right-radius: 0;

删除任何边界半径。

border-bottom-right-radius: 20px;

您可以使用像素值。

border-bottom-right-radius: 50%;

您可以使用百分比值。在本实施例中，半径开始中途的底部边界，并在中途结束右边界。

border-bottom-right-radius: 20px 50%;

如果设置两个值，第一个是对底部边框，第二个为正确的边界。

＃CSS下边框风格

像border-style，但对于底部边框而已。

default border-bottom-style: none;

删除底部边框。

border-bottom-style: dotted;

打开底部边界进入点的序列。

border-bottom-style: dashed;

打开底边框为虚线序列。

border-bottom-style: solid;

打开底边框为实线。

border-bottom-style: double;

拆分底边框为两行。

border-bottom-style: groove;

设置一个插图风格的底部边框。

＃CSS下边框宽度

像border-width，但对于底部边框而已。

default border-bottom-width: 0;

删除底部边框。

border-bottom-width: 4px;

您可以使用像素值。

＃CSS边框底部

为速记属性border-bottom-width border-bottom-style 和 border-bottom-color。

border-bottom: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

border-bottom: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS边界崩溃

定义是否表格边框应该分开或折叠。

default border-collapse: separate;

每个表单元格将显示它自己的边界。

在本实施例中，每个小区具有border-width的4像素。其结果是，之间的边界2细胞将8像素。

border-collapse: collapse;

相邻的表格单元格将合并它们的边界在一起。

出现的细胞首先在代码将“赢”：它的边界会掩盖那些下面的单元格。

＃CSS边框颜色

定义元素的边框的颜色。

default border-color: transparent;

应用一个透明色边框。边框仍然会占用空间的定义border-width值。

border-color: red;

您可以使用一个140+颜色名称。

border-color: #05ffb0;

您可以使用十六进制颜色代码。

border-color: rgb(50, 115, 220);

您可以使用RGB（）颜色代码：

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0和255。

border-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色码：

  • 前3个值是 rgb
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

border-color: hsl(14, 100%, 53%);

您可以使用HSL（）色码：

  • 的第一个值是hue可以去从0到359
  • 所述第二值是saturation与去从0％至100％
  • 第三值是对luminosity去从0％至100％

border-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一个颜色代码：

  • 前3个值是 hsl
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

＃CSS左边框的颜色

像border-color，但对于左边框仅。

border-left-color: transparent;

施加透明颜色的左边界。左边框将仍占用空间的定义border-width值。

border-left-color: red;

您可以使用一个140+颜色名称。

border-left-color: #05ffb0;

您可以使用十六进制颜色代码rgb()，rgba()，hsl()，hsla()...

＃CSS左边框风格

像border-style，但对于左边框仅。

default border-left-style: none;

移除左边框。

border-left-style: dotted;

变为左边界成的点的序列。

border-left-style: dashed;

打开左边框为虚线序列。

border-left-style: solid;

变为左边界成实线。

border-left-style: double;

拆分左边框为两行。

border-left-style: groove;

设置一个插图风格左边框。

＃CSS左边框宽度

像border-width，但对于左边框仅。

default border-left-width: 0;

移除左边框。

border-left-width: 4px;

您可以使用像素值。

＃CSS左边框

为速记属性border-left-width border-left-style 和 border-left-color。

border-left: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

border-left: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS边界半径

定义半径元素的角落。

default border-radius: 0;

删除任何边界半径。

border-radius: 20px;

您可以使用像素值。

border-radius: 50%;

您可以使用百分比值。在本实施例中，半径通过每个边界半途开始。

border-radius: 20px 50%;

如果设置两个值，第一个是对于顶部和底部边界，第二个为所述左和右边缘。

＃CSS右边框的颜色

像border-color，但是对于右边界只。

border-right-color: transparent;

应用一个透明的颜色右边框。右边框仍然会占用空间的定义border-width值。

border-right-color: red;

您可以使用一个140+颜色名称。

border-right-color: #05ffb0;

您可以使用十六进制颜色代码rgb()，rgba()，hsl()，hsla()...

＃CSS右边框风格

像border-style，但是对于右边界只。

default border-right-style: none;

删除右边框。

border-right-style: dotted;

变为右侧边界进入点的序列。

border-right-style: dashed;

打开右边框分为划线的序列。

border-right-style: solid;

变为右边界成实线。

border-right-style: double;

拆分右边框为两行。

border-right-style: groove;

设置一个插图风格的右边框。

＃CSS右边框的宽度

像border-width，但是对于右边界只。

default border-right-width: 0;

删除右边框。

border-right-width: 4px;

您可以使用像素值。

＃CSS右边框

为速记属性border-right-width border-right-style 和 border-right-color。

border-right: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

border-right: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS边框样式

定义元素边框的风格。

default border-style: none;

移除元素的边界。

border-style: dotted;

变成边界进入点的序列。

border-style: dashed;

打开边界进入短线的序列。

border-style: solid;

打开边界进入实线。

border-style: double;

拆分边界进入两行。

border-style: groove;

设置一个插图风格的边界。

＃CSS边框顶部的颜色

像border-color，但对于顶部边框而已。

border-top-color: transparent;

应用一个透明的颜色上边框。上边框仍将占用空间的定义border-width值。

border-top-color: red;

您可以使用一个140+颜色名称。

border-top-color: #05ffb0;

您可以使用十六进制颜色代码rgb()，rgba()，hsl()，hsla()...

＃CSS边框左上角的半径

定义半径左上角的。

default border-top-left-radius: 0;

删除任何边界半径。

border-top-left-radius: 20px;

您可以使用像素值。

border-top-left-radius: 50%;

您可以使用百分比值。在本实施例中，半径开始中途的顶部边界，并在中途结束左边框。

border-top-left-radius: 20px 50%;

如果设置两个值，第一个是在顶部边界，第二个为左边框。

＃CSS边框右上角半径

定义半径右上角的。

default border-top-right-radius: 0;

删除任何边界半径。

border-top-right-radius: 20px;

您可以使用像素值。

border-top-right-radius: 50%;

您可以使用百分比值。在本实施例中，半径开始中途的顶部边界，并在中途结束右边界。

border-top-right-radius: 20px 50%;

如果设置两个值，第一个是在顶部边界，第二个为右边界。

＃CSS边框顶式

像border-style，但对于顶部边框而已。

default border-top-style: none;

删除顶部边框。

border-top-style: dotted;

接通顶部边界进入点的序列。

border-top-style: dashed;

打开上边框分为划线的序列。

border-top-style: solid;

打开顶部边框变成了实线。

border-top-style: double;

拆分上边框为两行。

border-top-style: groove;

设置一个插图风格上边框。

＃CSS边框顶部宽度

像border-width，但对于顶部边框而已。

default border-top-width: 0;

删除顶部边框。

border-top-width: 4px;

您可以使用像素值。

＃CSS边框顶部

为速记属性border-top-width border-top-style 和 border-top-color。

border-top: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

border-top: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS边框宽度

定义元素的边框的宽度。

border-width: 1px;

定义的宽度都边框为1px。

border-width: 2px 0;

限定在顶部和底部边界为2px，左，右为0。

＃CSS边界

为速记属性border-width border-style 和 border-color。

border: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

border: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS底部

定义根据其在所述元件的位置底部边缘。

default bottom: auto;

该元件将保持在其自然位置。

bottom: 20px;

如果该元素是在适当的位置相对，所述元件将移动向上通过由限定的量底值。

bottom: 0;

如果该元素处于位置绝对的，元素本身会从位置底部的首先定位的祖先。

＃CSS箱阴影

定义元素的影子。

default box-shadow: none;

删除被应用到任何元素的box-shadow。

box-shadow: 2px 6px;

你至少需要两个值：

  • 第一种是在水平方向偏移
  • 第二个是垂直偏移

阴影颜色将从文本颜色继承。

box-shadow: 2px 6px red;

您可以定义一个颜色作为最后的值。

正如color，你可以使用颜色名称，十六进制，RGB，HSL ...

box-shadow: 2px 4px 10px red;

可选的第三个值定义模糊的影子。

颜色会跨越10px的在这个例子中被扩散，从不透明到透明的。

box-shadow: 2px 4px 10px 4px red;

可选的第四个值定义蔓延的阴影。

传播定义了阴影多少应该成长：它增强了阴影。

＃CSS箱上浆

定义如何在元件的宽度和高度被计算：它们是否包括填充和边界或没有。

default box-sizing: content-box;

的宽度和高度的元件的仅适用于内容的元素。

例如，该元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

该全宽为24px的+ 60像素+ 200像素= 284px。

的内容具有定义的宽度。盒子可容纳这些尺寸。

box-sizing: border-box;

的宽度和高度的元件的应用到元件的所有部分：内容，该填充和边界。

例如，该元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

在全宽是200像素，无论是什么。

这个盒子有定义的宽度。内容可容纳这些尺寸，并最终被200像素- 30PX - 24px的= 146px。

＃CSS清

前面所有的浮动元素后移动元素。

clear: none;

在明确与有兄弟姐妹一起使用时属性仅有关浮点值。

该元素将坐在一起，任何浮动元素之前它。

clear: left;

清除的元素会移动后，它前面的左侧浮动元素，但仍将沿着右浮动元素。

clear: right;

清除的元素会移动后，它前面的任何权利浮动元素，但仍将沿着左浮动元素。

clear: both;

清除的元素会移动后，它前面的浮动元素。这包括悬空，右浮动元素。

＃CSS彩

定义的颜色文本。

color: transparent;

施加透明颜色的文本。文本将仍然占用空间，它应该。

color: red;

您可以使用一个140+颜色名称。

color: #05ffb0;

您可以使用十六进制颜色代码。

color: rgb(50, 115, 220);

您可以使用RGB（）颜色代码：

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0和255。

color: rgba(0, 0, 0, 0.5);

您可以使用RGBA（）色码：

  • 前3个值是 rgb
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

color: hsl(14, 100%, 53%);

您可以使用HSL（）色码：

  • 的第一个值是hue可以去从0到359
  • 所述第二值是saturation与去从0％至100％
  • 第三值是对luminosity去从0％至100％

color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一个颜色代码：

  • 前3个值是 hsl
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

＃CSS列数

限定了元件的列数。

default column-count: auto;

从元素删除任何列（除非另一个column-属性设置）。

column-count: 3;

当使用整数值，该元件将在所定义的列数分发其子元素。

＃CSS列隙

限定了元件的各列之间的间隙。

default column-gap: normal;

列之间的间隙设置为浏览器的默认值，这通常是1em的。

column-gap: 2px;

您可以使用像素值的差距。

注意，间隙只出现之间的列，而不是在边缘的列的外部侧面。

＃CSS列宽

限定了元件的列数。

default column-width: auto;

该元素将不会派发其子元素为列，unlesse一个column-count值定义。在这种情况下，列的宽度将从列计数可以infered。

column-width: 10px;

您可以使用像素值的列宽。

列数将是分发横跨元件的所有内容所需的最低限度。

＃CSS内容

定义的文本内容:before和:after伪元素。

default content: normal;

没有内容被添加到元件。

content: "Foo bar";

考虑到这个HTML元素：

<p类=“元素”>
  你好，世界
</ P>

而这个CSS：

.element：前{
  内容：“富巴”;
}

文本内容将被前置到元素的内容。

请注意如何最终结果结合从CSS的HTML和文字文本。

content: url(./images/jt.png);

您可以插入图像通过使用url()功能。

content: attr(data-something);

考虑到这个HTML元素：

<p类=“元素”数据的东西=“cssreference”>
  你好，世界
</ P>

而这个CSS：

.element：前{
  内容：ATTR（数据的东西）;
}

该元素将抓住从HTML文本内容属性。

＃CSS光标

徘徊在元素时，设置鼠标光标。

cursor: default;

设置光标到元素的默认值。对于一个链接，这将是一个指针。对于文本这将是一个选择光标。

cursor: auto;

汽车

cursor: pointer;

指针

cursor: move;

移动

cursor: crosshair;

十字线

cursor: text;

文本

cursor: wait;

等待

cursor: helpe-resize;

helpe调整大小

cursor: ne-resize;

NE-调整大小

cursor: nw-resize;

NW-调整大小

cursor: n-resize;

正调整大小

cursor: se-resize;

SE-调整大小

cursor: sw-resize;

SW-调整大小

cursor: s-resize;

S-调整大小

cursor: w-resize;

W-调整大小

＃CSS显示

设置元素的显示行为。

display: none;

该元素被完全除去，就好像它在第一位置的HTML代码不是。

display: inline;

元素变成一个内联元素：它的行为就像纯文本。

任何height和width施加将没有效果。

display: block;

元素变成一个块元素：它开始在新的一行，并占据了整个宽度。

display: inline-block;

元素都共享一个属性内联和块元素：

  • 内联，因为该元素的行为类似于简单的文字，并插入本身的文本块
  • 块，因为你可以申请height和width值

例如，这个元素有：

。元件{
  高度：3EM;
  宽度：60像素;
}

display: list-item;

元素就像一个列表项：<li>。唯一的区别块是一个列表项具有符号点。

display: table;

元素就像一个表：<table>。

其内容和子元素表现得像表格单元格。

display: table-cell;

该元素的行为像一个表格单元格：<td>或<th>。

其内容和子元素表现得像表格单元格。

display: table-row;

元素就像一个表行：<tr>。

其内容和子元素表现得像表格单元格。

display: flex;

元素变成一个Flexbox的容器。就其本身而言，它就像一个块元素。

其子元素会变成Flexbox的项目。

display: inline-flex;

元素都共享一个属性内联和Flexbox的元素：

  • 内联，因为该元素的行为类似于简单的文字，并插入本身的文本块
  • Flexbox的，因为它的子元素将化为Flexbox的项目

例如，这个元素有：

。元件{
  高度：3EM;
  宽度：120像素;
}

＃CSS柔性基础

定义Flexbox的项目的初始大小。

default flex-basis: auto;

元件将根据它的内容被自动调整大小，或任何height或width值，如果它们被定义。

flex-basis: 80px;

您可以定义像素或（R）EM值。该元素将包装的内容，以避免任何溢出。

＃CSS柔性方向

定义Flexbox的项目是如何一个Flexbox的容器内订购。

default flex-direction: row;

的Flexbox的项目被订购的相同方式与文本方向，沿主轴线。

flex-direction: row-reverse;

的Flexbox的项目被订购的相反方式与文本方向，沿主轴。

flex-direction: column;

的Flexbox的项目被订购的相同方式与文本方向，沿横轴。

flex-direction: column-reverse;

该项目Flexbox的是有序的相反的方式与文本方向，沿横轴。

＃CSS柔性流动

为速记属性flex-direction 和 flex-flow。

＃CSS柔性成长

定义Flexbox的项目应该有多少增长，如果有可用空间。

default flex-grow: 0;

元素会不会，如果有可用空间成长。它将只使用所需的空间。

flex-grow: 1;

该元素将增加由一个因素1。这将填补剩余的空间，如果没有其他Flexbox的项目都有一个flex-grow值。

flex-grow: 2;

由于柔性成长值是相对的，其行为取决于Flexbox的项目的价值兄弟姐妹。

在本例中，剩余空间被分为3：

  • 1第三转到绿色项目
  • 2三分之二的进入粉红项目
  • 没有去的黄色物品，谁保留其初始宽度

＃CSS弹性收缩

定义Flexbox的项目应该有多少缩水，如果有没有足够的可用空间。

default flex-shrink: 1;

如果有没有足够的可用空间中的容器的主轴线，所述元件将收缩通过的系数1，和将包装的内容。

flex-shrink: 0;

该元素将不会缩水：将保留它需要的宽度，没有包装的内容。它的兄弟姐妹将萎缩给空间目标元素。

由于目标元素不会换它的内容，还有对Flexbox的容器的内容的机会溢出。

flex-shrink: 2;

由于柔性收缩值是相对的，其行为取决于Flexbox的项目的价值兄弟姐妹。

在本实施例中，绿色项目要填补的宽度的100％。它需要的空间是取自其两个同胞，并在划分4：

  • 3宿舍是取自红项目
  • 1季度取自黄项目

＃CSS柔性包装

如果Flexbox的项目出现在定义单行或多个行一Flexbox的容器内。

default flex-wrap: nowrap;

该Flexbox的项目将保持在一个单一的线，无论是什么，最终将溢出如果需要的话。

flex-wrap: wrap;

该Flexbox的项目会之间进行分配多条线路如果需要的话。

flex-wrap: wrap-reverse;

该Flexbox的项目会之间进行分配多条线路如果需要的话。任何额外的生产线将出现前的前一个。

＃CSS浮

推压元件，以任一左或右侧。下面的兄弟姐妹将环绕浮动元素

default float: none;

删除以前定义的float值。该元件将保持在该页面的自然流动。

float: left;

移动元件到左其容器的侧面。以下内容将环绕它，填满剩余右边的空间。

float: right;

移动元件的右边其容器的侧面。以下元素将环绕它和填充其余左侧的空间。

＃CSS FONT-FAMILY

font-family: "Source Sans Pro", "Arial", sans-serif;

当使用多个值，则font-family列表的字体系列定义优先级在浏览器应选择字体系列。

该浏览器会为每个家庭用户的电脑，在任何@字体面的资源。

列表被优先从左到右：将使用所述第一值，如果它是可用的，或去到下一个，直到到达列表的末端。该默认字体系列是由浏览器的喜好来定义。

在本实施例中，浏览器将尝试使用Source Sans Pro，如果它是可用的。如果无法找到它，它会尝试使用Arial。如果它都不可用，它会使用浏览器的sans-serif字体。

font-family: serif;

该浏览器将使用衬线字体家族：所有字符笔画的结局。

font-family: sans-serif;

该浏览器将使用无衬线字体系列：无角色有中风的结局。

font-family: monospace;

该浏览器将使用等宽字体系列：所有字符相同的宽度。

font-family: cursive;

该浏览器将使用草书字体系列。

font-family: fantasy;

浏览器将使用一个幻想字体系列。

＃CSS字体大小

定义文本的大小。

default font-size: medium;

该文本将使用浏览器默认的中等大小。

font-size: 20px;

您可以使用像素值。

font-size: 1.2em;

您可以使用EM值。

该值是相对的父母的font-size。
这样一来，该值将级联如果在子元素中。

font-size: 1.2rem;

您可以使用REM值。

的值是相对于根元素的font-size，它是<html>元件。
其结果是，该值将不依赖于变化的深度在HTML层次结构中的元素，并且将reamin上下文无关。

font-size: 90%;

您可以使用百分比值。他们像em值。

该值是相对的父母的font-size。
这样一来，该值将级联如果在子元素中。

font-size: smaller;

您可以使用相对的关键字。该值是相对于亲本。

下列是可用的：

  • larger
  • smaller

font-size: x-large;

您可以使用的绝对关键词。该值是相对于根元素 <html>。

下列是可用的：

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

＃CSS字体风格

定义文本多少倾斜。

default font-style: normal;

该文本是不倾斜。

font-style: italic;

使用斜体字体的版本：字母略微倾斜。

font-style: oblique;

使用斜字体的版本：字母比斜体更多倾斜。

＃CSS字体变形

定义了字形用于每个字母。

default font-variant: normal;

每个字母使用其正常的字形。

font-variant: small-caps;

每个字母使用其小型大写版本。

＃CSS字体重量

定义文本的重量。

default font-weight: normal;

该文本是正常体重。

font-weight: bold;

文本变得大胆。

font-weight: 600;

您可以使用数字值。它们都对应于特定的命名的重量：

  • 100薄
  • 200超轻型
  • 300光
  • 400正常
  • 500中
  • 600半粗体
  • 700粗体
  • 800额外大胆
  • 900超大胆

如果该字体族不提供所请求的重量，将使用最近的可用之一。

font-weight: lighter;

您可以使用相对关键字：lighter或bolder。浏览器将使用下一个可用的重量。

＃CSS字体

为速记属性font-style font-variant font-weight font-size line-height 和 font-family。

＃CSS高度

限定了元件的高度。

default height: auto;

元件将自动调整其高度，以允许正确地显示其内容。

height: 100px;

您可以使用数值像的像素，（R）EM，百分比 ...

如果内容没有在指定范围内的高度契合，就会溢出。如何容器将处理这种溢出的内容是由定义overflow属性。

＃CSS辩解内容

定义Flexbox的项目的方式，根据所述对准主轴线，一个Flexbox的容器内。

default justify-content: flex-start;

该项目Flexbox的朝向推启动容器的主轴线。

justify-content: flex-end;

将Flexbox的项目对推动结束容器的主轴线。

justify-content: center;

该Flexbox的项目为中心沿着容器的主轴线。

justify-content: space-between;

剩余的空间分布之间的Flexbox的物品。

justify-content: space-around;

剩余的空间分布围绕所述Flexbox的项：这增加了空间之前的第一项和之后的最后一个。

＃CSS左

定义根据其在所述元件的位置左边缘。

default left: auto;

该元件将保持在其自然位置。

left: 80px;

如果该元素是在适当的位置相对，所述元件将移动向上通过由限定的量左侧的值。

left: -20px;

如果该元素处于位置绝对的，元素本身会从位置左侧的第一个定位的的始祖。

＃CSS字母间距

定义文本块中的字符之间的间距。

default letter-spacing: normal;

字符之间的间隔是正常。

letter-spacing: 2px;

您可以使用像素值。

letter-spacing: 0.1em;

可以使用的EM的值：这允许间隔保持相对的字体大小。

＃CSS线高

限定单个文本行的高度。

default line-height: normal;

还原为默认浏览器的价值。

recommended line-height: 1.6;

您可以使用无单位值：行高将是相对的字体大小。

line-height: 30px;

您可以使用像素值。

line-height: 0.8em;

您可以使用EM值：像无单位值，该行高度将相对字体大小。

＃CSS列表样式图像

定义的图像被用作列表项的项目符号。

default list-style-image: none;

列表项将使用所定义的子弹点list-style-type值，默认情况下是一个圆盘。

list-style-image: url(./images/list-style-image.png);

列表项将使用图像位于指定URL作为他们的子弹点
的图像不能调整大小。

＃CSS列表样式位置

定义位置列表的要点的。

default list-style-position: outside;

子弹点将外列表项，因为如果不是列表项的一部分。

每个的开始行列表项将被垂直对齐。

list-style-position: inside;

子弹点将内部列表项。

因为它是该列表项的一部分，这将是文本的一部分，并在开始推文本。

＃CSS列表样式类型

定义类型列表项的的圆点。

default list-style-type: disc;

列表项将使用光盘作为他们的子弹点。

list-style-type: circle;

列表项会用一个圆圈作为圆点。

list-style-type: square;

列表项将使用方作为项目符号。

list-style-type: decimal;

列表项将使用十进制作为他们的子弹点。

list-style-type: none;

该列表中的项目将有没有小点。

＃CSS列表样式

为速记属性list-style-type list-style-image 和 list-style-position。

＃CSS保证金底

限定空间以外的元素，在底部一侧。

default margin-bottom: 0;

删除底部的任何保证金。

margin-bottom: 30px;

您可以使用像素值。

margin-bottom: 2em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

margin-bottom: 10%;

可以使用百分比值。
百分比是基于宽度的的容器。

＃CSS保证金左

限定空间以外的元素，在左侧。

default margin-left: 0;

删除左侧的任何保证金。

margin-left: 50px;

您可以使用像素值。

margin-left: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

margin-left: 30%;

可以使用百分比值。
百分比是基于宽度的的容器。

margin-left: auto;

该自动关键字将会给左侧的比重剩余空间。

当结合margin-right: auto，它将为中心的元素，如果一个固定的宽度被定义。

＃CSS保证金权

限定空间以外的元素，在右侧。

default margin-right: 0;

删除右边的任何保证金。

margin-right: 50px;

您可以使用像素值。

margin-right: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

margin-right: 30%;

可以使用百分比值。
百分比是基于宽度的的容器。

margin-right: auto;

该自动关键字将会给右侧的每股剩余空间。

当结合margin-left: auto，它将为中心的元素，如果一个固定的宽度被定义。

＃CSS的margin-top

限定空间以外的元素，在顶侧。

default margin-top: 0;

除去顶部的任何保证金。

margin-top: 30px;

您可以使用像素值。

margin-top: 2em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

margin-top: 10%;

可以使用百分比值。
百分比是基于宽度的的容器。

＃CSS保证金

为速记属性margin-top margin-right margin-bottom 和 margin-left。

default margin: 0;

删除所有的利润。

margin: 30px;

当使用1值，则将边距设置为所有4个方面。

margin: 30px 60px;

当使用2的值：

  • 所述第一值是顶部/底部
  • 所述第二值是右/左

要记住为了想想你的值没有定义。

如果输入2的值（前/右），你忽略设置底部和左侧。因为底部是顶部的垂直对应，它将使用顶部的值。而且因为左边是右边的水平对应，它将使用权的价值。

margin: 30px 60px 45px;

当使用3的值：

  • 所述第一值是顶
  • 所述第二值是右/左
  • 在第三个值是底部

要记住为了想想你的值没有定义。

如果输入3的值（上/右/下），你忽略设置离开。作为右的对手，它会用它的价值。

margin: 30px 60px 45px 85px;

当使用4的值：

  • 所述第一值是顶
  • 所述第二值是正确的
  • 在第三个值是底部
  • 的第四值是左

记住顺序，开始在顶部和去顺时针。

＃CSS最大高度

限定元件可以是最大高度。

default max-height: none;

该元素有没有限制高度的条款。

max-height: 2000px;

您可以使用数值像的像素，（R）EM，百分比 ...

如果最大高度较大比元件的实际高度，最大高度有任何效果。

max-height: 100px;

如果内容没有最大高度内适合，会溢出。如何容器将处理这种溢出的内容是由定义overflow属性。

＃CSS最大宽度

限定元件可以是最大宽度。

default max-width: none;

该元素有没有限制在宽度方面。

max-width: 2000px;

您可以使用数值像的像素，（R）EM，百分比 ...

如果该最大宽度是较大比元件的实际宽度，最大宽度有没有影响。

max-width: 150px;

如果内容没有最大宽度内适合时，会自动改变高度的元件，以适应对内容的包装纸。

＃CSS最小高度

限定了元件的最小高度。

default min-height: 0;

该元素有没有最低高度。

min-height: 200px;

您可以使用数值像的像素，（R）EM，百分比 ...

如果该最小高度是大的比元件的实际高度，最小高度将被应用。

min-height: 5px;

如果该最小高度是小的比元件的实际高度，最小高度具有任何效果。

＃CSS最小宽度

限定了元件的最小宽度。

default min-width: 0;

该元素没有最小宽度。

min-width: 300px;

您可以使用数值像的像素，（R）EM，百分比 ...

如果该最小宽度较大比元件的实际宽度，最小宽度将被应用。

min-width: 5px;

如果该最小宽度小比元件的实际宽度，最小宽度有没有影响。

＃CSS混合混合模式

定义了元素应该如何混合与背景。

default mix-blend-mode: normal;

元素并没有融为一体。

mix-blend-mode: multiply;

该元素使用乘法混合模式。

mix-blend-mode: screen;

该元素使用屏幕混合模式。

mix-blend-mode: overlay;

该元素使用叠加混合模式。

mix-blend-mode: darken;

该元素使用变暗混合模式。

mix-blend-mode: lighten;

该元素使用减仓混合模式。

mix-blend-mode: color-dodge;

该元素使用颜色减淡混合模式。

mix-blend-mode: color-burn;

该元素使用的颜色烧伤混合模式。

mix-blend-mode: hard-light;

该元素使用硬轻混合模式。

mix-blend-mode: soft-light;

该元素使用软光混合模式。

mix-blend-mode: difference;

该元素使用不同的混合模式。

mix-blend-mode: exclusion;

该元素使用排除混合模式。

mix-blend-mode: hue;

该元素使用色相混合模式。

mix-blend-mode: saturation;

该元素使用饱和度混合模式。

mix-blend-mode: color;

该元素使用的颜色混合模式。

mix-blend-mode: luminosity;

该元素使用亮度混合模式。

＃CSS透明度

定义元素如何不透明的。

default opacity: 1;

该元素是完全不透明。

opacity: 0;

该元素是完全透明的。

opacity: 0.3;

之间的任意值0（零）和1（一个）可以使元素半透明。

＃CSS秩序

定义Flexbox的项目的顺序。

default order: 0;

所述Flexbox的项目的顺序是在定义的HTML代码。

order: 1;

顺序是相对的Flexbox的项目的兄弟姐妹。当所有个体Flexbox的项目次序值都考虑到最后的顺序定义。

order: -1;

您可以使用负的值。

order: 9;

您可以设置不同的每个Flexbox的项目值。

＃CSS轮廓色

定义该元素的轮廓的色彩。

default outline-color: transparent;

施加透明色的轮廓。轮廓仍然会占用空间的定义outline-width值。

outline-color: red;

您可以使用一个140+颜色名称。

outline-color: #05ffb0;

您可以使用十六进制颜色代码。

outline-color: rgb(50, 115, 220);

您可以使用RGB（）颜色代码：

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0和255。

outline-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色码：

  • 前3个值是 rgb
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

outline-color: hsl(14, 100%, 53%);

您可以使用HSL（）色码：

  • 的第一个值是hue可以去从0到359
  • 所述第二值是saturation与去从0％至100％
  • 第三值是对luminosity去从0％至100％

outline-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一个颜色代码：

  • 前3个值是 hsl
  • 第四值是alpha信道，并且定义的颜色的不透明度

阿尔法值可以从零0（透明）一1（不透明）。

＃CSS提纲式

定义元素的轮廓风格。

default outline-style: none;

移除元素的轮廓。

outline-style: dotted;

接通轮廓成的点的序列。

outline-style: dashed;

打开大纲分为划线的序列。

outline-style: solid;

转动轮廓成实线。

outline-style: double;

拆分大纲为两行。

outline-style: groove;

设置一个插图风格的轮廓。

＃CSS轮廓宽度

定义该元素的轮廓的宽度。

default outline-width: medium;

定义所有轮廓到的宽度中等。

outline-width: 1px;

定义了所有的宽度概述了1像素。

＃CSS大纲

为速记属性outline-width outline-style 和 outline-color。

outline: 4px dotted red;

该顺序是非常重要的：

  • 宽度
  • 样式
  • 颜色

outline: 2px solid;

只有颜色是可选。如果你忽略它，应用颜色将是颜色的文本。

＃CSS溢出包装

定义是否达到行的末尾时的话应该打破。

default overflow-wrap: normal;

有没有空间的话会不会打破。不间断的字符序列将在一行中显示。

overflow-wrap: break-word;

以无间隙的话会打破，因为它们到达行末，尽快。

＃CSS溢出-X

定义如何在横轴上溢出的内容显示出来。

default overflow-x: visible;

四溢的内容是可见的，而元素本身停留在指定的宽度。

overflow-x: hidden;

溢出的内容是隐藏的，并且不能被访问。

overflow-x: scroll;

四溢的内容可访问多亏了水平滚动条。

overflow-x: auto;

浏览器决定是否显示水平滚动条或没有。

＃CSS溢出-Y

定义如何在垂直轴上溢出的内容显示出来。

default overflow-y: visible;

溢出的内容是可见的，而元件本身保持在规定的高度。

overflow-y: hidden;

溢出的内容是隐藏的，并且不能被访问。

overflow-y: scroll;

四溢的内容可访问多亏了垂直滚动条。

overflow-y: auto;

浏览器决定是否显示垂直滚动条或没有。

＃CSS溢出

定义如何在水平和垂直轴溢出的内容显示出来。

default overflow: visible;

溢出的内容是可见的，而元件本身保持在规定的高度。

overflow: hidden;

溢出的内容是隐藏的，并且不能被访问。

overflow: scroll;

四溢的内容可访问多亏了垂直滚动条。

overflow: auto;

浏览器决定是否显示垂直滚动条或没有。

＃CSS填充底

限定空间内的元件，在底侧。

default padding-bottom: 0;

删除底部任何填充。

padding-bottom: 50px;

您可以使用像素值。

padding-bottom: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

padding-bottom: 30%;

可以使用百分比值。
百分比是基于宽度的的元件。

＃CSS填充左

限定空间内的元件，在左侧边。

default padding-left: 0;

删除左侧的任何填充。

padding-left: 50px;

您可以使用像素值。

padding-left: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

padding-left: 30%;

可以使用百分比值。
百分比是基于宽度的的元件。

＃CSS填充右

限定空间内的元件，在右侧。

default padding-right: 0;

删除右边任何填充。

padding-right: 50px;

您可以使用像素值。

padding-right: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

padding-right: 30%;

可以使用百分比值。
百分比是基于宽度的的元件。

＃CSS填充顶

限定空间内的元件，在顶侧。

default padding-top: 0;

删除顶部任何填充。

padding-top: 50px;

您可以使用像素值。

padding-top: 7em;

你可以使用（R）EM值。

值是相对于对字体大小：

  • EM：相对于元素的当前字体大小
  • REM：相对于<html>所述根元素的字体大小

padding-top: 30%;

可以使用百分比值。
百分比是基于宽度的的元件。

＃CSS填充

为速记属性padding-top padding-right padding-bottom 和 padding-left。

default padding: 0;

删除所有垫。

padding: 30px;

当使用1值，填充设置为所有4个方面。

padding: 30px 60px;

当使用2的值：

  • 所述第一值是顶部/底部
  • 所述第二值是右/左

要记住为了想想你的值没有定义。

如果输入2的值（前/右），你忽略设置底部和左侧。因为底部是顶部的垂直对应，它将使用顶部的值。而且因为左边是右边的水平对应，它将使用权的价值。

padding: 30px 60px 45px;

当使用3的值：

  • 所述第一值是顶
  • 所述第二值是右/左
  • 在第三个值是底部

要记住为了想想你的值没有定义。

如果输入3的值（上/右/下），你忽略设置离开。作为右的对手，它会用它的价值。

padding: 30px 60px 45px 85px;

当使用4的值：

  • 所述第一值是顶
  • 所述第二值是正确的
  • 在第三个值是底部
  • 的第四值是左

记住顺序，开始在顶部和去顺时针。

＃CSS指针事件

如果定义元素反应指针事件与否。

default pointer-events: auto;

元素发生反应的指针事件，如:hover或click。

pointer-events: none;

元素并没有反应指针事件，如:hover或click。其结果是，那些元件的背后是可访问的。

＃CSS位置

限定了元件的位置的行为。

default position: static;

该元件将保持在自然流动的网页。

其结果是，它将不充当锚点的绝对定位的黄色块。

此外，它会不反应以下列性质：

  • top
  • bottom
  • left
  • right
  • z-index

position: relative;

该元件将保持在自然流动的网页。

这也使得该元素的位置：它会作为一个锚点的绝对定位的黄色阻止作用。

此外，它会发生反应，以下列属性：

  • top
  • bottom
  • left
  • right
  • z-index

position: absolute;

的元件将不留在网页的自然流动。它会根据自身定位最接近的定位的祖先。

因为它的位置，这将作为一个锚点绝对定位黄色块。

此外，它会发生反应，以下列属性：

  • top
  • bottom
  • left
  • right
  • z-index

position: fixed;

的元件将不留在网页的自然流动。它会根据自身定位视。

因为它的位置，这将作为一个锚点绝对定位黄色块。

此外，它会发生反应，以下列属性：

  • top
  • bottom
  • left
  • right
  • z-index

＃CSS调整大小

如果定义textarea的是可调整大小与否。

default resize: none;

textarea的是不调整大小。

resize: horizontal;

textarea的是可调整大小的水平。

resize: vertical;

textarea的是大小可调整垂直。

resize: both;

textarea的是可调整大小的两个水平和垂直方向。

＃CSS文本对齐

如何定义元素的文本内容是水平排列。

text-align: left;

文本内容对齐的左侧。

text-align: right;

文本内容被对准到右边。

text-align: center;

文本内容居中。

text-align: justify;

文字内容是有道理的。

＃CSS文本修饰

如何定义元素的文本内容的装饰。

default text-decoration: none;

删除任何文本修饰。

text-decoration: underline;

强调文本内容。

＃CSS文本缩进

定义元素的文本第一行的缩进。

default text-indent: 0;

该文本是不缩进。

text-indent: 40px;

您可以使用数值像的像素，（R）EM，百分比 ...

注意怎么只有第一行缩进。

text-indent: -2em;

您也可以使用负的值。

＃CSS文本溢出

定义隐藏的文本内容，如果它溢出的行为。

default text-overflow: clip;

文字内容是裁剪和不可访问。

text-overflow: ellipsis;

该溢出的内容被替换用省略号：…

＃CSS文字阴影

定义文本内容的影子。

default text-shadow: none;

之后文本内容已没有阴影。

text-shadow: 2px 6px;

你至少需要两个值：

  • 第一种是在水平方向偏移
  • 第二个是垂直偏移

阴影颜色将从文本颜色继承。

text-shadow: 2px 6px red;

您可以定义一个颜色作为最后的值。

正如color，你可以使用颜色名称，十六进制，RGB，HSL ...

text-shadow: 2px 4px 10px red;

可选的第三个值定义模糊的影子。

颜色会跨越10px的在这个例子中被扩散，从不透明到透明的。

＃CSS文本转换

定义文本内容应该如何改变。

default text-transform: none;

删除任何文本转换：文本将出现在相同的HTML代码。

text-transform: capitalize;

打开的第一个字母每个字变成了大写字母。

text-transform: uppercase;

打开所有的字母为大写字母。

text-transform: lowercase;

打开所有的字母为小写字母。

＃CSS顶部

定义根据其上边缘的元件的位置。

default top: auto;

该元件将保持在其自然位置。

top: 20px;

如果该元素是在适当的位置相对，所述元件将移动向上通过由限定的量最高值。

top: 0;

如果该元素处于位置绝对的，元素本身会从位置上方的首先定位的祖先。

＃CSS变换原点

定义由定义的转换原点transform属性。

default transform-origin: 50% 50% 0;

变换原点在中心的元素。

transform-origin: 20px 70%;

您可以使用2个值：

  • 的第一个值是水平轴
  • 第二个是垂直轴

transform-origin: top right;

您可以使用组合位置的关键字：center，top，bottom，left和right。

transform-origin: center bottom;

当使用关键字，您可以更改订单轴的，只要每个关键字是明确的。

＃CSS变换

定义元素如何转换。

default transform: none;

删除任何改造。

transform: translateX(40px);

移动的元素水平轴。

transform: translateY(20px);

移动的元素垂直轴。

transform: translateY(100%);

可以使用百分比值：百分比是相对于元件本身，而不是父。

transform: translate(20px, -10%);

您可以translate()有两个值：

  • 的第一个值是在水平轴
  • 所述第二值是垂直轴

transform: scaleX(1.5);

规模上的元素水平轴。

transform: scaleY(0.4);

缩放的元素垂直轴。

transform: scaleY(-2);

你可以用消极的价值观：它会反转的元素。

transform: scale(0.8, 0.8);

您可以scale()有两个值：

  • 的第一个值是在水平轴
  • 所述第二值是垂直轴

通过使用两个相同的值，则可以按比例缩放。

transform: rotate(45deg);

旋转元件。

您可以使用：

  • 度从0到360deg
  • gradians从0到400grad
  • 弧度从0到2πrad
  • 原来从0到1turn

transform: skewX(15deg);

歪斜上的元件的水平轴。

transform: skewY(45deg);

歪斜的元素垂直轴。

transform: skew(10deg, -20deg);

您可以skew()有两个值：

  • 的第一个值是在水平轴
  • 所述第二值是垂直轴

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

您可以将多个中间用空格分隔的转换。

＃CSS过渡延迟

定义转换有多久前等待的时间开始。

default transition-delay: 0s;

过渡将等待零点几秒，因此马上开始。

transition-delay: 1.2s;

您可以使用十进制值中秒的关键字s。

transition-delay: 2400ms;

您可以使用毫秒代替秒，关键字ms。

transition-delay: -500ms;

您可以使用负值：转型开始就好像它已经被打了500ms。

＃CSS过渡期限

定义过渡持续多久。

default transition-duration: 0s;

过渡会持续零秒，因此是瞬间。

transition-duration: 1.2s;

您可以使用十进制值中秒的关键字s。

transition-duration: 2400ms;

您可以使用毫秒代替秒，关键字ms。

＃CSS转换属性

定义哪些属性将过渡。

default transition-property: all;

该元素将转型的所有属性：

transition-property: none;

该元素将转型没有财产：过渡从而瞬间。

transition-property: background;

该元素将只TRANSTION的背景属性。

transition-property: color;

该元素将只TRANSTION的颜色属性。

transition-property: transform;

该元素将只TRANSTION的变换属性。

＃CSS转换定时功能的

如何定义之间的值开始和结束计算的过渡。

default transition-timing-function: ease;

过渡慢慢开始，中间的加速，并在结束减慢。

transition-timing-function: ease-in;

过渡开始慢慢地，逐渐加速，直到结束。

transition-timing-function: ease-out;

过渡很快开始，并逐渐减速，直到结束。

transition-timing-function: ease-in-out;

像ease，但更明显。

过渡很快开始，并逐渐减速，直到结束。

transition-timing-function: linear;

过渡有一个*恒定的速度。

transition-timing-function: step-start;

过渡跳跃瞬间的最终状态。

transition-timing-function: step-end;

过渡停留在初始状态，直到最后，当它立即跳转到最终状态。

transition-timing-function: steps(4, end);

通过使用steps()带有整数，你可以定义一个特定的数字达到年底前的步骤。元素的状态会不会逐渐变化的，而是跳跃的州在不同的时刻。

＃CSS转换

为速记属性transition-property transition-duration transition-timing-function 和 transition-delay。

仅transition-duration被需要。

transition: 1s;

  • transition-duration被设置到1s
  • transition-property 默认为all
  • transition-timing-function 默认为ease
  • transition-delay 默认为0s

transition: 1s linear;

  • transition-duration被设置到1s
  • transition-property 默认为all
  • transition-timing-function被设置到linear
  • transition-delay 默认为0s

transition: background 1s linear;

  • transition-duration被设置到1s
  • transition-property被设置到background
  • transition-timing-function被设置到linear
  • transition-delay 默认为0s

transition: background 1s linear 500ms;

  • transition-duration被设置到1s
  • transition-property被设置到background
  • transition-timing-function被设置到linear
  • transition-delay被设置到500ms

transition: background 4s, transform 1s;

您可以将多个属性用自己的过渡时间。

＃CSS空白

定义元素的空白将被如何处理。

default white-space: normal;

的空间序列被合并成一个。
换行被忽略。
文本内容被包裹。

white-space: nowrap;

的空间序列被合并成一个。
换行被忽略。
文字内容是没有包装的，并保持在一个单行。

white-space: pre;

白色空间究竟保留。

  • 的空间序列被保留
  • 行只对新的生产线，并突破 <br>

white-space: pre-wrap;

白色空间大多保存完好。

  • 的空间序列被保留
  • 线打破新的生产线，<br>但也达到了元素的结尾时，

white-space: pre-line;

只有新的生产线将被保留。

  • 的空间序列组合成一个
  • 线打破新的生产线，<br>但也达到了元素的结尾时，

＃CSS宽

限定了元件的宽度。

default width: auto;

元件将自动地调整其宽度，以允许正确地显示其内容。

width: 240px;

您可以使用数值像的像素，（R）EM，百分比 ...

width: 50%;

如果使用的百分比，其值是相对于容器的宽度。

＃CSS将变

定义哪些属性预期在未来改变（无论是通过CSS或JavaScript）。

default will-change: auto;

不告诉浏览器优化的任何财产。

will-change: scroll-position;

告诉浏览器优化元素的滚动位置，因为它可能会在未来改变。

will-change: contents;

告诉浏览器优化元素的内容，因为它可能会在未来改变。

will-change: box-shadow;

您可以指定任何其他的CSS 属性。例如，这告诉浏览器优化元素的箱阴影，因为它可能会在未来改变。

＃CSS字断

定义达到行的末尾时的话应该怎么休息。

default word-break: normal;

有没有空间的话会不会打破。不间断的字符序列将在一行中显示。

word-break: break-all;

以无间隙的话会打破，因为它们到达行末，尽快。

＃CSS字间距

定义文本块的字之间的间隔。

default word-spacing: normal;

字符之间的间隔是正常。

word-spacing: 5px;

您可以使用像素值。

word-spacing: 2em;

可以使用的EM的值：这允许间隔保持相对的字体大小。

＃CSS z索引

定义了顺序的元素的z轴* 8。它仅适用于定位的**元（什么距static）。

default z-index: auto;

顺序是由顺序定义HTML代码：

  • 首先在代码=后面
  • 最后在代码=前

z-index: 1;

的z索引值是相对于其他的。目标元素是运动前的兄弟姐妹。

z-index: -1;

您可以使用负值。目标元素是移动在后面的兄弟姐妹。