争怎路由网/网站教程/内容

通过CSS定位设置的动态元素大小

网站教程2022-12-07 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
这篇文章给大家介绍的是关于通过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定位操作的动态元素大小的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:通过CSS定位设置的动态元素大小
 
相关阅读