再学習CSS（1）その深遠な幅、高さを、あなたは本当に知っていますか？

内側及び外側ボックス素子1

HTMLのみ二つの要素、ブロックレベル要素とインライン要素。ブロック要素は、一般構造（骨格）のために使用される「ラップ」特性を有し、ディスプレイピアインライン要素は、一般に、コンテンツ表示のために使用することができます。要素：同じ、インライン要素行うだけではなく、「インライン表示」の「ブロック表示」の要素はブロックレベル要素はを参照していないことに留意すべきです。しかし、順番にこれら二つの言葉が可能であると述べました。これは、ブロックレベル要素が含まに言及されていません。要素「表示ブロック/テーブル/リスト項目」それのように？また、それです！

各HTMLタグや要素が含まれている概念で、外層を引き出すためにインラインブロック：ここでは、共通セットの--displayを使用する必要があります。インラインブロックプロパティ、インライン要素の特性を持つ「外箱」である - 素子特性の適応的なブロックレベルの幅によって表示ピア内の他の要素に関連してもよいし、「内箱」、およびコンテナの高さを提供することができます。

ボックス内外インラインブロック要素の概念を用いて、描画することができ、表示：ブロック=>表示：ブロックブロック、彼は、ブロックレベルのボックスからなる外部および内部ブロック・レベル・ボックスによるものです。表示：インライン要素は、同じ理由です。

2.list項目の特殊な「アドオンボックス」

表示：リスト項目は、あなただけの小さなドットよりも多く見つけるだけでなく、1234年になる通常のlist-styleプロパティでそれらを見て、小さなドットF12は、実際には、選択することができないとして表示され、デフォルトプロパティのliタグでありますマークの、しかし、その不従順特性規律のこの種は、我々は通常、noneに設定され、スタイルが一覧表示されます。我々はすべて知っているように、ブロックレベル要素も「追加のボックス」名前「ボックスにラベル」（マーカーボックス）に加えて、専門的な、「ブロック要素」リスト項目の下ではなく、その特殊な性質のために、リストスタイルの要素追加の特殊ケースは、そのリスト項目の「メインブロックレベルボックス」に基づいて、すべてのブロック要素があるように、そのようなタグカートリッジのドット数を置きます。この機能については、個々のは少しのような印象、実際のプロジェクトのリスト項目はほとんど捨てられた存在を感じています。

3.秘密と幅：オート

手動でデフォルトの幅の自動に設定された幅を設定しない場合、異なる要素によれば、異なる特性を示すであろう。

最初は、デフォルトの幅のdiv要素として最も一般的なブロックレベル要素は、これらの要素のpタグが、ここで我々は利用可能なスペースを最大限に活用するために、この特性を呼び出すことができ、高さを議論していない親コンテナの100％です。
第二の特徴は、親要素の収縮子要素でラップ（ここで、元のテキストや収縮包装、適切ではないと思われる）、浮動、絶対配置、インラインブロック要素、要素のテーブル、そのような特性の典型的な代表されますバック多くはないが、ここでは詳細に入る、一つずつを開始します。
最小の収縮は、それが最も可能性の高い自動でテーブルレイアウトにテーブルとして表示されます。
コンテナ限度を超えて。固定幅で親要素、子要素の幅は、通常、特に長い連続英単語などのいくつかの特別な場合は、存在しない限り、親要素を超えない、またはインライン要素がホワイトスペースが設けられている。NOWRAP 。

4.分析要素カプセル化

浮動について話しました、その後で、位置決め時間は、パッケージプロパティの要素を伴うので、ここでしか概念のいくつかを理解するためになるので、なぜここ分析が言う、第二の点に言及したカプセル化された要素とシンプルなアプリケーション。まず、要素を「カプセル化」されているもの、定義により、ラップされ、適応性、いわゆる適応は、幅を指定された親コンテナの内側のサブエレメントのサイズを意味する（これは必ずしも具体的に示されている指定されていないことに留意されたい）によって彼自身の決断。「親コンテナの幅」感：他の言葉では、内側のサブ要素は、最大幅のようです。もちろん、ときfather.widthより大きい分幅の子要素を、この基準は適用されません。コンテンツは親要素の幅を超えた子要素の幅程度である場合、それは、それは実際には、通常の音偉大な使用をラップしますが、このルールに遭遇フロートや絶対位置決め時間で一見多くが発生しますこの部分を詳細に説明する際に以下の通常の状況では、後述します。

5.パッケージ要素、中心のテキスト文字を使用している場合があり、より少ない、より多くのテキスト、左詰めでコンテンツ

私たちは、テキストを左に揃えるために、より少ない時間のテキスト中心のテキスト、およびテキストとより多くの時間内要素の幅を決定したい：パッケージの要素を使用して、我々はそのような単純なニーズを行うことができます。中央中央揃え：外箱要素は、インラインブロックインライン要素である場合、いくつかの単語では、インライン要素は、要素がテキスト整列に使用することができるブロック。反対側のサブ要素となるよう、左：内部の幅==インラインブロック要素>親要素の幅は、我々はインラインブロックプロパティ、テキスト整列を追加するためのインナーボックス内のブロックレベル要素を使用して、この時間をラップする時期常に全体のセンターの全体的なパフォーマンスの外側に、そして独自のパフォーマンスは、左のテキストで、次のように最終的なコードです。

<!-- 文字少居中显示，文字多居左显示 -->
<div class="box">
    <div class="content">少量文字</div>
</div>
<div class="box">
    <div class="content">许多文字许多文字许多文字许多文字</div>
</div>
<style>
.box{
    width: 200px;
    text-align: center;
    background: #1A95FF;
}
.box>.content{ 
    margin:20px 0;
    display: inline-block;
    text-align: left;
    background: #E6A23C;
}
</style>

値下げエディタは、タグ言語をサポートしているので、次のように、私たちが直接、最終的な結果はプレビューできます（ヒント：ブラウザから直接CSSスタイルを参照するには、以下の要素を確認することができます）

いくつかの単語

多くの単語の多くの言語の多くの言語の多くの言語

オブジェクト6.width値の役割

ここでは、単純な繰り返しの約4ボックスモデルは、内部から外部へどのような、コンテンツ・ボックス、パディング・ボックス、ボーダー・ボックスと透明マージンボックスです。通常の状況下では、幅が、我々は要素が増加し、全体の幅と高さで、その結果、レイアウト時にパディングとボーダーを追加するときにしばしばつながるように、アクションのコンテンツボックスを向けることです。私たちは設計幅からドラフトを取得する場合：100pxに、パディング：10pxの、国境： - paddingLeft - paddingRight - boderLelft - コンテンツ幅を計算するためborderRight 1pxの要素を、最終的に我々は幅を必要とします。これはあまりにも面倒だろう。そのため、CSSは、我々の開発を容易にするため、境界ボックスモデルを提供します。事実ボックスのサイズ変更には：オブジェクトの役割は、境界ボックスの変化幅です。元の幅は、使用boderボックス、幅=パディング+ボーダー+コンテンツの後、唯一のコンテンツボックスに作用します。

7.width： - パーセンテージの動的計算がどのように最終的に100％がどのように広いです

実際には、オリジナルのテキストだけでなく、この章の内容に類似しています。まず、質問例を見て、意図されたものであり、親要素の幅インラインブロック特性がある場合は、自動で、彼は、幅が2つのサブ要素A及びB、50％の幅の割合、Bを含む計算します幅が50％であるが、AB等しくない内部の内容物は、その後どのような実用的な効果だろうか？見ては信じています。

<!-- 百分比计算问题 -->
<div class="f_box">
    <span class="box_a">我是A元素</span>
    <span class="box_b">我是B元素我是B元素</span>
</div>
<style>
.f_box{
    display: inline-block;
    height: 100px;
    background: #F56C6C;
    white-space: nowrap;
}	
.box_a{
    width:50%;
    background: #E6A23C;
    display: inline-block;
}
.box_b{
    width:50%;
    background: #67c23a;
    display: inline-block;
}
</style>

値下げエディタは、タグ言語をサポートしているので、次のように、私たちは直接、最終的な結果がプレビューすることができます（ヒント：あなたは、CSSスタイルを参照してくださいブラウザから直接、次の要素を確認することができます）無料の情報やコースを受け取るにはクリック

私はB B要素は、要素Iである要素です

上記の二つの結果を引き起こすことは、親要素の幅の比率に含まれるサブ要素の幅に起因するものであるので、それらはパーセンテージにより得られた親要素の幅の幅に依存し、親要素の幅=百分率でNaNに自動、自動です。もちろん、実際の計算では、それはそうではない、と親要素の幅が自動で計算されています。これは実際には関係のレンダリング順序を持つブラウザは、私は、ブラウザのレンダリングプロセスについての記事を書くための理由を持っているとして、メカニズムのレンダリングに、当然のことながら、人々今日は、これはそれほど気をつけていないが、この場合には、あなただけ知っている必要がありますDOMコンテンツがレンダリングするために内側から外側へ、上から下にあります。あなたは、サブ要素の幅が=オート（パーセンテージは親要素の幅に実際に依存している）とき、親要素にレンダリングするとき、理解し、その親要素最高法規では、グラフィック、A、Bを加えたコンテンツの素子領域の幅に従うことができますその再取得、およびサブ要素のパーセンテージを計算する自動の幅た後、対応するサブ要素の幅は、本実施形態では、出てきた、コンテンツAは幅さらに、比較的小さいとの最終的な幅とを加え、冗長性、およびより頻繁Bの内容、領域の過剰幅。

8.height：100％時々、なぜ有効になりませんか？

高さについて：自動ここで疑問が、より多くの物語、通常の状況下では、ブラウザの限られた幅のために、そのときの設計幅：自動はるかに複雑高さよりも、一部の人々はラップの一部を感じることは非常に実際のラップで、割り当てられています幅は非常にだけその症状にそれを変更するのに十分なリードではありませんので。高さ：自動限り、記録の各要素の高さは、重ね合わせは、当然のことながら、そのようなフロート、ラミネート等の問題のようないくつかの特殊な特性はマージンを引き起こしことができるように、個別に後述します。

より明らかな違いの次Laijiangjiangフォーカスするだけでなく、高さと幅は、ユニットの割合のサポートです。widthプロパティのために、親要素の幅であっても、オート（もちろん、これはスタイルの声明を表示する必要はありません）、パーセント値もサポートすることができます。しかし、親要素が自動的に高さであれば、プロパティの高さの割合は、それほど長い文書のフロー内の子要素（例えばfloatとして、絶対位置は、文書の流れから要素を作ることができる）として、パーセンテージの値は完全に無用です。

なぜこれがそうですか？その答えは、明細書に記載されているので。オリジナル説明：ブロックの高さが明示的に含まれておらず、位置決め要素が絶対ではない場合、計算はautoです。すなわち、サブ要素*オート= NaNに100％のため、計算結果は無効です。高さを追加するために、親、親の親に保つために、100％：：だから、絶対に非高さを使用するための要素位置特定の値を有効にするには、幸い、この状況は多くはありません。

なぜ幅はそれをサポートすることができますか？それはブロックの幅が要素の幅に依存し、その動作は「未定義」で含まれているため、つまり、異なるブラウザは異なる特性を有することができるが、幸い私たちは皆、それぞれのブラウザに行く、最終レイアウトの効果を考えました次の彼らは同じです。それが真の値を含むブロックがベースのパーセンテージとして計算さによるものです。

9.height：100％、絶対位置決め要素の差と絶対配置要素の不履行

非絶対位置の要素の高さのパーセント方法は、ディスプレイの高さは、その親要素のステートメントがある場合、私はすでに力で説明してきました。だから、高さ：最終的には100％はそれをどのくらいですか？100％もない、それのコンテンツの高さ* 100％を指し：我々はすでに一般的なボックスモデルの幅でオブジェクトの役割内容、そして高さがあると知っていますか？その答えは、子供の場合にはない、絶対配置要素であるが、絶対位置決め要素に、時間のパーセンテージを計算ベースとして、コンテンツの高さ+パディング高さの親要素になります。これはポイント、見ては次のように信じていることをちょうどノートです。

<div class="box">
    <div class="child">高度100px</div>
</div>
<div class="box rel">
    <div class="child">高度160px</div>
</div>
<style>
.box {
    height: 160px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #F56C6C;
}
.child {
    height: 100%;
    background: #E6A23C;
}
.rel {
    position: relative;
}
.rel > .child {
    width: 100%;
    position: absolute;
}
</style>

高さ100pxに

高さ160ピクセル

10.min /最大幅/高さの初期化研究

最小/最大幅/高さについて何をするかで、文字通り所定の最大値と基本的な要素の最小サイズを理解することができます。一般的に、適応型レイアウトスキームで使用されます。そして、最小/最大幅/高さの初期値が比較的複雑であることを除いて、基本的な寸法（幅、高さ）。試験OF、最小幅/高さの初期値が自動で、最大幅/高さの初期値はnoneです。私たちは、初期値が自動最小 - 代わりの0、いずれも初期MAX-の代わりに、自動である理由を証明するために2つの例を書いてみましょう。

最初は最小 - で、この場合は単に証明するために、次のCSSを使用し、非常に理解しやすいだろう

<style>
.box{
    transtion:min-height .3s;
}
.box:hover{
    min-height:300px;
}
</style>

0へのmin-heightデフォルトした場合、我々は、マウスのボックスを移動すると、それから、そこ連続0-300pxアニメーションが表示されますが、事実はもちろんのこと、突然の遷移なしと高さの増加、その分、高さはデフォルトの自動する必要があり、あるべきですあなたもそれを証明しようとして書くことができます。

<style>
.box{
    min-height:0px;
    transtion:min-height .3s;
}
.box:hover{
    min-height:300px;
}
</style>

宣言分の高さが0である場合、遷移効果が表示されます。なぜデフォルトの自動はそれをMAX-されていませんか？知られている親要素の幅が400ピクセルで、その後、あなたは最大幅を指定していない、と彼は推測自動に沿って、デフォルト、その後、最大幅の値は400ピクセルでなければなりません場合は借り入れ、著者の例としては、幅子要素は、800ピクセルです800ピクセルが発効し、実際にはない場合、私たちは、最大幅に来ることができません：なし結論を最大幅のデフォルト値は、幅をwidthの値をカバーします。

重要11.min>マックス>！

元のタイトルとそれ以降！重要なのは、最大値を超えて - タイトル犬！

実際には、カバレッジの問題、CSS-世界重み「最大」です！重要な、右？実際、今日のような例外があるが、あなたは幅に設定した場合、MAX-、最小 - を言う：幅===> 100pxにし、そして重要な保険彼を買っ：100pxに重要であるが、最大幅に遭遇しました!!： 50px、最終値の幅は,!は50pxまだ重要な失敗です。とき最小幅>のmax-width時、この時間は、1を聴くには？MIN-幅聞くので、分を覚えている>マックス>！重要になることができます。

達成するために展開要素の効果の原理を用いた12の最大の高さ

今比較的小さいからの高さを聞かせてより良い方法があると、私はいつも必要が動的に高さを計算するが、それを行うための方法の高さを変更するために使用するだけでなく、不格好前に、ウェブの操作でより一般的である」崩壊を展開値は、私も、何のアニメーションを発見していないことを行うために使用される「自動」になるための自動 - 0 ..私たちは、オートが特定の値がうまくなっ作る場合= NaNで、したがって、I以前のように、そこにアニメ化されることはありません最大の高さの比の値が高さを計算しているため、値が動的に高さが言及した計算。今、私たちはこの問題を解決するための最大の高さの適応を使用することができます。私たちは、拡張することができ、コンテンツの値よりも大きく高度を確保するために設定する必要があります大きな値素子の高さは、高さの高さを計算することである場合。百聞は一見にしかず


<!-- 展开效果 -->
<div class="father">
	<div class="son">1</div>
	<div class="son">2</div>
	<div class="son">3</div>
	<div class="son">4</div>
	<div class="son">5</div>
</div>
<style>
.father{
	max-height: 20px;
	overflow: hidden;
	transition: 0.5s linear;
	/*background: green;*/
}
.father:hover{
	max-height: 200px;
	/*background: red;*/
}
.son{
	height: 20px
}
</style>