search

博客列表 >细说盒模型

细说盒模型

Yuming
Yuming原创
2020年10月23日 00:30:13966浏览

细说盒模型

实例演示列间隙的两种设置方案，比较异同

老师用的是float，这边我使用flex实现同样效果

  1. 百分比方案
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>Document</title>
    7.  <link rel="stylesheet" href="x.css" />
    8. </head>
    9. <body>
    10.  <div class="header">细说盒模型</div>
    11.  <div class="container">
    12.    <div class="left">步子不非得迈得大，只要朝着正确的方向前进就行。</div>
    13.    <div class="right"></div>
    14.  </div>
    15. </body>
    16. </html>
  1. :root {
  2.   font-size: 0.625em;
  3. }
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   box-sizing: border-box;
  8. }
  9. .container {
  10.   display: flex;
  11.   .left {
  12.     width: 70%;
  13.     height: 16em;
  14.     background-color: rgb(36, 36, 36);
  15.   }
  16.   .right {
  17.     background-color: blue;
  18.     width: 29%;
  19.     margin-left: 1%;
  20.   }
  21. }
  1. 百分比 + em 方案
  1. :root {
  2.   font-size: 0.625em;
  3. }
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   box-sizing: border-box;
  8. }
  9. .container {
  10.   display: flex;
  11.   .left {
  12.     width: 70%;
  13.     height: 16em;
  14.     background-color: rgb(36, 36, 36);
  15.   }
  16.   .right {
  17.     background-color: blue;
  18.     width: calc(30% - 1em);
  19.     margin-left: 1em;
  20.   }
  21. }

上面两方法的异同之处可以对比看出

  • 相同点是都能实现列间隙
  • 不同点是方法一实现的间隙依赖视口大小变化，而方法二间隙是一个依赖字号的固定不变的值(一个可变，另一个不变)

自己实现一个等高列的案例

  • 我们用上面百分比 + em 方案的代码可以实现登高列，可以看到，我并没有给right设置高度，但是最终高度自动等高对齐

上一条：1020作业em的意义,并举一个案例来演示它下一条：盒子、em、rem、px、vh、vw区别和应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多