写css需要注意的地方

前言

曾经何时，听到某人讲过。写静态页面就多试试一定可以试出来的，处理兼容性就多在几个其他浏览器上试试就好了（这样做适合新手）。

正文

我还真按照某人所说去这样写Css了。然后要实现这样一个效果：

就写出这样的代码：

body{
  margin:0;
  background-color: orange;

  .content{
    width: 750px;
    height: 280px;
    background-color: blue;
    &__footer1{
      float: left;
      width: 375px;
      height: 20px;
      background-color: blue;
      border-radius: 0 0 0 100%;
    }
    &__footer2{
      float: left;
      width: 375px;
      height: 20px;
      background-color: blue;
      border-radius: 0 0 100% 0;
    }
  }
}

这样代码是可以呈现出效果。1.可是使用了太多额外的标签了，影响DOM树的渲染和我们后期的维护以及控制这个效果位置也是比较难。2.并且高度写死，我们换一个其他宽高就不可以使用了。

改进1：

@content-hight:190px;
@border-radius-hight:280px - 190px; 

body{
  margin:0;

  .content{
    box-sizing: border-box;
    width: 750px;
    height: @content-hight;
    padding-top: @content-hight;
    margin:10px auto;
    margin-bottom: @border-radius-hight;
    background-color: blue;
    &::before{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: @border-radius-hight;
      background-color: blue;
      border-radius: 0 0 0 100%;
    }
    &::after{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: @border-radius-hight;
      background-color: blue;
      border-radius: 0 0 100% 0;
    }
  }
}
div:nth-of-type(2){
  background-color: pink;
}

这里使用了伪元素来代替了额外的标签，可是需要我们来定3个地方的长度，分别是上部分的高，上部分的宽，下部分的高。这时组长不满意了。实现个效果还要我定3个长度？？

改进2：

@content-height:340px;

body{
  margin:0;

  .content{
    box-sizing: border-box;
    width: 1000px;
    height: @content-height;
    margin:10px auto;
    margin-bottom:calc(@content-height * 0.45);
    background-color: blue;
    &::before{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * 0.45);
      background-color: blue;
      border-radius: 0 0 0 100%;
      transform: translateY(calc(100% * 2.2));
    }
    &::after{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * 0.45);
      background-color: blue;
      border-radius: 0 0 100% 0;
      transform: translateY(calc(100% * 2.2));
    }
  }
}

div:nth-of-type(2){
  background-color: pink;
}

经过测量UI图片可以发现，这个效果的上半部分与下半部分的高度比例大概是6.9比3.1的。这个很接近黄金比例6.67比3.33了呀。。。。。。。。那么我们就可以通过上半部分的高度推出下半部分的高度了。那么我们只有设置上半部分的宽高就可以了。

@content-height:340px;

body{
  margin:0;

  .content{
    box-sizing: border-box;
    width: 1000px;
    height: @content-height;
    margin:10px auto;
    margin-bottom:calc(@content-height * 0.45);
    background-color: blue;
    &::before{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * 0.45);
      background-color: blue;
      border-radius: 0 0 0 100%;
      transform: translateY(calc(100% * 2.2));
    }
    &::after{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * 0.45);
      background-color: blue;
      border-radius: 0 0 100% 0;
      transform: translateY(calc(100% * 2.2));
    }
  }
}

div:nth-of-type(2){
  background-color: pink;
}

可是这样实现了，还是不好，应该如果其他人看我写的less 一定会迷糊，这个0.45 是什么？？ 2.2又是什么？？

那么我们可以继续优化:

@content-height:340px;

body{
  margin:0;

  .content{
    box-sizing: border-box;
    width: 1000px;
    height: @content-height;
    margin:10px auto;
    margin-bottom:calc(@content-height * (3.1 / 6.9));
    background-color: blue;
    &::before{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * (3.1 / 6.9));
      background-color: blue;
      border-radius: 0 0 0 100%;
      transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));
    }
    &::after{
      content: "";
      display: inline-block;
      width: calc(100% / 2);
      height: calc(100% * (3.1 / 6.9));
      background-color: blue;
      border-radius: 0 0 100% 0;
      transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));
    }
  }
}

div:nth-of-type(2){
  background-color: pink;
}

这里使用transform来移动伪元素，我们也可以使用margin实现。其中：

transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));

-0.5px 因为要考虑到舍入。然后看看兼容性，发现其实如果不支持CSS3的浏览器，也只是显示这样的内容，我们是可以接受的。

还可以再优化，这边使用了这么多calc() 使用原生的css进行计算。其实我们完全可以使用less帮我们计算。把所有的calc()都改为less的计算，那么可以节省客户的CPU资源。

总结

从前面例子可以看出写css，不仅仅实现了显示相近就好。我们还需要：

1. 用尽量少的标签去实现。
2. 用尽量少的css代码实现，节省网络传输的带宽。
3. css代码可读性要高。
4. 注意低版本浏览器用户的体验，注意css的兼容性。
5. 最好不要写死宽高度，最好是按照内容的多少来撑开盒子，这样好维护。