CSS常用实例，web前端开发者不知道这些就太low了

<!--
表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。
好处：不用考虑左右内容的高度，两个td的高度始终相同，也不用清除浮动
坏处：但总是感觉这种实现方式比较low，不够优雅。
-->

<table>
<tr>
    <td>left</td>
  <td>right</td>
</tr>
</table>

<!--
左右浮动实现方式，也是前端开发最常用的一种实现方式。
好处：代码相对优雅，并且符合div+css布局网站的风格
坏处：要设置元素的宽度，控制不好，有可能换行展示，并且要对父元素清除浮动
-->

<style>
.clearfix{ overflow: hidden; zoom:1; }
.left{ float: left; width: 30%; min-height: 200px; background: #f00; overflow: hidden;}
.right{ float: left; width: 70%; background: #0f0; overflow: hidden;}
</style>
<div class="clearfix">
<div class="left">
  left
</div>
<div class="right">
  right
</div>
</div>

<!--
左右都用position: absolute;实现。
这种实现有个很大的缺点：父元素无法被撑开, 这种实现方式被大部分使用场景抛弃
-->
<style>
  .panel{ position: relative;}
  .p-left{ position: absolute; width: 30%; background: #f00;}
  .p-right{ position: absolute; width: 70%; background: #0f0; left: 30%;}
</style>
<div class="panel">
<div class="p-left">
  left
</div>
<div class="p-right">
  right
</div>
</div>

<!--
对上面的方法稍加改动，左侧浮动+定位，右侧设置margin-left来实现。
这种实现方式是很多博客中左侧固定菜单，右侧内容弹性布局最常用的实现方式
-->
<style>
  .panel {
      overflow: hidden;
  }

  .p-left {
      position: relative;
      float: left;
      width: 30%;
      background: #f00;
  }

  .p-right {
      margin-left: 30%;
      background: #0f0;
  }
</style>
<div class="panel">
  <div class="p-left">
      left
  </div>
  <div class="p-right">
      right<br>
      more<br>
      content
  </div>
</div>
<div>
  other element
</div>

<!--
前提：元素宽高固定
实现原理：先让元素的凭意一点与浏览器窗口正中央位置重合，这里选择左上角，然后再让元素向左偏移宽度的一半，向上偏移高度的一半。
-->
<style>
    .panel {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 200px;
        margin-left: -150px;
        margin-top: -100px;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

<!--
如果你是在移动端开发，或者不考虑IE低版本浏览器兼容问题，你可以用transform: translate(-50%, -50%);来实现。
这种实现方式，不要求宽高固定
-->
<style>
    .panel {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 200px;
        /*margin-left: -150px;*/
        /*margin-top: -100px;*/
        -webkit-transform: translate(-50%, -50%);
        background: #0aa;
    }
</style>
<div class="panel">

</div>

<!--
试验一：宽高都设置为50%，好像并没有效果
-->
<style>
    .panel {
        width: 50%;
        height: 50%;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

<!--
试验二：在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果
-->
<style>
    html, body{
      height: 100%;
    }
</style>

<!--
到现在你应该思考一个问题，width, height的百分比，是以谁为标准设置的？
它们都是以父元素的宽高为标准，然后取对应的百分比值。
我们要想实现等比缩放，只能有一个标准，比如都是宽度为标准的话，是不是就好办了？看下面的margin, padding的设置
效果：屏幕宽度发生变化时，margin-left, padding-top的大小也在随之改变，这样我们就已经实现了元素的等比缩放了
原理：margin,padding的百分比设置时，是以父元素的width为标准
-->
<style>
    html, body{
        height: 100%;
    }
    .panel {
        width: 50%;
        /*height: 50%;*/

        margin-left: 10%;
        padding-top: 20%;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

<!--
有了上面的等比缩放效果，就可以写出朋友圈图片的9宫格效果，这里不写代码了。
直接给个链接地址吧：http://demos.pxuexiao.com/scale/wx.html-->