はブロックレベルの要素です。 display:block を設定すると、要素がブロック レベルの要素として表示されます。次のコードは、インライン要素 a をブロック要素に変換し、a 要素がブロック要素の特性を持つようにします。 a{display:block;}ログイン後にコピー
1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (とても横暴で、ブロックレベルの要素が独自の行を占有します)
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
3. 幅が設定されていない場合、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。
要素の分類 -- インライン要素 HTML では、、、
div{ display:inline; }......<div>我要变成内联元素</div>ログイン後にコピー
インライン要素の特徴:
1. 他の要素と同じ行にある
上下の余白 を設定することはできません。幅はそこに含まれるテキストまたは画像の幅であり、変更することはできません。
要素の分類 - インライン ブロック要素 インライン ブロック要素 (inline-block) は、インライン要素とブロック要素の両方の特性を備えています。コード display:inline-block は、要素をインライン ブロック形状要素として設定します。 (css2.1 の新機能)、 タグはそのようなインライン ブロック タグです。 inline-block 要素の特徴: 1. 他の要素と同じ行にあります。
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
ボックスモデル - ボーダー (1)
ボックスモデルのボーダー
は、コンテンツ
とフィラー
を囲む線であり、この線の太さ
、スタイル
、色を設定できます。 . (ボーダーの 3 つの属性)。 たとえば、次のコードは、境界線の太さ 2px、ソリッド スタイル、赤色の境界線を設定する div です:
div{ border:2px solid red;}ログイン後にコピー
div{ border-width:2px; border-style:solid; border-color:red;}ログイン後にコピー
dashed（虚线）| dotted（点线）| solid（实线）。
ログイン後にコピー
border-color:#888;//前面的井号不要忘掉。
ログイン後にコピー
rrree
ボックス モデル - ボーダー (2)
ここで、p タグの下のボーダーを個別に設定したい場合はどうすればよいでしょうか。他の3辺に境界線のスタイルを設定していないのですか? CSS スタイルを使用すると、一方向のみの境界線のスタイルを設定できます:
thin | medium | thick（但不是很常用），最常还是用象素（px）。
ログイン後にコピー
div{border-bottom:1px solid red;}ログイン後にコピー
ボックスモデル 幅と高さは、私たちが通常考えるオブジェクトの幅と高さとは異なります。CSS で定義される幅と高さは、パディング内の コンテンツ範囲
を指します。
したがって、 要素の実際の幅
(ボックスの幅) = 左ボーダー + 左ボーダー + 左パディング + コンテンツの幅 + 右パディング + 右ボーダー + 右ボーダー。
要素の高さについても同様です。
例: css コード:
border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;
ログイン後にコピー
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }ログイン後にコピー
要素の実際の長さは、10px+1px+20px+200px+20px+1px+10px=262px です。以下に示すように、Chrome ブラウザーで要素ボックス モデルを表示できます。
ボックス モデル --filling
要素content
とborder
の間の距離を設定できます。これは、「」と呼ばれます。 いっぱい
" "。塗りつぶしは上、右、下、左（時計回り）に分けることもできます。次のコード:
<body> <div>文本内容</div></body>
ログイン後にコピー
div{padding:20px 10px 15px 30px;}ログイン後にコピー
上下左右のパディングがすべて 10px の場合は、次のように記述できます
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}ログイン後にコピー
div{padding:10px 20px;}ログイン後にコピー
盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}ログイン後にコピー
也可以分开写：
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}ログイン後にコピー
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}ログイン後にコピー
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}ログイン後にコピー
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
我的公众号二维码
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
