Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 细说盒模型
Blogger Information
Blog 21
fans 0
comment 0
visits 14734
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
细说盒模型
Yuming
Original
967 people have browsed it

细说盒模型

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

老师用的是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设置高度，但是最终高度自动等高对齐

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：盒模型知识点众多, 咱们学的只是重点而已
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post