這篇文章跟大家介紹的是關於透過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中文網其他相關文章!