css 杂谈

​ 这些天，第一次自己做了一个完整项目，过程中发现了各式各样的问题，尤其在css上，一些细枝末节的东西总是导致页面的样式发生错误。特此，写一篇文章来总结一下我在写css中遇到的问题。

布局

  1. box-sizing

​ 我们在实际开发中经常因为盒模型的大小推算失误导致的页面错乱，使用了box-sizing属性之后，就不用再担心这个问题。

box-sizing有三个属性

1
box-sizing: content-box|border-box|inherit;

  • content-box

    这个是 box-sizing 的默认值，也就是容易出问题的一个属性，因为当其的值为 content-box 时候，元素的padding 和 border 属性的值会在元素的宽度和高度属性基础上绘制元素的内边距和边框，举一个例子（源代码如下）：当我们不设置padding和border的时候，宽和高都为200px，但是当我们设置这些值后，宽和高就会变成244px。这就我在上面所说的会在元素的宽度和高度属性基础上绘制元素的内边距和边框。这样的问题总是会在我们写css时困扰我们，因此就出现了第二个属性，也就是最重要的属性border-box。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box-item {
    background: white;
    list-style: none;
    width: 200px; /*注意！ 固定宽高*/
    height: 200px;
    margin: 40px auto;
}
.content-box {
    box-sizing: content-box;
     /*注意！ padding: 20px; */
     /* border: 2px solid red; */
    background: burlywood;
}
  • border-box 当box-sizing设置为border-box 值之后，元素设置内边距和边框都不会再影响元素的宽高。也就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。就上一个例子而言，当我们设置了padding和border之后，其大小仍然还是200px，这个再我们写css时会大量的使用，尤其的重要。
  • inherit 这个属性就是从父元素继承 box-sizing 属性的值，若未设置，默认为 content-box，在此就不过多的赘述了。
  1. css单位

​ css 单位有两种分类，一种是绝对长度，另外一种是相对长队，这里用两个表来分别介绍css中的所有单位：

  • 绝对长度：
单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px 像素 (1px = 1/96th of 1in)
pt 点 (1pt = 1/72 of 1in)
pc 派卡 (1pc = 12 pt)
  • 相对长度：
单位 描述
em 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex 相对于当前字体的 x-height(极少使用)
ch 相对于 “0”（零）的宽度
rem 相对于根元素的字体大小（font-size）
vw 相对于视口宽度的 1%
vh 相对于视口高度的 1%
vmin 相对于视口*较小尺寸的 1％
vmax 相对于视口*较大尺寸的 1％
% 相对于父元素

这些单位中，经常使用的分别是 px vw vh % 。

动画

css 动画

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes规则

这是一个改变div颜色和位置的动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* 动画代码 */
/* 两种不同指定关键帧的方式 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 加上了改变位置的动画 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/* 这里给这个动画加上了一个delay
这个的例子在开始动画前有 2 秒的延迟：
注意，这里使用负值也是可以的：动画将开始播放，就好像它已经播放 2 秒一样：
*/
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
    
  animation-delay: 2s;
    
  animation-delay: -2s;  
}

/* 这里设置了动画运行3次 
当animation-iteration-count设置为infinite时，动画会无止境的持续下去*/
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

亲自试一试

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

亲自试一试

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

亲自试一试