CSS基本知識ボックスモデル
まず、ボックスモデルとは何ですか？
いわゆるボックスモデル：HTMLページのレイアウト要素を、コンテンツを保持するためのコンテナである長方形のボックスとして扱うことです。CSSボックスモデルは、基本的に、境界線、外側の余白、内側の余白、実際のコンテンツなど、周囲のHTML要素をカプセル化するボックスです
。1。ボックスモデルWebページの
本質を確認し
ます。Webページのレイアウトのプロセス：
- まず、基本的にボックスである関連するWebページ要素を準備します。
- CSSを使用してボックスのスタイルを設定し、対応する位置に配置します。
- コンテンツをボックスにパックします
。Webページレイアウトの本質は、CSSを使用してボックスを配置することです。
2.ボックスモデル（ボックスモデル）構成
3.境界線（境界線）
要素の境界線を設定できます。境界線は次の3つの部分で構成されます。境界線の幅（太さ）境界線のスタイル境界線の色の
構文：
border : border-width || border-style || border-color
ボーダースタイルボーダースタイルは次のように設定できます。
-
none：境界線がない場合、すべての境界線の幅は無視されます（デフォルト値）
-
実線：境界線は単一の実線です（最も一般的に使用されます）
-
破線：境界線は破線です
-
点線：境界線は点線です
CSSの境界線プロパティを使用すると、要素の境界線のスタイルと色を指定できます。
ボーダーの略語：
border: 1px solid red; 没有顺序
境界線は別に書かれています：
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
4.テーブルの細い線の境界線の
border-collapseプロパティは、ブラウザがテーブルの境界線を描画する方法を制御します。隣接するセルの境界を制御します。
文法：
border-collapse:collapse;
- 崩壊という言葉はマージを意味します
- border-collapse：collapse;結合
された隣接する境界線が
ボックスの実際のサイズに影響することを示します。境界線は、ボックスの実際のサイズをさらに大きくします。したがって、2つの解決策があります。
- ボックスのサイズを測定するときは、境界線を測定しないでください。
- 測定に境界線が含まれている場合は、幅/高さ
5から境界線の幅/高さを差し引く必要があります。パディング
パディングプロパティは、内側のマージン、つまり境界線とコンテンツの間の距離を設定するために使用されます。
パディング属性（省略形の属性）には、1つから4つの値を指定できます。
実際の開発では、上記の4つの状況に遭遇します。
ボックスにパディング値を割り当てると、次の2つのことが起こります。
- コンテンツと境界線の間に距離があり、内側の余白が追加されます。
- パディングは、ボックスの実際のサイズに影響します。
つまり、ボックスにすでに幅と高さがあり、この時点で内側の境界線を指定すると、ボックスが拡大されます。
解決策：
ボックスがレンダリングと同じサイズであることを確認する場合は、幅/高さから余分なマージンサイズを差し引いてください。
ケース：Sinaナビゲーションのケースパディングはボックスの利点に影響します
パディングの内側の余白はボックスを開くことができる
ため、非常に巧妙に使用できます。各ナビゲーションバーの単語数が同じではないため、各ボックスの幅を直接指定することはできません。パディングのために最も適しています。
ボックス自体の幅/高さの属性を指定しない場合は、パディングは、この時点でのボックスのサイズを開くことができません。
6.マージンは、
マージン属性は、距離を外マージンを設定するために使用されますコントロールボックスとボックスの間。
マージンの省略形の意味は、パディングの意味とまったく同じです。外側マージンの
一般的な用途
外側マージンは、ブロックレベルのボックスを水平方向の中央に配置できますが、次の2つの条件を満たす必要があります
。①ボックスの幅を指定する必要があります。
②ボックスの左右の余白を自動に設定します。
.header{
width:960px; margin:0 auto;}
一般的な書き方は、次の3つのうちのいずれかです。
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
マージンの統合マージンを使用してブロック要素の垂直マージンを定義すると、マージンの統合が発生する場合があります。
主な状況は2つあります。
- 隣接するブロック要素の垂直マージンを組み合わせる
- ネストされたブロック要素の垂直マージンの崩壊。
隣接するブロック要素の垂直マージン
。2つの隣接するブロック要素（兄弟関係）が出会うとき、上の要素が下のマージン-下を持っている
場合、下の要素は上マージンがmargin-topの場合、それらの間の垂直方向の間隔は、margin-bottomとmargin-topの合計ではありません。2つの値の
大きい方をとる現象は、隣接するブロック要素の垂直マージンのマージと呼ばれます。
ネストされたブロック要素の垂直方向のマージンの折りたたみ
2つのネストされたブロック要素（親子関係）の場合、親要素には上限マージンがあり、子要素にも上限マージンがあります。このとき、親要素はより大きなマージン値で折りたたみます。 。
解決策：
①親要素の上枠を定義できます。
②親要素の上部のパディングを定義できます。
③親要素にoverflow：hiddenを追加できます。
フローティング、固定などの他の方法があり、絶対に配置されたボックスは崩壊の問題がありません。後で要約します。
7.内側と外側の余白をクリアする
多くのWebページ要素にはデフォルトの内側と外側の余白があり、異なるブラウザのデフォルトには一貫性がありません。したがって、レイアウトする前に、まずWebページ要素の内側と外側の余白をクリアする必要があります。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
8.まとめ
- レイアウトに異なるボックスを使用するのはなぜですか？divのみを使用したいのですか？
ラベルはすべてセマンティックであり、必要に応じて適切なラベルを使用します。たとえば、製品のタイトルにはhを使用し、多数のテキスト段落にはpを使用します。 - なぜこれほど多くのカテゴリ名を使用するのですか？
クラス名は、各ボックスに名前を付けるためのもので、ボックスを見つけやすく、ボックスを選択しやすく、後のメンテナンスも便利です。 - マージンまたはパディングを使用する必要がありますか？
ほとんどの場合、この2つは混在する可能性があり、どちらにも長所と短所がありますが、実際の状況に応じて、より簡単な方法が常にあります。 - アイデアがありませんか？
レイアウトを実装する方法はたくさんあります。生徒は私の文章を真似て、自分のスタイルを作ることができます。最後に、スクリーンブラシ、psなどの補助ツールをさらに使用する必要があります。9
。丸みを帯びた境界線
CSS3では、ボックスを丸くできるように、新しい丸みを帯びた境界線スタイルが追加されました。border-radiusプロパティは、要素の外側の境界線の丸みを帯びた角を設定するために使用されます。
文法：
border-radius:length;
パラメータ値は、数値またはパーセンテージの形式にすることができます
。正方形であり、円として設定する場合は、値を高さまたは幅の半分に変更するか、50％として直接書き込みます。
.この属性は省略形の属性であり、その後に4つの値を続けることができます。これは、左上隅、右上隅、右下隅、および左下隅を表します
。別々に記述します：border-top-left-radius、border-top- right-radius、border-bottom-right-radius、
border-bottom-left-
radiusie9+ブラウザーのサポートと互換性がありますが、ページレイアウトには影響せず、自信を持って使用できます
。10。ボックスシャドウ
CSS3にボックスシャドウ。box-shadowプロパティを使用して、ボックスにシャドウを追加できます。
文法：
box-shadow: h-shadow v-shadow blur spread color inset;
11.テキストシャドウ
CSS3では、text-shadowプロパティを使用してテキストにシャドウを適用できます。
文法：
text-shadow: h-shadow v-shadow blur color;
