css菜鸡的自我救赎

0. 前言

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

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

1. 一些实践方案深刻浅出

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，由于有一个边线😊。对于这个栏的上面，是padding仍是margin呢？实际上，在这个状况下都是同样的，可是有一个潜在问题：若是有两行，并且垂直方向还有其余盒子的margin，那么就会发生垂直方向的margin坍塌（取较大值）;或者当有父盒子包裹，他的margin会走到外面影响外面。这时候，又要加上转化为bfc的代码。

• case1:

  

• case2:

  

还敢乱来居中吗

好比，有一个设计稿是这样的：

可能看起来是居中，而后很快写出来子绝父相的万金油居中。而后设计忽然走过来讲，怎么老是感受有点不对啊，因而看一下下半部分：

真的不是居中啊，水平方向的也是。那么，这时候，写死margin不就搞定了，保证视觉不来找你。

🐦...许多天后，测试说，某某手机视觉就出问题了。固然，写死px确定药丸啊，因此移动端就是要用rem解决。我这里一个rem等于50px，那换算一下，图上第一个div（绿色的钩）的margin就是176 148 0 151，换成rem是3.52 2.96 0 3.02，后面的样式问题只要不是横屏或者ipad的（无视觉稿的前提）都不是你的锅了。

负的margin

正的就是撑开整个margin-box，那负的咱们就能够想象出来，吃掉这个margin-box。通常的状况下，就是平移。若是加上了float就神奇了，还能跨行平移。双飞翼和圣杯布局其中一部分就是利用这个原理

前面都是废话，不就是一个盒子模型嘛。没错，盒子模型，谁都知道，可是用起来谁用的好，这就难说了

2. 开始试试水

接下来，准备用n种方法实现三列布局，中间自适应，两边固定宽度

绝对定位

html:

<div class="container">  
   <div class="m">中间</div>
  <div class="l">左边</div>
  <div class="r">右边</div>
 </div>
复制代码

css:

.container{
  position: relative;
  height: 100px;
}
.l, .m, .r {
  height: 100px;
  position: absolute;
}

.l {
  background: #f00;
  width: 100px;
}

.m {
  background: #0f0;
  width: calc(100% - 150px);
  margin: 0 50px 0 100px;
}

.r {
  background: #00f;
  width: 50px;
  right: 0;
}
复制代码

分析：不论顺序，流式布局，中间先加载，但用了calc

"calc?! 避免recalculate啊"

这时候，去吧，ie盒模型：

.m {
  background: #0f0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px 0 100px;
}
复制代码

看一下对比：

圣杯与双飞翼布局

仍是同样的html

.container {
  height: 100px;
  width: 100%;
  padding: 0 50px 0 100px;
}

.m, .l, .r {
  height: 100px;
  float:left;
}

.m {
  background: #f00;
  width: 100%;
}

.l {
  background: #0f0;
  width: 100px;
  margin-left: -100%;
  position: relative;
  left: -100px;
}

.r {
  background: #00f;
  width: 50px;
  margin-right: -50px;
}
复制代码

不少人说这个难懂，其实咱们能够一步步来：先放好容器设好宽高背景，三个div是mlr顺序。而后float，显然m本身占一行，其余两个占一行。

接着，用到负margin，先把左边到移动一行，便是-100%，右边就移动一个身位-50px就ok，如今已是视觉上的3列。最后，中间部分开头被遮住，并且占了100%行宽。那么咱们只能用容器的padding或者本身的margin压本身。

若是是用容器padding，将左右两边腾出来，刚恰好放下lr两个div。最后，l和r仍是在m里面，因此还要移一下，relative就好。这就是圣杯布局

若是是用本身的margin压本身，那么就须要多一个div包住本身。前面步骤同样，包住本身的div占满一行，可是自身有margin，完美解决。这就是双飞翼布局。图示和上图基本如出一辙，只是最外那层不是container而是m，真正的展现出来的中间部分是m里面的div，另外，l和r也不用relative了。

<div class="m">
  <div class="margin-setting">
  中间
  </div>
</div>
复制代码

这是传统css+div的一套比较好的解决方案，不过咱们愁的是高的问题了，须要本身设

float+calc

<div class="container">
    <div class="l">左边</div>
    <div class="m">这是中间内容</div>
    <div class="r">右边</div>
  </div>
复制代码

此次的html不能调换顺序写了

.container {
  height: 100px;
  width: 100%;
}

.m, .l, .r {
  height: 100px;
  float: left;
}

.m {
  background: #f00;
  width: calc(100% - 150px);
}

.l {
  background: #0f0;
  width: 100px;
}

.r {
  background: #00f;
  width: 50px;
}
复制代码

相似于前面的absolute方案，calc能够用ie盒子替代

行内元素

是否是遇到过行内元素老是有间隔的问题，html加注释就能够去掉分隔符，固然这里要实现3列布局：

<div class="l">左边</div><!-- --><div class="m">中间</div><!-- --><div class="r">右边</div>
复制代码

css：

.l, .m, .r {
  height: 100px;
  display: inline-block;
}

.l {
  background: #f00;
  width: 50px;
}

.m {
  background: #0f0;
  width: calc(100% - 150px);
}

.r {
  background: #00f;
  width: 100px;
}
复制代码

特色：样式及其脆弱，内容换行立刻崩了，只能在没文字的状况好一点。calc仍是同样的方法，ie盒子完美解决

两个div实现三列

<div class="container" l="左边">中间</div>
  <div class="r">右边</div>
复制代码

左边的内容用attr抓

.container {
  float: left;
  height: 100px;
  background: #f00;
}

.container::before {
  content: attr(l);
  display: block;
  width: 100px;
  float: left;
  height: 100px;
  background: #0f0;
}

.r {
  height: 100px;
  width: 50px;
  float: left;
  background: #00f;
  margin-right: -100%;
}
复制代码

用content作的内容，注定了左边不能再放html元素了

flex与grid

html仍是按顺序：

<div class="container">
    <div class="l">左边</div>
    <div class="m">这是中间内容
    </div>
    <div class="r">右边</div>
</div>
复制代码

你们都知道的flex实现：

.container {
  display: flex;
  height: 100px;
}

.l {
  background: #f00;
  min-width: 100px;
}

.m {
  background: #0f0;
}

.r {
  background: #00f;
  min-width: 50px;
}
复制代码

不过，我更看好grid，符合程序员思惟，一个配置，两行代码，基本搞定大部分场景

.container {
  display: grid;
  grid-template-columns: 100px auto 50px;
  grid-template-rows: 100px;
}

.container div:nth-of-type(1) {
  background: #f00;
}

.container div:nth-of-type(2) {
  background: #0f0;
}

.container div:nth-of-type(3) {
  background: #00f;
}
复制代码

一个div实现

css:

div {
  background: #f00;
  height: 100px;
  margin: 0 50px 0 100px;
  position: relative;
}

div::before {
  content: '左边';
  display: block;
  background: #0f0;
  height: 100px;
  width: 100px;
  position: absolute;
  left: -100px;
}

div::after {
  content: '右边';
  display: block;
  background: #00f;
  height: 100px;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 0;
}
复制代码

固然，只是娱乐而已，项目上谁会写这个。某些小装饰可能有机会上

又瞎搞一堆乱七八糟的，先冷静一下

个人博客即将同步至腾讯云+社区，邀请你们一同入驻：cloud.tencent.com/developer/s…