如何通过CSS定位操作动态元素大小
导读:本文共2275.5字符,通常情况下阅读需要8分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 不使用宽度和高度或JS给体积提供元素的小技巧。 这是一个很简单的技巧,但是很多人不知道。 假设你想制作一个包含每个屏幕100px以外的所有屏幕的模式框,你将如何解决这个问题? 假设你想要制作一个覆盖所有屏幕的模态框,除了每个边界的100px,你会如何解决这个问题? HTML <div... ...
目录
(为您整理了一些要点),点击可以直达。不使用宽度和高度或JS给体积提供元素的小技巧。
这是一个很简单的技巧,但是很多人不知道。
假设你想制作一个包含每个屏幕100px以外的所有屏幕的模式框,你将如何解决这个问题?
假设你想要制作一个覆盖所有屏幕的模态框,除了每个边界的100px,你会如何解决这个问题?
HTML
<divclass="popup">somecontent</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;
/*somestyles*/
background-color:#ccc;
border-radius:10px;
border:solid3px#000;
padding:20px;
}
结果div是一个自动大小模式框,没有一行JS。
完整代码:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:#ccc;
border-radius:10px;
border:solid3px#000;
padding:20px;
}
</style>
</head>
<body>
<divclass="popup">文字内容</div>
</body>
</html>
现在,假设你想在模式框下面添加遮罩,完全一样的想法!
以下是解决方案:
HTML:
<divclass="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);
}
完整代码:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:#ccc;
border-radius:10px;
border:solid3px#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>
<divclass="popup">文字内容</div>
<divclass="mask"></div>
</body>
</html>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
如何通过CSS定位操作动态元素大小的详细内容,希望对您有所帮助,信息来源于网络。