扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关如何通过CSS定位操作的动态元素大小，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联从2013年创立，是专业互联网技术服务公司，拥有项目网站制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元闻喜做网站,已为上家服务,为闻喜各地企业和个人服务,联系电话:18980820575
假设你想制作一个包含每个屏幕100px以外的所有屏幕的模式框，你将如何解决这个问题？
假设你想要制作一个覆盖所有屏幕的模态框，除了每个边界的100px，你会如何解决这个问题？
HTML
some content
首先我们需要添加一个属性 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定位操作的动态元素大小就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网