作者:猫儿 | 来源:互联网 | 2020-08-17 06:11
这篇文章给大家介绍的是关于通过CSS定位操作的动态元素大小的内容,有感兴趣的朋友可以看一看,话不多说,我们直接看来看具体的内容。
不使用宽度和高度或JS给体积提供元素的小技巧。
这是一个很简单的技巧,但是很多人不知道。(推荐教程:CSS视频教程)
假设你想制作一个包含每个屏幕100px以外的所有屏幕的模式框,你将如何解决这个问题?
假设你想要制作一个覆盖所有屏幕的模态框,除了每个边界的100px,你会如何解决这个问题?
HTML
首先我们需要添加一个属性 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。
完整代码:
现在,假设你想在模式框下面添加遮罩,完全一样的想法!
以下是解决方案:
HTML:
CSS
.mask{
position:fixed;
z-index:2;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0.8);
}
完整代码:
以上就是通过CSS定位操作的动态元素大小的详细内容,更多请关注 第一PHP社区 其它相关文章!