ホームページ > 記事 > ウェブフロントエンド > CSS基礎学習14：ボックスを補う表示属性設定model_html/css_WEB-ITnose
CSS基礎学習14：ボックスを補う表示属性設定model_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:101349ブラウズ
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 タグは 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 番目の要素は表示する前に改行する必要があります。これがそれらの最も直接的な違いです。
とりあえずボックスモデルの表示属性についてはかなり勉強になりました、もし間違いがあればすぐに修正します！ ！今後さらに深い知識を学んでいきます
また補足させていただきます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。