溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何通過CSS定位操作動態元素大小”，在日常操作中，相信很多人在如何通過CSS定位操作動態元素大小問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何通過CSS定位操作動態元素大小”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
不使用寬度和高度或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>
到此，關于“如何通過CSS定位操作動態元素大小”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
