首頁  >  文章  >  web前端  >  透過CSS定位操作的動態元素大小

透過CSS定位操作的動態元素大小

不言
不言原創
2018-11-07 16:23:032979瀏覽

這篇文章跟大家介紹的是關於透過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);  
  }

完整程式碼:










<div class="mask"></div>

以上是透過CSS定位操作的動態元素大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn