CSSスタートノート10:ボックスモデル

ボックスモデルのコンポーネント:境界線、コンテンツ、パディング、マージン。通常、実際の開発では、最初に内側と外側のマージンがクリアされ、実際の状況に基づいて設定されます。

内側の余白:コンテンツと境界線の間の距離を制御します。
パディングを設定する方法:

		padding-方位名词:像素值;

内側の余白の省略規則
ここに画像の説明を挿入

内側のボックスで幅が指定されていない場合、内側のボックスの設定パディングは外側のボックスを開きません。

マージン:ボックス間の距離を制御します。外側の余白の構文は基本的に内側の余白の構文と同じです

余白の適用
1。ボックスをブラウザの水平方向の中央に配置しますが、2つの条件を満たす必要があります。a
。ボックスの幅(幅)が必要
です。b。左右の余白の両方を自動に設定します。

2.インライン要素またはインラインブロック要素を水平方向の中央に配置します。親要素にtext-align:centerを追加します。

3.外側マージンのマージの問題:
a。隣接するブロック要素の垂直外側マージン
ここに画像の説明を挿入
マージするため解決策:1つのボックスにのみ外側マージンを設定します。

b。ネストされたブロック要素の垂直方向のマージンの折りたたみ。つまり、2つの親子ブロック要素の場合、親要素には上部マージンがあり、子要素にも上部マージンがあります。このとき、親要素は大きく折りたたまれます。マージン。
ここに画像の説明を挿入
解決策
1。親要素に境界線を追加します。境界線が視覚効果に影響する場合は、透明(透明)に設定できます
。2。親ボックスに内側の余白を追加します。3。
オーバーフローを追加します:親に非表示要素。このメソッドは変更されません。ボックスサイズ

ボーダーの複合書き込み

      boder: 属性值1 属性值2 属性值3 (没有顺序)
      
      //若只想对上下左右中的一部分边框进行修改,写法如下:
       boder-方位名词: 属性值1 属性值2 属性值3 (没有顺序)

テーブルの境界線のマージ:boder-collapse;プロパティ値が折りたたみの場合、隣接する境界線は自動的にマージされます

:ボックスサイズ=実際のボックスサイズ+ボーダーサイズ+内側マージンサイズ。

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/m0_52021758/article/details/113072265