主流技术——CSS布局列间隙的二种设置方案,附源码

实例演示列间隙的二种设置方案,并比较异同

案例展示：

案例分析：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实例演示列间隙的二种设置方案,并比较异同</title>
    <style>
      body {
        background-color: #eee;
        /* 将w3c的盒子转为IE盒子: 盒子大小包括了追加上的padding,border */
        box-sizing: border-box;
      }
      .header {
        color: #fff;
        background-color: lightblue;
        height: 5em;
        border: 1px solid lightskyblue;
      }
      .left,
      .right {
        /* margin-top:20*0.5=10px */
        margin-top: 0.5em;
        background-color: lightyellow;
        height: 10em;
        /* 浮动 */
        float: left;
      }
      .left {
        width: 80%;
      }
      /* 添加列间距 */
      /* 方法1. 百分比 */
      .right {
        width: 19%;
        margin-left: 1%;
      }
      /* 方法2. 百分比 + em */
      .right {
        width: calc(20% - 0.5em);
        margin-left: 0.5em;
      }
    </style>
  </head>
  <body>
    <div class="header">头部通栏100%</div>
    <div>
      <left class="left">左边80%</left>
      <right class="right">右边20%</right>
    </div>
  </body>
</html>

案例总结：

将w3c的盒子转为IE盒子: 盒子大小包括了追加上的padding,border
添加列间距, 其实就是添加margin,可给左列加, 也能加到右列
calc( x + y), “+”操作数前面必须要有”空格”
二种实现方法及对比：

百分比
百分比 + em，保证了间隙是固定的(相对于当前字号)

案例展示：

案例分析：

案例总结：

二种实现方法及对比：

相关文章