CSSボックスmodel_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSボックスmodel_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:16:09

オリジナル

1234 人が閲覧しました

1. 要素の分類

右側のコードエディターでは、a 要素の幅と高さを設定していることがわかりますが、それらは効果がありません。これは、a がデフォルトで インライン要素 であるためです。 . インライン要素は width と height に設定できません。

インラインブロック要素に変更するだけです。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>内联块状元素</title><style type="text/css">a{ display:inline-block; width:20px;/*在默认情况下宽度不起作用*/ height:20px;/*在默认情况下高度不起作用*/ background:pink;/*设置背景颜色为粉色*/ text-align:center; /*设置文本居中显示*/}</style></head><body><a>1</a><a>2</a><a>3</a><a>4</a></body></html>

ログイン後にコピー

2. ボックスモデル

外枠をボーダーと呼びます。境界マージンパディングには 4 つの方向があります。

3. ボックスモデル分析

3.1 境界線

ボックスモデルの境界線は、コンテンツとフィラーを囲む線です。この線の太さ、スタイル、色（境界線の 3 つの属性）を設定できます。

例えば、以下のコードは枠線の太さ2px、ソリッドスタイル、赤色の枠線を設定するdivです:

div{    border:2px  solid  red;}

ログイン後にコピー

上記は枠線コードの略称で、次のように記述できます。個別に:

div{    border-width:2px;    border-style:solid;    border-color:red;}

ログイン後にコピー

注:

1. ボーダースタイル (ボーダースタイル) の一般的なスタイルは、

dasted (破線) | solid (実線) です。

2. border-color (境界線の色) の色は、次のように 16 進数の色に設定できます:

border-color:#888;//前面的井号不要忘掉。

ログイン後にコピー

3. border-width (境界線の幅) の幅も次のように設定できます:

薄い | 中 | 厚い (ただし、あまり一般的には使用されません)、ピクセル (px) が最もよく使用されます。

ここで質問ですが、pタグに下枠を別途設定したいが、他の3辺には枠のスタイルを設定しない場合はどうすればよいでしょうか？ CSS スタイルを使用すると、一方向のみの境界線のスタイルを設定できます:

div{border-bottom:1px solid red;}

ログイン後にコピー

次のコードを使用して、他の 3 つの側面 (上、右、左) の境界線を設定することもできます:

border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;

ログイン後にコピー

3.2幅と高さ

ボックスモデルの幅と高さは、私たちが通常考えるオブジェクトの幅と高さとは異なります。 CSS で定義される幅と高さは、それが満たされるコンテンツの範囲を指します。

つまり、要素の実際の幅（ボックスの幅） = 左ボーダー + 左ボーダー + 左パディング + コンテンツの幅 + 右パディング + 右ボーダー + 右ボーダー。

要素の高さは同じです。

例:

CSSコード:

div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }

ログイン後にコピー

HTMLコード:

<body>   <div>文本内容</div></body>

ログイン後にコピー

要素の実際の長さは: 10px+1px+20px+200px+20px+1px+10px= 262px 。以下に示すように、Chrome ブラウザーで要素ボックスモデルを表示できます。

3.3 塗りつぶしと境界線

要素のコンテンツと境界線の間の距離を設定でき、これを「塗りつぶし」と呼びます。塗りつぶしは上、右、下、左（時計回り）に分けることもできます。以下のコード:

rrree

順序を間違えてはいけません。上記のコードは個別に記述することができます:

div{padding:20px 10px 15px 30px;}

ログイン後にコピー

上、右、下、左のパディングがすべて 10 ピクセルの場合は、次のように記述できます

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

ログイン後にコピー

上と下のパディングが同じ 10 ピクセルの場合、左右のパディングは同じ20pxで、次のように書くことができます:

div{padding:10px;}

ログイン後にコピー

marginにも同じことが当てはまります。