Blogger Information
Blog 3
fans 0
comment 0
visits 1964
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示列间隙的二种设置方案,并比较异同
ジ蠢ゼ猪ッ
Original
534 people have browsed it

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

  1. <style>
  2. /*利用em实现间隙*/
  3. :root{font-size: 0.5em;}
  4. .main { width: 100%;height: 20em;}
  5. .main h1{text-align: center;}
  6. .left {
  7. box-sizing: border-box;float: left;width: 40%;height: 10em;border: 1px solid;border-radius: 1em;
  8. }
  9. .right {
  10. box-sizing: border-box;float: left;width: calc( 60% - 1em);height: 10em;border: 1px solid;border-radius: 1em;margin-left: 1em;
  11. }
  12. /*利用%实现间*/
  13. main{width: 100%;height: 20em;}
  14. main h1{text-align: center;}
  15. .zuo{
  16. box-sizing: border-box;float: left;width: 40%;height: 10em;border: 1px solid;border-radius: 1em;
  17. }
  18. .you{
  19. box-sizing: border-box;float: left;width:59% ;height: 10em;border: 1px solid;border-radius: 1em;margin-left: 1%;
  20. }
  21. </style>
  1. <body>
  2. <div class="main">
  3. <h1>利用em实现间隙</h1>
  4. <div class="cs"><p>em实现间隙</p></div>
  5. <div class="left"></div>
  6. <div class="right"></div>
  7. </div>
  8. </div>
  9. <main>
  10. <h1>利用%实现间隙</h1>
  11. <div class="test"><p>%实现间隙</p></div>
  12. <div class="zuo"></div>
  13. <div class="you"></div>
  14. </main>
  15. </body>

-窗口最大化时

-窗口较小时

-总结
1.使用em时,间隙不会随浏览器窗口的大小发生变化而变化。
2.使用%时,间隙会随着浏览器的变化而发生变化,当屏幕分辨率较大时,使用%会影响网页的美观。

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