CSSでdivサイズを設定するにはどうすればいいですか?-フロントエンドQ&A-php.cn

CSSでdivサイズを設定するにはどうすればいいですか?

藏色散人

リリース： 2023-01-05 16:11:17

オリジナル

2693 人が閲覧しました

CSS で div サイズを設定する方法: 最初に HTML サンプルファイルを作成し、次に本文に div を作成し、最後に div の幅と高さの属性を設定します。

CSSでdivサイズを設定するにはどうすればいいですか?

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

HTML では、div タグ要素は要素のサイズ (幅と高さ) を設定できるブロック要素です。では、どのように設定すればよいのでしょうか?以下の記事で紹介していますので、ご参考になれば幸いです。

まずはブロック要素について知ろう

代表的なブロック要素はdiv、その他p、nav、side、header、footer、section、article、ul-li、address 待てよ、itすべて div を使用して実現できます。ただし、プログラマーがコードを解釈しやすくするために、コードを読みやすくし、エラーをチェックしやすくするために、一般に特定のセマンティックタグが使用されます。

ブロック要素の機能:

1. 高さ、行の高さ、マージン、パディングはすべて制御できます。

2. 常に新しい行で開始し、行全体を占有します。つまり、自動的に行を折り返すことができます。

3. インライン要素やその他のブロック要素に対応できます。

4. 帯域幅は、コンテンツに関係なく、常にブラウザの幅と同じです。

5. 複数のブロック要素タグはまとめて記述され、デフォルトの配置は上から下です。

#[推奨学習:

css ビデオチュートリアル]

CSS で div サイズを設定するにはどうすればよいですか?

CSS では、width 属性と height 属性を使用して div サイズを設定できます。 width 属性は要素の幅を設定し、height 属性は要素の高さを設定します。

幅属性と高さ属性は、要素のコンテンツ領域の幅と高さを定義します。コンテンツ領域の外側にパッド、境界線、およびマージンを追加できます。

例:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style type="text/css">
   div{
   border: 1px solid red;
   }
   .box{
   width: 300px;
   height: 100px;
   }
   </style>
</head>
<body>
  <div>普通div</div><br />
  <div class="box">设置宽度为300px，高度为100px的div</div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSでdivサイズを設定するにはどうすればいいですか?