通过CSS定位操作的动态元素大小

互联网 18-11-7

这篇文章给大家介绍的是关于通过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>

以上就是通过CSS定位操作的动态元素大小的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css