不使用宽度和高度或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定位操作的动态元素大小的详细内容。