收藏
天蓬老师批改状态：合格
老师批语：这样的细节, 可能不少并没有关注, 但却是很有意思 的
<style>/*利用em实现间隙*/:root{font-size: 0.5em;}.main { width: 100%;height: 20em;}.main h1{text-align: center;}.left {box-sizing: border-box;float: left;width: 40%;height: 10em;border: 1px solid;border-radius: 1em;}.right {box-sizing: border-box;float: left;width: calc( 60% - 1em);height: 10em;border: 1px solid;border-radius: 1em;margin-left: 1em;}/*利用%实现间*/main{width: 100%;height: 20em;}main h1{text-align: center;}.zuo{box-sizing: border-box;float: left;width: 40%;height: 10em;border: 1px solid;border-radius: 1em;}.you{box-sizing: border-box;float: left;width:59% ;height: 10em;border: 1px solid;border-radius: 1em;margin-left: 1%;}</style>
<body><div class="main"><h1>利用em实现间隙</h1><div class="cs"><p>em实现间隙</p></div><div class="left"></div><div class="right"></div></div></div><main><h1>利用%实现间隙</h1><div class="test"><p>%实现间隙</p></div><div class="zuo"></div><div class="you"></div></main></body>
-窗口最大化时
-窗口较小时
-总结
1.使用em时，间隙不会随浏览器窗口的大小发生变化而变化。
2.使用%时，间隙会随着浏览器的变化而发生变化，当屏幕分辨率较大时，使用%会影响网页的美观。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
