CSS基礎学習14：ボックスを補う表示属性設定model_html/css

CSS基礎学習14：ボックスを補う表示属性設定model_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:10

オリジナル

1378 人が閲覧しました

C 在

CSS の基礎学習 13 から学びました: ボックスモデルのブログ投稿では、CSS ボックスモデルについて説明しているだけで、デモのためのサンプルを過度に使用することはありません。このブログ投稿

は、ボックスモデルの知識を補足することを目的としています。この部分は、Web ページ全体のレイアウトにとって非常に重要です。以前は、HTML のテーブル要素と

フレームタグのほとんどが Web ページ全体のレイアウトに使用されていました。現在では、最も一般的な DIV+CSS が使用されています。ウェブページのレイアウト。したがって、必ずボックスモデルをマスターし、ボックス内の

content、border、padding、margin の役割と使用法を覚えておいてください。まず、ボックスモデルインスタンスの完全な要素を見てみましょう:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS盒子模型演示</title><style type="text/css">/*去掉浏览器缺省设置*/body {padding:0px;margin:0px;}/*设置盒子的宽度和高度以及边框*/div {border:#FF0000 solid 2px;width:300px;height:200px;}#div_1 {background-color:#00FF00;padding:20px 50px;}#div_2 {background-color:#0000FF;margin:20px;}#div_3 {background-color:#FF00FF;}</style></head><body><div id="div_1">第一个盒子</div><div id="div_2">第二个盒子</div><div id="div_3">第三个盒子</div></body></html>

ログイン後にコピー

の結果は次のとおりです:

どの要素がボックスモデルとして使用できるか興味がありますか?実際、どんな HTML タグもボックスにすることができます。ただし、ボックスの種類には違いがあります。ここでは、表示属性に関係するこの問題に焦点を当てます。 L p 表示属性:

設定要素のボックスモデルのタイプ。内部要素およびブロックレベル要素のタイプです。

– まず、ブロックレベル要素、インライン要素とは何かを思い出してください

HTML タグは 2 つのカテゴリに分類されます:

1 ブロックレベルのタグ (要素): 完全なブロック、領域。タグの終了後に改行が入ります。一般的に使用されるタグには、div p dl table ol ul title などが含まれます。

2 インラインタグ (要素): ブロックレベルの要素内で使用され、完全なブロック、ブロック、または行の一部だけを表すことはできません。タグ終了後に改行はありません

。一般的に使用されるタグには、fontspanimginputselecta などがあります。

div要素とspan要素に同じ幅と高さを設定できる上記の結果を見ると、div領域にはテキストコンテンツの量に関係なく幅と高さが表示されますが、span領域には幅と高さが表示されません。幅と高さを設定します。

div要素とspan要素を説明するテキストコンテンツと同じ幅と高さを持ちます。ボックスのタイプが異なります。

例 2: 別の span 要素を追加し、同じ高さと幅を設定し、その表示属性を次のように設定します: block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS盒模型演示</title><style type="text/css">div {width:300px;height:200px;background-color:#0000FF;}span {width:300px;height:200px;background-color:#FFFF00;}</style></head><body>     <div>div区域</div>     <hr/>     <span>span区域</span></body></html>

ログイン後にコピー

操作の結果は次のとおりです:

今回は、 2 つのspan要素が異なるのは、2番目のspan要素がdisplay属性を通じてブロックレベルの要素として設定されているため、高さ

と幅の両方が表示されるためです。区：例 III: 内部ブロック要素とブロックレベル要素とは異なり、2 番目の要素は表示する前に改行する必要があります。これがそれらの最も直接的な違いです。

とりあえずボックスモデルの表示属性についてはかなり勉強になりました、もし間違いがあればすぐに修正します！！今後さらに深い知識を学んでいきます

また補足させていただきます。