这篇文章给大家介绍的是关于通过CSS定位操作的动态元素大小的内容,有感兴趣的朋友可以看一看,话不多说,我们直接看来看具体的内容。
不使用宽度和高度或JS给体积提供元素的小技巧。
这是一个很简单的技巧,但是很多人不知道。(推荐教程:CSS视频教程)
假设你想制作一个包含每个屏幕100px以外的所有屏幕的模式框,你将如何解决这个问题?
假设你想要制作一个覆盖所有屏幕的模态框,除了每个边界的100px,你会如何解决这个问题?
HTML
<div class="popup">some content</div>
首先我们需要添加一个属性 position:fixed到我们的div。
之后我们想要从视口的每一侧定位模态框100px, 为什么我们不应该给它全部4位置属性参数(顶部,右侧,底部,左侧)?
解决方法是,你可以给出固定/绝对定位的所有4个参数,top:100px,right:100px,bottom:100px; left:100px;。
通过这样做,您可以从每侧100px相应地制作动态元素大小。
CSS
.popup{ position:fixed; z-index:5; left:100px; right:100px; top:100px; bottom:100px; /*some styles*/ background-color:#ccc; border-radius:10px; border:solid 3px #000; padding:20px; }
结果div是一个自动大小模式框,没有一行JS。
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .popup{ position:fixed; z-index:5; left:100px; right:100px; top:100px; bottom:100px; background-color:#ccc; border-radius:10px; border:solid 3px #000; padding:20px; } </style> </head> <body> <div class="popup">文字内容</div> </body> </html>
现在,假设你想在模式框下面添加遮罩,完全一样的想法!
以下是解决方案:
HTML:
<div class="mask"></div>
CSS
.mask{ position:fixed; z-index:2; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.8); }
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .popup{ position:fixed; z-index:5; left:100px; right:100px; top:100px; bottom:100px; background-color:#ccc; border-radius:10px; border:solid 3px #000; padding:20px; } .mask{ position:fixed; z-index:2; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.8); } </style> </head> <body> <div class="popup">文字内容</div> <div class="mask"></div> </body> </html>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容