這篇文章跟大家介紹的是關於透過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);
}完整程式碼：
以上是透過CSS定位操作的動態元素大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！
