CSS の位置決め操作による動的な要素のサイズ-CSSチュートリアル-php.cn

CSS の位置決め操作による動的な要素のサイズ

不言

リリース： 2018-11-07 16:23:03

オリジナル

3032 人が閲覧しました

この記事では、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);  
  }

ログイン後にコピー

完全なコード:









文字内容
<div class="mask"></div>

ログイン後にコピー

以上がCSS の位置決め操作による動的な要素のサイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CSS の位​​置決め操作による動的な要素のサイズ

CSS の位置決め操作による動的な要素のサイズ