2016.3.14CSSボックスモデル_4日目_html/css_WEB-ITnose
まず初めに、仕事で上海に行っていたため、数日間更新が遅れたことをお詫びしたいと思います。今後は時間通りに更新できるように努めます。
今日のコースでは、主にボックス モデルの基本概念を紹介し、ボックス モデルの具体的な要素構成についても説明します。ポジショニングについては最後に紹介します。今日のコースのプレビュー
CSS ボックス モデルの概要
最初に目に入るものは何ですか?月餅と月餅箱がありますよね？
それで、今日のレッスンは「月餅の箱によって引き起こされる思考」と呼ばれます。
最初に目に入るものは何ですか?
中秋節に月餅を包装するのに使う月餅箱とよく似た箱ですよね？
2 つのケーキの箱の間の距離は、これから紹介する –> マージンです。
そして、それぞれのケーキには最も外側の包装箱が必要です。この包装箱の厚さは、私たちの –> 境界です。それから、私たちの月餅はすべて互いに直接隣接することはできませんよね? そして、各月餅間の間隔は –> パディング (内側のマージン) と呼ばれます。
次に、月餅に含める必要がある月餅の箱を紹介しました。
はい、月餅の幅は -> width です
そして、月餅は -> 要素と呼ばれます。デフォルト値はゼロです。
ただし、多くの要素には、ユーザー エージェント スタイルシートによって設定されたマージンとパディングが含まれます。
これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。
これは個別に行うことも、ユニバーサル セレクターを使用してすべての要素に対して行うこともできます:
* { margin: 0; padding: 0;}パディング、境界線、余白を増やしても、コンテンツ領域のサイズには影響しませんが、要素ボックスの全体的なサイズは大きくなります。
ボックスの両側に 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 タグの上辺と左辺の間にスペースがあることがわかりましたが、このスペースは本文の間隔値 (8px) です。ここでは無視してそのままにしておきます。
次に、マージンコードを追加します CSS代码: .box_model { width: 200px; height: 200px; background-color: cyan; /*内边距*/ padding: 20px; /*边框*/ border: 50px solid black; /*外边距*/ margin: 50px;}ログイン後にコピー コードを追加した後の効果は次のとおりです:
CSS代码: .box_model { width: 200px; height: 200px; background-color: cyan; /*内边距*/ padding: 20px; /*边框*/ border: 50px solid black; /*外边距*/ margin: 50px;}今、divタグがブラウザの上部と左側から遠く離れています。その理由は、外側を設定しているためです。 border
次の状況を見てください:
上の div タグと下の div タグの余白はそれぞれ 50 ピクセルですが、上部と下部の間隔が 100 ピクセルではないことがわかります。でも50pxもあるのはなぜでしょうか？
余白の垂直距離は合計されず、大きい方の値になります。
例: 上のラベルの余白が 100 ピクセル、下のラベルの余白が 80 ピクセルの場合、上部要素と下部要素の間の距離は 100 ピクセルのいずれか大きい方になります。
これは2つの要素が縦に並んでいますが、横に並べるとどうなるでしょうか？ ?
考えすぎて、要素が水平に配置されている場合、2 つのタグ間の間隔は 2 つの要素の外側の余白の合計になります
属性の詳細
パディング属性
padding: 20px; は、上、下、左、右のパディングが 20 ピクセルであることを意味します
padding: 10px 20 ピクセル; 10px、左右のパディングは10pxで20pxです。最初の数値は上下を表し、2 番目の数値は左右のパディングの値を表します。真ん中にスペースがあることに注意してください
ボーダー属性
border: 上下左右のボーダーを同時に設定します
border-left: 関連する左ボーダーを設定します
border-left-style: 左枠のスタイルを設定します
border- top: 関連する上部の境界線を設定します
border-top-style: 上部の境界線のスタイルを設定します
border-right: 右枠関連を設定します
border-right-style : 右枠のスタイルを設定します
border-bottom : 関連する下枠を設定します
border: 1px 実線の赤; 上下左右の境界線の太さが 1 ピクセルで、スタイルが実線であることを意味します。 red
border-left: 2px double red; 左の境界線の太さを 2px、スタイルを double、色を赤に設定することを意味します。 、左右のマージンを同時に設定します
margin-left: 左マージンを設定します margin-top: 上マージンを設定します
この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。
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 | この要素は、テーブルの前後に改行が入ったブロックレベルのテーブル (
|
