主流技术——CSS布局列间隙的二种设置方案,附源码 - 前端学习笔记

首页 > 博客列表 > 主流技术——CSS布局列间隙的二种设置方案,附源码

博主信息

博文 65

粉丝 2

访问量 74964

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

张福根一修品牌运营

原创

1156人浏览过

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

案例展示：

案例分析：

<!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，保证了间隙是固定的(相对于当前字号)

批改老师：

天蓬老师

批改状态：合格

老师批语：不错, 这个函数非常常用

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

速记Laravel7 Artisan 使用技巧｜附lavarel artisan 命令大全

2021-01-11 15:32:45

案例展示：

案例分析：

案例总结：

二种实现方法及对比：