.CSSボックスモデル（BoxModel）
1.基本概念
いわゆるボックスモデル：HTMLページ内のレイアウト要素は、容器の内容物が装着されている長方形の箱、と見なすこと。
ボーダー、マージン、パディング、内容：ボックスモデルは、以下からなります。
2.ボーダー（国境）
（1）境界の組成物。
幅、スタイル、色
border-with: 粗细 /* 一般用px作为单位*/
border-style：样式（ solid实线 dashed 虚线边框 dotted 点线边框 )
boder-color：颜色
デモ
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: pink;
}
（2）複合言葉遣い。
border: width style color (没有顺序）
（3）別の境界線を書きます
国境のセットは、他の赤、青で
書き込みA
div {
width: 200px;
height: 200px;
border-top: 1px solid blue;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
}
ライティング第二に、積層体の使用
div {
width: 200px;
height: 200px;
border: 1px solid red;
border-top: 1px solid blue;
}
（4）フォームマージ隣接境界
理由
テーブルの隣接する二つの境界線、オーバーレイ厚さが外観に影響を与えますが、使用することができますborder-collapseマージする
デモを
table,
td,
th {
border: 1px solid pink;
border-collapase: collapase
font-size: 14px;
text-align: center;
}
注意事項：
境界線は、箱の大きさに影響を与えるボックスのサイズを設定する時期実測ボックスサイズとの国境の利用可能、マイナスサイズ。（そのボックスのセットを提供し、widthそしてheight）
2.内側の余白（パディング）
パディングは、境界線とコンテンツをパディングされます。
（1）文言とは別に
div {
width: 200px;
height: 200px;
padding-top: 1px ;
padding-bottom: 1px ;
padding-left: 1px ;
padding-right: 1px ;
}
（2）複合文言
padding: 5px; 代表上下左右的都有内边距
padding： 5px 10px; 代表上下内边距是5px 左右是10px
padding: 5px 10px 20px; 代表上边距5px ，左右10px 下边距20px
padding :5px 10px 20px 30px; 代表上边距5px,右边距10px,下边距20px,左边距为30px（顺时针）
注意事項：
1.paddingボックスの実際のサイズに影響を及ぼし、ボックスがあろうストレッチ（ボックスセット、幅と高さとする）
サイズマイナスパディングの実際の測定値を使用する時に2セットボックスサイズ。
ボックスの実際のサイズは、サイズを設定する=パディング+
デモ
/*比如要设置一个200px*200px的盒子，而padding等于20*/
div {
width: 160px;
height: 160px;
padding: 20px;
}
/*最后盒子的实际大小为（160+40）px *（160+40）px
3.ボックスのマージン（余白）
箱と箱の間の距離を制御するためのマージン属性。
（1）別々に書きます
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下边距
注：
コンプレックスとしてマージンとパディングの速記
（2）マージンの使用を
マージンが可能ブロックレベルボックスは、水平方向にセンタリングされ満たすべき条件：
1、ボックスの幅は、幅を指定する必要があります
余白の周り2.ボックスがAutoに設定されている
デモ
.div {
width: 200;
margin: 0 auto;
}
注：
中心：要素は、ブロック要素又は水平線の場合、内側中央列は、テキスト整列の親要素に追加することができます。
（3）カバーのマージン
カバーマージンが発生することときに、外部から定義された使用ブロックレベルの垂直マージン。（大上書き小さな値は、唯一の値が大きい最終的なマージンです）
<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 10px;
}
.div2 {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top：30px;
}
</style>
<body>
<div class="div1">盒子一</div>
<div class="div2">盒子二</div>
</body>
注
合わせマージンサイズではない（10 + 30）PXが、30px（小さなマージンを覆う大きな数値）
（4）マージンの崩壊の問題
生成された条件
1. 2つの入れ子関係サブマージントップ要素上に配置されたブロック要素の（親子関係）、親にこのアクション意志マージントップボックス。（親得ボックス崩壊）
親要素および子要素が両方のマージントップを設定するブロック要素の2つのネストされた関係（親子関係）は、マージントップ2は、原因（親ボックスに適用されます親ボックス崩壊大きい）
崩壊する前に
2つのボックスが設定されていないマージントップ
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
}
.sun {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="father">
<div class="sun"></div>
</div>
</body>
効果
崩壊後の
マージントップボックスを提供特徴
<style>
.father {
width: 400px;
height: 400px;
background-color: red;
margin-top: 50px;
}
.sun {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 60px;
}
</style>
<body>
<div class="father">
<div class="sun">盒子二</div>
</div>
</body>
効果
治療
方法：親要素の定義枠
border: 1px solid transparent
方法2：余白内の親要素が定義され
padding: 1px
方法3：あなたは親要素を追加することができます
overflow: hidden
4. [内側と外側の余白
多くの内側と外側のページ要素とのマージン、および異なるデフォルトのブラウザは同じではありませんので、レイアウトの間、我々は最初のページ要素の内側と外側の余白を削除する必要があります。
* {
padding: 0;
margin: 0;
}
注：
互換性のためのインライン要素のみ可能に設けられた左右のマージンは、トップを設定するとボトムマージンはブロック要素又は行内のブロック要素に変換することができます。
2つの浮動（フロート）
1ページのレイアウトの性質
CSSでボックスを配置します。表示位置に対応するボックス。
三つの伝統的なレイアウト：標準ストリーム、浮動およびポジショニング。
2.標準流れ
標準のフローに従って適切なデフォルト構成です。（基本レイアウトモード）
上から下へ順ブロックレベル要素が別の行になります（1）。（DIV〜P H1表H6 UL OL DL形のHR）
（2）。ために左から行内の右の順に要素、すなわち、親要素のラップの縁を横切ります。（スパンなどのemをAI）
フローティング3.
構文：
选择器 { float: 属性值；00
}
プロパティ値
| プロパティ値 | 効果 |
|---|---|
| なし | 要素浮きません（デフォルト） |
| 左 | 左浮動します |
| 正しい | フローティング右 |
（1）浮動作用：
ラベルの要素の配置を変更します。ブロック要素の複数の最も一般的な使用は、そのように構成される1行に表示されます。
4.浮上特性
マークオフ（1）
- （一般的にフローティングとしても知られる）は標準正規ストリーム制御移動（フロート）によって指定された位置から
前記浮動ボックスは、（ボックスは標準ストリームプレースホルダであってもよい）、元の位置を保持していません
（2）1行のフローティング要素
複数のボックスがフローティング設定されている場合、それらは、行に表示され、先端が整列されています。
（3）左右のフロートフロート
**注：**
- ボックスの幅がボックスの余分な別のラインが整列され、親浮動ボックスに収まらない場合は、（ギャップなし）お互いに一緒に要素をフローティング。
- 任意の要素は、フローティング要素を設定した後、同様の特性を有するブロック行内に浮上させることができます。
- ブロックレベルボックスの幅を設け、広い親ほどデフォルト幅れていない場合、さらにはフローティングした後、そのサイズは、内容に応じて決定されます。フローティング要素は、しばしば、標準的なフローの親と使用
用途の配置位置の周囲に浮遊内サブエレメント、第1の複合ページレイアウト基準後、前記親要素の標準垂直位置の最初の配置を。
フローティングボックス場合、他の問題原因回避するために、また、箱の浮きに起因する前記ボックス内のサブボックスの5 Aの複数、
6フローティングボックスのみフローティングボックスの背後に標準的なフローに影響を与えるには、上記に影響を与えません標準ストリーム。
5.クリアフロート
（1）理由
多くの場合、親要素が高さを設定していないので、サブボックスには、次の基準は、フローボックスに影響を与えますが、0である最後の親要素の高さの浮上位置を取りません。（親は、浮動ボックスのレイアウト下の子の高さに影響を与えることはありませんでした）
（2）の性質
浮動要素の影響を排除します。
（3）戦略
ただ、親ボックス内の影響はボックスの外側親ボックスには影響を与えませんしましょう浮き、浮動休館。
6.クリアフロート法
（1）追加のラベリングに関する法律（パーティション方式）
追加の標準的な方法は、空のブロックタグに浮動要素の端を指します。
选择器 { clear: 属性值
属性值： left right both
デモ
<div style="clear:both"></div>
長所：
分かりやすく、簡単に書き込み
短所：
貧しい構造無意味なタグの数を、追加します。
（2）親追加オーバーフロー
overflow: hidden | auto |scroll
（3）:after擬似要素法
：after モードは、追加のラベリング法のアップグレード版です。また、親要素に追加
.clearfix:afterr {
content: "";
display: block;
height: 0;
clear: bloth;
visibility: hidden;
}
.clearfix { /*IE6,7专有 */
*zoom: 1;
}
（4）擬似要素法ビス
二重擬似要素法は、親要素に追加されます
.clearfix:before,clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
VIII。ポジショニング
1.検索と浮動
1.浮動ブロックレベルは、複数のボックスは、多くの場合、水平配置のカセットに使用隙間なく表示と列に配置されていることができます。
2.ボックス内の画面上の動きの自由または固定位置を可能にし、他のボックスを抑制することができるボックスを見つけ。
2.ポジショニング組成
定位 = 定位模式 + 边偏移
（1）位置決めモード（位置）
| 値 | セマンティック |
|---|---|
| 静的 | 静的なポジショニング |
| 相対的 | 相対的な位置 |
| 絶対の | 絶対位置 |
| 修繕 | 固定位置 |
（2）エッジバイアス
| プロパティ | 例 | 説明 |
|---|---|---|
| 上 | トップ：80px | トップオフセット |
| 底 | 下：80px | ボトムオフセット |
| 左 | 左：80px | LeftOffset |
| 正しい | 右：80px | 右シフト |
分類を見つけ4.
（1）静的測位（NO位置決め）
选择器 {
position: static;
}
静态定位按照标准流摆放位置，它没有边偏移
（2）位置反対（相対）
选择器 {
position: relative;
边偏移： 值；
}
特長：
- 元の位置に基づいて位置を移動するとき
2.元の位置を維持するために、オフにマークしないでください。
（3）絶対位置（絶対）
选择器 {
position : absolute
边偏移： 值；
}
特徴：
1.親または親要素が位置していない場合、配置有効にするブラウザ場所（文書ドキュメント）
2.親要素の複数の場合、位置決めた（相対的、絶対的な、固定位置）、場所最近、親要素が検索します。
3.絶対ポジショニングは、（ラベルオフ）を元の位置を占有しません。
（4）親部分に対する絶対的な
原因：
親ボックスのニーズ位置（相対位置）を占有するが、親でボックスので、絶対位置内に移動する必要はないサブボックスの位置を占めています。
注
親が箱の位置を占有する必要がない場合、子供の父親は絶対にも発生する可能性がある必要があります。
（5）固定位置
选择器 {
position: fixed;
边偏移：值；
}
注意事項：
1.固定位置は、基準点移動要素として視覚的ブラウザウィンドウがなく、親要素の間には何の関係。
2.固定位置決めが位置を占めていません（添字トール）
（6）配置粘度
选择器：{
position: sticky;
边偏移： 值；
}
注意点：
- 参照移動要素としてビジュアルブラウザウィンドウ。
2.場所の粘性は、位置を占めています - あなたはそれらの右上左下を追加する必要があります。
4.は、位置決めとして理解され、接着固定配置結合が、相溶性は、IEがサポートされていません。
重なり順の位置
选择器： { z-index: 1;}
注：
1.値より上段カセットに対して、値が大きいほど、デフォルトは自動で、正の整数、0または複雑であってもよい
プロパティ値を上回る、書き込みのために同一である場合2.
3.のみボックスがZ-配置ましたindexプロパティ
拡張を見つけ6
特異性（1）位置
1.絶対位置決めは、位置決め固定とフローティング同様である：
線は、絶対または固定要素を追加2.高さと幅を直接配置することができる
、デフォルトのサイズではない幅または高さの場合、配置または固定された絶対的なブロック要素を追加3.コンテンツのサイズ。
（2）対象ボックスオフマージンの崩壊を誘発しません
フロート、絶対位置（固定位置）要素は問題マージン合併を誘発しないであろう。
（3）位置決め及び浮動
絶対位置（固定位置）が完全に以下の標準的なストリームの内容のすべてを抑制する。
フローティングは、以下のボックスを抑制しますが、ボックスの標準的なテキストと画像内の流れを抑制しません。