ホームページ > 記事 > ウェブフロントエンド > CSS の位置決め操作による動的な要素のサイズ
CSS の位置決め操作による動的な要素のサイズ
- 不言オリジナル
- 2018-11-07 16:23:032990ブラウズ
この記事では、CSS の配置操作による動的要素のサイズの内容を紹介します。興味のある方は、さっそく具体的な内容を見てみましょう。
幅と高さ、または JS を使用せずに要素をボリュームに提供するためのヒント。
これは非常に単純なトリックですが、多くの人はそれを知りません。 (推奨チュートリアル: CSS ビデオ チュートリアル )
1 画面あたり 100 ピクセルを除くすべての画面を含むモーダル ボックスを作成するとします。この問題はどのように解決しますか?
各境界線の 100 ピクセルを除く画面全体をカバーするモーダルを作成するとします。この問題はどのように解決しますか?
HTML
<div class="popup">some content</div>
まず、属性position:fixedをdivに追加する必要があります。
モーダルをビューポートの両側から 100 ピクセルずつ配置したい場合、4 つの位置属性パラメータ (上、右、下、左) をすべて指定すべきではないのはなぜでしょうか?
解決策は、固定/絶対位置の 4 つのパラメーターすべてを指定できることです (上: 100px、右: 100px、下: 100px、左: 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 が 1 行も含まれていない自動サイズ調整モーダル ボックスです。
完全なコード:
<!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 中国語 Web サイトの他の関連記事を参照してください。