css菜鸡的自我救赎

作为一个不喜欢写样式的前端，遇到了直接对外的活动页面的需求，一下炸出一堆问题：

• 单位乱用，rem、vh、vw、px乱用甚至混在一起用
• html冗余，有时候一个div只是为了取margin
• 一个页面用多种布局方案，flex、float、relative+top、absolute+top、margin，自己坑自己
• 各种随意，不严格按照视觉稿 理论倒是熟悉，但用起来还是一塌糊涂。于是，回头自我救赎一波，好好复习基础。flex、grid后面不多作研究，尤其是grid这种一两行就可以搞定很多复杂样式。如果我们不知道新技术是为了什么而来的，解决什么痛点，没有体验一下刀耕火种的时代，又没有一个良好的团队合作能力，做起项目来还真的不一定是“写页面太简单了”这种事情。

1.1 padding

看到百度的顶部，你会想到什么方案呢？

我们看百度搜索的顶部，顶部的head（搜索框这一行都是）是fixed的，紧接着的那个div是一个tab。当然fixed脱离文本流，就用padding把自己的主要内容顶到下面去，不然内容就直接置顶了。

没错，就是很简单的一个css，实现的方法有很多。然后我们再看一下这个视觉效果要怎么实现：

img+脱离文本流的方法?双div+定位？

其实，一个div+padding马上解决，div背景100%然后center+padding-top，div里面的文字就自然到下面去了，然后定位定准就好了。另外，文字换成伪元素也可以。

控制宽高比

一些人也知道，padding的百分比相对于width，那么这样就可以实现了一个等比例的盒子，然后随便缩放都可以了。比如做一个正方形，边长是屏幕宽度一半：

.scale50 {
  background: #aaa;
  width: 50%;
  height: 0;
  text-align: center;
  padding-top: 50%;
}

很多时候，我们需要什么4:3，16:9的图片，就可以用这样的方法解决了。

1.2 margin

再看看百度的右边栏

对于这个栏的左边部分，用margin还是padding呢？这个情况当然是padding，因为有一个边线