1.ボックスモデル
（1）ボーダー：ボーダー、ボーダー幅の境界線の太さ、単位PX、境界スタイル、境界スタイル、なしデフォルト値、全く境界は、すべての境界線の幅を無視しない、ソリッド単一実線（コモン）、破線破線、点線点在、ダブルダブル実線;ボーダー色境界線の色。
また、上部、下部に別個に設けられ、左と、右と右のボーダー、例えばのborder-top-幅を残してもよいです。幅のスタイル色：あなたはまた、設定されたスタイル、ボーダートップ、のborder-bottom、ボーダー、左、国境から右、国境を統合することができます。
ボーダー崩壊：崩壊、隣接境界を合わせ示します。
境界半径：1から4に丸い角（CSS3）は、設定値とすることができ、値はピクセル単位であってもよく、百分率は、順次左上隅、右上隅を設定することができる、右コーナーを下げ、左コーナー半径を下げます。
（2）パディング：パディングトップパディング右パディング下パディング左ボックスをパディング、1〜4個の値は、ピクセル単位の値は、パディングをクリアするために0に設定されて提供されてもよいです。
（3）マージン：マージントップマージンから右マージン下マージン左、1が4つの値に設定することができる「ブランク」を作成するための要素との間、外部から、PX、単位の値は左と右の両方から外部へautoに設定すると、水平ブロック要素は、明確なマージンを0に設定されている、中央の幅で形成することができます。
のみマージン約インライン要素は、全く垂直マージンがない、ブロック要素の隣接する垂直マージン（折りたたみマージンと呼ぶ）、どちらが大きい垂直間隔を挟んで組み合わせて、二のブロック要素の入れ子関係親要素は、外部から上部マージンと境界、親要素ではなく、外側に二つの大きい方の複合距離外、合併テイク場所からサブエレメントの外側になる場合でも、親要素は、IFこの問題を解決するために隠された：マージンが0である、合併は、親要素が1ピクセルのボーダーやパディングの上を定義することができ、親要素もオーバーフローを追加することが、行われます。
（4）コンテンツの幅と高さ：スリーブ要素の大きさ、すなわち、サイズ算出空間、要素の空間の高さ|幅=コンテンツ高さ|幅+パディング+ボーダー+マージン、すなわち計算実際の要素の大きさ、要素の空間高さインナーボックスサイズ|幅=コンテンツ高|幅+パディング+ボーダー、属性値によって前記高さと幅。
widthプロパティの幅と高さは、高さだけ線要素のブロック要素に適用される属性は有効ではありません。ボックスの全体の高さを計算する際のモデルは、2つのボックスは、ここで、上下の垂直マージンを合わせ考慮しなければならない;ボックス幅/高さを与えられていない場合または父の幅/高さ、パディングサイズは、このボックスには影響を与えません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;/*情况默认内外边距*/
padding: 0;
}
ul {
list-style: none;/*取消列表自带的小点*/
}
.searchPic {
width: 238px;
height: 294px;
border: 1px solid #D9E0EE;
border-top: 3px solid #FF8400;/*位于border之后*/
margin: 100px;
}
.searchPic h3 {
height: 35px;
line-height: 35px;/*垂直居中*/
border-bottom: 1px solid #D9E0EE;
font-weight: normal;/*粗体不加粗*/
font-size: 16px;
padding-left: 12px;/*继承父亲宽度*/
}
.searchPic img {
margin: 7px 0 0 8px;
}
.searchPic ul li a {
font-size: 12px;
color: #666;
text-decoration: none;/*取消下划线*/
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background: url(images/square.png) no-repeat left center;
}
.searchPic ul li a:hover {
text-decoration: underline;
color: #FF8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="images/img01.jpg" width="218">
<ul>
<li><a href="#">这是链接1</a></li>
<li><a href="#">这是链接2</a></li>
<li><a href="#">这是链接3</a></li>
</ul>
</div>
</body>
</html>（5）ボックスサイズ（CSS3）：指定ボックスモデル、コンテンツ・ボックスの値は、ボックスのサイズは、幅+パディング+境界である場合に境界ボックスの幅、即ち、パディング及び境界記載のボックスサイズの値幅の内側。
（6）ボックスシャドウ：Vシャドウ例えば、必要提供されない、影のサイズ拡散内外色シャドウ色、既定の最初からインセットの影からファジーブラーを、ボックスシャドウの垂直位置の水平方向の位置hは、シャドウ：0 15ピクセル30px RGBA（0、 0,0,0.4）;影のサイズは省略する。
2. CSSの位置決め機構
（1）通常ストリームは/標準/ドキュメントフローをフロー：右、ブロックレベル要素に左下にページタブ要素正常トップを、別の行に、要素の順序に応じてラインは、一つの背後に配置されています。
（2）フロートフロート：フローティング要素は、要素を指す配置さ属性は、通常のストリーム管理基準の所定位置における親要素に移行を浮遊し、要素は、ブロック要素内のこの時点での特性線、フローティングオブジェクトを有していますいずれも最初のブロック（すなわち、親要素）を含むフロートを作成し、フローティング要素は常に、最も近い親要素の位置合わせのための3つの探していないが、右、左、複数のブロックレベルの要素が同じ行に表示されている可能にするために、値がありますしかし、パディングの範囲を超えることはありません。ボックス、前記内部親子ボックス子供が浮いた場合にライン表示を合わせるように、その後、他の子供たちは、浮動必要です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>親要素が親要素の高さのデフォルトの高さに設定されていない場合に0であり、サブ要素は、要素の背後に浮遊する、すなわち、内部にフローティングボックスリング、インレット親ボックスの出口の閉鎖とがないように元の位置、透明フロートを占めるように浮遊して配置され他の要素の影響を、それらを聞かせて、ここでは衝撃による透明フロートにはいくつかの方法があります。
追加のラベル①：例えば末尾に追加浮動要素、空のタグ<divのスタイル=「クリア：両方 」> </ div>の、クリア値をも左することができ、右のが、一般的に使用され、この方法は、理解しやすいではありません、書き込み便利な、しかし無意味なラベルが構造化よりも多くの悪化し追加されます。
②親要素のオーバーフロー属性に追加：追加のオーバーフロー：隠された|自動車|スクロール;、コードの導入を実現することができますが、隠されている原因ラップ鉛含有量にそうでないと表示できない要素がオーバーフローする内容でたときの増加を必要としています。
③擬似要素の後に透明フロートを使用しました：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:after {
content: ".";/*内容为小点，尽量不为空，否则旧版本浏览器有空隙*/
display: block;/*转换为块级元素*/
height: 0;/*高度为0*/
visibility: hidden;/*隐藏盒子*/
clear: both;/*清除浮动*/
}
.clearfix {/*ie6、7浏览器的处理方式*/
*zoom: 1;
/** 代表ie6、7能识别的特殊符号，带有*的属性，只有ie6、7才执行
zoom是ie6、7清除浮动的方法*/
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>④擬似デュアル透明フロート要素の前と後：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:before,.clearfix:after {
content: "";
display: table;/*触发BFC清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>（3）所在地：属性位置決め要素は位置決めモード二つオフセットエッジ部分を含みます。
①エッジオフセット：左、上、下、右 。
②モード位置決め：セレクタ{位置：プロパティ値を;}、属性値の値は、絶対、相対共通スタティックを有する、4つの固定。
静的位置決めA.静的：すべての要素を標的デフォルト、すなわち、標準の流動特性を、この状態（右上、下、左、エレメント属性のエッジオフセット位置によって変更することができない ）、 一般的に排除するために使用される他のターゲティング方法この影響。
B.相対位置相対：エッジによってオフセット位置を移動させることが、元の位置が占有占有し続け、各移動位置は、出発点のそれらの左上隅に移動され、まだ依然としてボックスの背後に標準ストリームでありますそれまでの標準的なフロー・アプローチ;その主な価値は、私たちがアップ行きたい場所にボックスを聞かせて、携帯電話の位置です。
C.絶対位置決め絶対が：移動位置はエッジによってシフトさせることができるが、完全に標準オフ、位置を考慮していない、ドキュメントをスクロールすることができれば、それは絶対に転動体を配置するように、要素は、最終的にノーマルストリームの部分に対して位置決めするので、すべての親要素が配置されていない場合、ブラウザは、基準配向を置く;親要素の位置場合、親要素を見つけることが既に配置（絶対的、相対的または固定）最近の要素に基づいて説明します。
親の子供は、相なければなりません：子要素は絶対に親要素を配置しているとき、相対位置を使用します。
絶対配置ボックスの水平/垂直方向の中心：50％上部：50％、すなわち、親ボックスの半分の大きさを、次にマージンLEFまたは負外縁-toptからこの場合ボックスマージンが自動無効約普通であり、左側に設けられなければなりませんボックス自身の半値幅は/高さをすることができます。
D.固定位置固定：固定要素の配置（幅と高さ、またはコンテンツ気晴らしを設定する必要性）を設定すると、位置を取ることはありません、それはコントロールの標準的なドキュメントフローのスピンアウトし、親要素は任意の関係を持っていない、常にブラウジングに基づきますウィンドウには、要素は常にブラウザウィンドウの固定位置に表示されているかにかかわらず、ブラウザウィンドウのサイズが変更のスクロールするにかかわらず、ブラウザのスクロールバーの、独自の表示位置を定義します。
インデックス-Z ：正の整数値、負の整数と0、単位なしであり得る位置決め要素の重複の積層順序を調整するために使用される、デフォルト値は0であり、値が大きいほど、より多くの家庭の位置決め要素は、要素を積層、もし後ろからの書き込み順序に従って同じ値;位置は絶対、相対に設定されているのみで、固定されたが、この性質を持っている、残りの標準ストリームは、フローティング、これは静的な位置決め性はありません。
ブロックフローティングエレメント列がモードブロックパターンに変換されるように、絶対位置決め要素は、位置決め固定添加した後に表示を追加することなく、従って、（線要素とブロック要素そうです）。
| 位置決めモード |
マーク位置オフ所持しています |
あなたはオフセットエッジを使用することができます |
基準位置を移動します |
|---|---|---|---|
| 静的静的 |
、ノーマルモードをオフにマークされていません |
できません |
ノーマルモード |
| 相対位置決め相対 |
ない的外れ、位置を占めています |
缶 |
自身との相対位置（自己陶酔） |
| 絶対位置、絶対 |
完全に的外れ、位置を占めていません |
缶 |
配置され、親要素移動した位置（戦う父親のタイプ）への相対 |
| 固定された固定位置 |
完全に的外れ、位置を占めていません |
缶 |
携帯電話のブラウザからの相対位置 |
3.レイアウト
（1）ページレイアウトプロセス：心臓のページのバージョン（表示領域、一般的なレベルは、ブラウザウィンドウの中央にページのメインコンテンツエリア、960ピクセル幅である幅共通の、980px、1000px、1200px）を決定する 、 分析ページモジュール列、各行と列のモジュールのモジュール、構造、HTML、CSSの初期化、ボックスモデルを利用して、各モジュールがDIV + CSSページのレイアウトによって制御されます。
（2）伸縮装置（CSS3）
親要素に配置された表示：フレックス、子要素のセットは、フレックス：NUM; numが親要素を分割し、占有部分を表し、画素値がリトラクタブル分配に参加しないフレックス属性を指定せずに、直接指定してもよいです。
①フレックス方向スピンドル（容器フレックスフレックスプロジェクト、デフォルトの水平方向を設定するための主軸）シャフトの上側から左から右スピンドルデフォルトのサイドシャフト（主軸に垂直、デフォルトは垂直方向である）、方向（、次に、屈曲方向をすることができます行|コラム|行逆|カラム逆;変化します）。
②最小幅と最大幅：分/幅制限されることがあります。
正当化コンテンツを③：スピンドルの位置合わせを調整（水平）、親コンテナはすぐに箱のソート順を変更する起動するので、そのサブ要素の先頭からの値の5種類、フレックススタート、しかし、フレックス・エンド親コンテナ要素から子となるようですソート順の後方に直ちに開始し、しかし同じボックス、センターディスプレイに次の中間サブ要素親コンテナように、空間の間の親に左右カセットボックス近い、中間ブランクマージンの平均分布各サブエレメント空間の周りに前後ホワイトスペースを持っています。
④ALIGN-商品：側軸配向（垂直線）、ストレッチ適切な親コンテナので、高度に延伸子要素（高さの前提せずに次の子要素）を調整、中心が垂直中心、親要素の上部のフレックススタートは基準垂直ですアライメント、すなわち位置合わせ、親要素の下にフレックスの端部は、垂直方向のアライメント基準、すなわちアラインメントです。
フレックスラップ⑤：親ボックスよりサブボックス幅改行かどうかを制御する場合、三種類、NOWRAPデフォルト値（共通）がある値、すなわち収縮期、（圧縮）カラムを包むか、除去されないものと内側の列のショーを強制、解体又は解体列線必要ラップ、必要解体行または列を除去するときラップ逆が、逆の順序です。
⑥ALIGN-含量：フレックス;配列フレックス方向：容器のフレックスの複数行の場合について、親要素のディスプレイに提供されなければならない行、およびセットラップフレックスラップ：ラップ動作する、値の6種類があり、ストレッチ、中央、フレックススタート、フレックス・エンド、スペースの周りに、-の間のスペース。
⑦フレックスフロー：合併のフレックス方向フレックスラップ速記の方法。
⑧順序：numは、小から大への定期的な順序で配置されたサブ要素の順序を制御し、小さな値の上面は負であってもよいし、デフォルト値は0です。
4. BFC（ブロックレベルフォーマットコンテキスト）
（1）コンセプト：独立した描画領域は、唯一のブロックレベル要素は、ブロックレベル要素の内部のレイアウト、及び外側領域とは無関係に、領域は、外部マージンから、パディングパディングの幅と高さを持っているかを指定し関わっ、国境の境界線ではなく、モードはBFC、ブロック、リスト項目の表示プロパティを生成することができ、すべての要素は、要素のテーブルには、BFCが生成されます。
（2）トリガー条件BFC：①フロートプロパティはどれません。②絶対的または固定の位置;③インラインブロック、テーブル、セル、などのディスプレイテーブル・キャプション、フレックス、インラインフレックス;④オーバフローが表示されていません。
（3）BFC要素は、の特性を有する：垂直に配置された1つによって上部からボックスに①BFCにし、垂直距離は、マージンボックスによって決定される②、BFCの同ボックスに隣接するAのマージンに属する2つの意志オーバーラップ;③BFCは、ボックスのマージン左の外側の左端の各コンテナ境界左の左端に触れる;④浮動ボックスとBFCない交差領域が、フローティングエッジに近い。⑤計算BFCの高さは、自然ボックスの検出された高さをフロートします。
（4）BFCの主な目的：
①透明フロート内の要素：共通の親要素がオーバーフローに設けられている。隠された; 0の浮上ようにサブ要素の親要素を防ぎます。
②溶液合併マージン：垂直距離がマージされ、同じ2つの垂直方向に隣接BFCにボックス、上記マージン底マージントップボックスの下のボックスに属する、マージンボックスによって決定され、より多くの方大きな値は、溶液が使用されることができるボックスパッケージボックス、セットオーバーフロー：隠されました。
③生産適応右ボックス：BFC浮動ボックスとのない交差領域が、フローティングエッジに近い、一般的な流体要素（DIVを含む例えばテキスト）BFC、フローティング要素が生成されず、任意の交差点のために、シスフローティングエッジを形成するそれらのコンテキストを閉じました。
