在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前言 我们有时候会遇到 <style type="text/css" media="screen"> .test { height: 30vmin; width: 30vmin; background: lightblue; box-sizing: border-box; } .test:hover { border: 5px solid black; } </style> <div class="test"> this is a div. </div> 这里的原因很明显,我们的元素大小并没有变(如果没有设置元素宽高或者 为元素添加边框 贸然出现的边框改变了原有的布局,让内容移动了,既然如此,我们可以在之前的布局中就让边框存在就可以了。 .test { height: 30vmin; width: 30vmin; background: lightblue; border: 5px solid transparent; box-sizing: border-box; } .test:hover { border: 5px solid black; } 使用 box-shadow 使用不占用盒模型空间的 .test:hover { /* border: 5px solid black; */ box-shadow: 0 0 0 5px black; outline: 5px solid black; } 用 padding 我们可以通过改变 .test { height: 30vmin; width: 30vmin; background: lightblue; box-sizing: border-box; padding: 5px; } .test:hover { padding: 0; border: 5px solid black; } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论