2016.3.14CSSボックスモデル_4日目_html/css_WEB-ITnose

まず初めに、仕事で上海に行っていたため、数日間更新が遅れたことをお詫びしたいと思います。今後は時間通りに更新できるように努めます。

今日のコースでは、主にボックス モデルの基本概念を紹介し、ボックス モデルの具体的な要素構成についても説明します。ポジショニングについては最後に紹介します。

今日のコースのプレビュー

CSS ボックス モデルの概要

最初に目に入るものは何ですか?

月餅と月餅箱がありますよね？

それで、今日のレッスンは「月餅の箱によって引き起こされる思考」と呼ばれます。

最初に目に入るものは何ですか?

中秋節に月餅を包装するのに使う月餅箱とよく似た箱ですよね？

2 つのケーキの箱の間の距離は、これから紹介する –> マージンです。

そして、それぞれのケーキには最も外側の包装箱が必要です。この包装箱の厚さは、私たちの –> 境界です。それから、私たちの月餅はすべて互いに直接隣接することはできませんよね? そして、各月餅間の間隔は –> パディング (内側のマージン) と呼ばれます。

次に、月餅に含める必要がある月餅の箱を紹介しました。

はい、月餅の幅は -> width です

そして、月餅は -> 要素と呼ばれます。デフォルト値はゼロです。

ただし、多くの要素には、ユーザー エージェント スタイルシートによって設定されたマージンとパディングが含まれます。

これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。

これは個別に行うことも、ユニバーサル セレクターを使用してすべての要素に対して行うこともできます:

* {  margin: 0;  padding: 0;}

CSS では、幅と高さはコンテンツ領域の幅と高さを指します。

パディング、境界線、余白を増やしても、コンテンツ領域のサイズには影響しませんが、要素ボックスの全体的なサイズは大きくなります。

ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。

この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。以下の図を参照してください:

ヒント: パディング、境界線、マージンはすべての要素に適用できます。要素エッジの適用は、個々のエッジに適用することもできます。

ヒント: マージンは負の値にすることができ、多くの場合、負の値のマージンを使用する必要があります。

コードと効果のデモ

Webページでdivタグを追加し、classの値を設定します

HTML代码:<div class="box_model">    我是一个div哦</div>

独自のサイズを設定します

通常、クラスセレクターは属性値、最初の幅(width)、 hegiht (高さ) )、background-color (背景色)

CSS代码:.box_model { width: 200px; height: 200px; background-color: cyan;}

効果は次のとおりです:

上記の操作は div タグを追加し、テキスト、サイズ、色を設定するだけであり、特別な操作はありません。次に、続けてみましょう:

パディングの内側のマージンを設定します

上の図を見ると、テキストが境界線に近づいていることがわかりますが、マージンを追加したい場合は、あまり使いやすいものではありません。 、padding 属性を使用して追加できます。 内側のマージン

CSS代码:.box_model { width: 200px; height: 200px; background-color: cyan; /*内边距*/ padding: 20px;}

効果は次のとおりです:

これで、テキストと境界線の間の幅が 20 ピクセルになり、それほどコンパクトに見えません

注: パディングの値を変更しました。これにより、パディングは div 内に属しているため、div 全体が大きく変更されます

div を元のサイズのままにしたい場合は、パディングを 20px に設定するときに、次のことが必要ですdiv サイズが変わらないように、幅と高さをそれぞれ 40 減算して変更します

境界線を設定します 境界線

このようなカラーブロックは比較的単調であることがわかるので、色付きの境界線を設定しましょう

CSS代码:.box_model { width: 200px; height: 200px; background-color: cyan; /*内边距*/ padding: 20px; /*边框*/ border: 50px solid black;}

効果画像は次のとおりです

非常に異常な 50 ピクセルの境界線を設定すると、次のような効果が見られます。通常、境界線にはそれほど大きな値はありません。1 ピクセルで十分です

境界線の値を設定すると、div タグのサイズも増加します。境界線も div 自体に属します

マージンを設定します

マージンの主な機能は、このタグと他のタグ間の距離を設定することです

まず、div がブラウザ内でどのように見えるかを見てみましょう外枠コードは追加しないでください

div タグの上辺と左辺の間にスペースがあることがわかりましたが、このスペースは本文の間隔値 (8px) です。ここでは無視してそのままにしておきます。

次に、マージンコードを追加します

CSS代码: .box_model { width: 200px; height: 200px; background-color: cyan; /*内边距*/ padding: 20px; /*边框*/ border: 50px solid black; /*外边距*/ margin: 50px;}

コードを追加した後の効果は次のとおりです:

今、divタグがブラウザの上部と左側から遠く離れています。その理由は、外側を設定しているためです。 border

Notes

次の状況を見てください:

上の div タグと下の div タグの余白はそれぞれ 50 ピクセルですが、上部と下部の間隔が 100 ピクセルではないことがわかります。でも50pxもあるのはなぜでしょうか？

余白の垂直距離は合計されず、大きい方の値になります。

例: 上のラベルの余白が 100 ピクセル、下のラベルの余白が 80 ピクセルの場合、上部要素と下部要素の間の距離は 100 ピクセルのいずれか大きい方になります。

これは2つの要素が縦に並んでいますが、横に並べるとどうなるでしょうか？ ?

考えすぎて、要素が水平に配置されている場合、2 つのタグ間の間隔は 2 つの要素の外側の余白の合計になります

属性の詳細

パディング属性

padding

padding - left

padding-top

padding-right

padding-bottom

padding: 20px; は、上、下、左、右のパディングが 20 ピクセルであることを意味します
padding: 10px 20 ピクセル; 10px、左右のパディングは10pxで20pxです。最初の数値は上下を表し、2 番目の数値は左右のパディングの値を表します。真ん中にスペースがあることに注意してください

ボーダー属性

border: 上下左右のボーダーを同時に設定します

border-left: 関連する左ボーダーを設定します

border-left-width: 左枠の太さを設定します

border-left-color: 左枠の色を設定します

border-left-style: 左枠のスタイルを設定します

border- top: 関連する上部の境界線を設定します

border-top-width: 上部の境界線の太さを設定します

border-top-color: 上部の境界線の色を設定します

border-top-style: 上部の境界線のスタイルを設定します

border-right: 右枠関連を設定します

border-right-width : 右枠の太さを設定します

border-right-color : 右枠の色を設定します

border-right-style : 右枠のスタイルを設定します

border-bottom : 関連する下枠を設定します

border-bottom-width: 下枠の太さを設定します

border-bottom-color: 枠の色を設定します下の境界線

border-bottom-style: 下の境界線のスタイルを設定します

border: 1px 実線の赤; 上下左右の境界線の太さが 1 ピクセルで、スタイルが実線であることを意味します。 red
border-left: 2px double red; 左の境界線の太さを 2px、スタイルを double、色を赤に設定することを意味します。 、左右のマージンを同時に設定します

margin-left: 左マージンを設定します margin-top: 上マージンを設定します

margin-right: 右マージンを設定します

margin-bottom: 下マージンを設定します

margin: 20px; は上下の余白を表します 左右の余白は両方とも 20px です

margin: 10px 20px; は上下の余白が 10px、左右の余白が 20px であることを意味します。最初の数値は上下を表し、2 番目の数値は左右のマージンの値を表します。中央にスペースがあることに注意してください。

display

display 属性は、要素が生成するボックスのタイプを指定します。

この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。

HTML などのドキュメント タイプの場合、HTML で既に定義されている表示階層に違反する可能性があるため、注意せずに表示を使用すると危険な場合があります。

XML の場合、XML にはこの階層構造が組み込まれていないため、すべての表示が絶対に必要です。

ここでは 4 つの属性のみを紹介します。

*none

*inline: 小さな領域を占有する行ラベル

*block: 1 行を占有するブロックラベル、幅と高さを設定可能

*inline-block: ブロックラベルですが、line のいくつかの属性を持ちますラベル

注: 値compactとmarkerはCSS2に存在していましたが、広範囲にサポートされていないためCSS2.1から削除されました。

付録:

値の説明

と同様)

none	この要素は表示されません。
block	この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。
インライン	デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
inline-block	Inline-block 要素。 (CSS2.1での新しい値)
list-item	この要素はリストとして表示されます。
run-in	この要素は、コンテキストに応じてブロックレベル要素またはインライン要素として表示されます。
compact	CSS にはコンパクトという値がありますが、広くサポートされていないため、CSS2.1 から削除されました。
マーカー	値マーカーは CSS で使用できますが、広範囲にサポートされていないため、CSS2.1 から削除されました。
table	この要素は、テーブルの前後に改行が入ったブロックレベルのテーブル (f5d188ed2c074f8b944552db028f98a1 と同様) として表示されます。
inline-table	この要素は、表の前後に改行を入れずに、インライン表 (f5d188ed2c074f8b944552db028f98a1 と同様) として表示されます。
table-row-group	この要素は、1 つ以上の行のグループとして表示されます (92cee25da80fac49f6fb6eec5fd2c22a と同様)。
table-header-group	この要素は、1 つ以上の行のグループとして表示されます (ae20bdd317918ca68efdc799512a9b39 と同様)。
table-footer-group	この要素は、1 つ以上の行のグループとして表示されます (06669983c3badb677f993a8c29d18845 と同様)。
table-row	この要素はテーブル行として表示されます (a34de1251f0d9fe1e645927f19a896e8 と同様)。
table-column-group	この要素は、1 つ以上の列のグループとして表示されます (879b49175114808d868f5fe5e24c4e0b と同様)。
table-column	この要素はセル列として表示されます (581cdb59a307ca5d1e365becba940e05 と同様)
table-cell	この要素はテーブルセルとして表示されます (05963c7322578abdf7d097e04098cc5a)
table-caption	この要素はテーブルのタイトルとして表示されます (
inherit	表示属性の値が親要素から継承されます。