CSS ボックスモデルとボックスサイズ設定プロパティの紹介-CSSチュートリアル-php.cn

CSS ボックスモデルとボックスサイズ設定プロパティの紹介

WBOY

リリース： 2022-08-03 11:44:28

転載

1959 人が閲覧しました

この記事では、css に関する関連知識を提供します。主に CSS ボックスモデルと box-sizing 属性の関連問題について紹介します。box-sizing 属性は、要素の合計サイズを計算する方法を定義します。 . width と total height は主にパディングやボーダーを追加するかどうかを設定するものですので、一緒に見ていきましょう。

CSS ボックスモデルとボックスサイズ設定プロパティの紹介

(学習ビデオ共有: css ビデオチュートリアル、html ビデオチュートリアル)

ボックスモデルの定義とカテゴリ

CSS基本ボックスモデルはCSS仕様のモジュールです。それぞれのパディングとマージン
を含む長方形のボックスを定義し、ビジュアル書式設定モデルに基づいて要素を生成し、レイアウトし、配置します。それらを並べて配置します。ボックスモデル、ボックスモデル、ボックスモデルなどと直訳されることが多い。

ボックスモデルには次の分類があります。

標準定義:
- 標準ボックスモデル
- 奇妙なモードボックスモデル
要素タイプ
- ブロックレベルボックス
- インラインボックス
- インラインブロック

標準定義部

1.標準ボックスモデル

幅width = コンテンツ幅(content) padding border margin

コンテンツの幅は content のみです。要素の幅を 100px に設定すると、この要素のコンテンツ領域の幅は 100px になり、任意の borders と padding## 最後に描画された要素の幅に # の幅が追加されます。

2. 奇妙なモードボックスモデル

Width

width = コンテンツ幅(content padding border) margin

コンテンツの幅には、

content、border、padding が含まれます。要素の width が 100px に設定されている場合、この 100px には、その border と padding が含まれます。コンテンツ領域の実際の幅は、width から (border padding) を引いた値です。ほとんどの場合、これにより要素の幅と高さを簡単に設定できます。

3. box-sizing 属性

box-sizing 属性には、以下の 2 つの属性値があります。

box-sizing 属性は、要素の合計の幅と高さを計算する方法を定義し、主にパディングとボーダーを追加する必要があるかどうかを設定します。

たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これは、指定された幅と高さでボックスをレンダリングし、そのボックスに境界線とパディングを配置するようにブラウザーに指示します。

デフォルトでは、要素の幅 (width) と高さ (height) は次のように計算されます。

width (幅) パディング (パディング) ボーダー (ボーダー) ) ) = 要素の実際の幅
#height(height)padding(padding) border(border) = 要素の実際の高さ

1.content -box

デフォルト値。

標準ボックスモデルを使用します。

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

ログイン後にコピー

ブラウザに表示される上記のコードの実際の幅は

390px です。

2. border-box

奇妙なモードボックスモデルを使用します。

.borderBox {
    box-sizing: border-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

ログイン後にコピー

ブラウザに表示される上記のコードの実際の幅は

350px です。

例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style> 
div.container {
  width: 100%;
  border: 2px solid black;
}
div.box {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}
</style>
</head>
<body>
<div class="container">
  <div class="box">这个 div 占据了左边部分</div>
  <div class="box">这个 div 占据了右边部分</div>
  <div style="clear:both;"></div>
</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSS ボックスモデルとボックスサイズ設定プロパティの紹介

例 2:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}
#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}
</style>
</head>
<body>
<h1>通用的 box-sizing</h1>
<p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。
你设置的宽度就是实际的宽度，不需要考虑内边距和边框：</p>
<div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div>
<br>
<div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSS ボックスモデルとボックスサイズ設定プロパティの紹介