ボックスモデルのレジェンド、より複雑な思考内容の一部は、独立した章を書きましたが、詰め物の一部を見たときには、継続的なテストを通じて、非常に奇妙な現象のCSSに遭遇し、そして最後に「真実」に比較的近い取得します試験前のこの奇妙な現象の説明は、最初のパディングのいくつかは、問題を説明するために、最終的には、簡単に紹介しています。
ブロック要素のサイズ1.padding
（また、イントラアップと呼ばれる）パディングボックスモデルをパディング、CSSで、ボックスサイズデフォルトは、コンテンツボックスであるので、パディングの使用は、要素のサイズを増加させる、例えば{幅：60PX;パディング：0 20ピクセル}、他の干渉CSSの場合、この時のコンテンツボックスの幅は、60 * 2 + 20 = 100です。構築するための設計管理ページドラフトフレームワークの急速な完了を容易にするために、我々は関係なく、あなたが計算を介して取得する必要がどのくらいのパディング、または幅と高さの開発効率に影響を与え、側面の要素に直接取得する傾向があります。別のジョブが幅を固定することを、パディングとコンテナのサイズには影響しませんので、したがって、我々は、ボックスのサイズ変更ボーダー・ボックスに設定されます。実際には、ほとんどの場合、それはありませんが、あなたが知っておくべき特別なケースがあり、その値が十分な大きさのパディング、パディング+コンテンツのとき>幅際、以下の場合のようです：
<style>
.box{
display:block;
width:80px;
padding:0 60px;
box-sizing:border-box;
}
</style>
このとき、パディング>幅は、最後の要素は120ピクセル幅、80px代わりである、という点で性能特性にブロックするための要素であり、インライン要素のため、いくつかの詳細は、実施によって説明される必要があるだろう。
2.paddingサイズとインライン要素
ここで第一、誤解を修正パディングインライン要素は、水平方向のみに影響を及ぼし、それは垂直方向には影響を与えないであろう。垂直方向と行の高さの垂直整列（CSS2.1、コンテンツのフレックスCSS3レイアウト）効果によって完全にインライン要素の挙動は、視覚的に垂直の2行を変更していないが、このような知識は、非常に一方的ですピッチは、私たちはただ、垂直方向のインライン要素のスペースがパディングによって影響される見つけることができる要素に加えて、背景色をインライン化するために少しテストを行う必要があります。
<div><span class="havePad">hello</span><span class="havePad">world</span></div>
<style type="text/css">
body{
margin: 40px;
}
.havePad{
padding: 20px;
border: 1px solid #ccc;
background: #E6A23C;
}
</style>
値下げエディタは、タグ言語をサポートしているので、次のように、私たちが直接、最終的な結果はプレビューできます（ヒント：ブラウザから直接CSSスタイルを参照するには、以下の要素を確認することができます）
私たちは、パディングがインライン要素の大きさに影響を与えるだろう、見ることができますが、あなたがオーバーフローする親コンテナを追加するとき：オートを親コンテナはまた、このような観点を確認し、スクロールバーに表示されるとき、それは「垂直パディングに似ていますインライン要素役に立たない「引数は明らかに間違っています。まあ、後でこの機能を知って、我々はそれを行うためにそれを使用することができますか？最も一般的な効果は、例えば記事のテキストリンクは、デフォルトでは、これらのリンクは、フォントサイズフォントサイズの制御によって、私たちは彼の下パディングを増やす今回面積を打つ、それは無い」ことができ、ヒット領域の要素を高めることです、「影響を受けることなく、視覚的なレイアウト面積を増加します。
3.paddingパーセント値
異なる特性マージンとパディングは、パディングが負の値でサポートされていない、幅に対して水平方向または垂直方向のいずれかパディング高性能わずかに異なる幅、パディングパーセント値の割合は、親コンテナを算出しますCSSは、デフォルトの水平流であるため、ので、幅の値が有効なままになります。パディング機能の幅に基づいて、百分率の計算は、いくつかの特定の機能に基づいて実装されてもよいです。著者らは、画面全体図のヘッドのWeb開発ニーズは、高度にカスタマイズされた場合に、低解像度の画面イメージをもたらすことができる固定ヘッド図形の例を引用し、この時間を非効率的に圧縮されていますあなたは図の縦横比の固定ヘッドを達成するために広いパディングの高い割合を使用できる機能の幅に基づいて計算されています。コードは以下の通りです
<style>
.box{
position:relative;
padding:10% 50%;
}
.box > img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
業績連動型の要素を含む割合パディング属性は次の奇妙な現象によってCSSの特殊な属性のいくつかのインライン要素のパディングの割合を表示していますが、若干異なっています。
業績連動型の要素を含む奇妙なパーセント値を4.padding
著者はインライン要素のためのインパクトパディングの割合を調査したいくつかの奇妙なCSSコードを与え、以下では、CSSの奇妙なイベントを探索するためのステップバイステップガイドになります。私たちは、ローカルに自分自身をテストすることができます興味を持っています。コードは以下の通りであります：
<div class="box">
<span class="span">一二三四</span>
</div>
<style type="text/css">
body{
margin: 0;
padding: 300px;
}
.box{
width: 400px;
height: 100px;
background: green;
}
.span{
line-height: 40px;
padding: 50%;
background: gray;
}
</style>
結果は（ここでは、絵がとても直接HTMLコードを使用していない明確になります）を以下に示します
結果には、さらに2つの奇妙なスタイルをプロデュース：
不足している（1）「」単語
（2）「五角形」を生成
テキストは、CSSがほとんど役に立たない実用的な値であるが、しかし、インライン要素の我々の深い理解のために、その性能のためには、多くの場合、この場合のように複数のルールを持つ複数のプロパティの発効の結果である多くの現象を、説明することは困難である」、問題を説明します世界便利。 " この問題について、私は3のより明確な説明を抽出し、生じます。これは、CSSが動作しているかを理解するのに役立ちます。
- パディングが自動的に破線でインライン要素について。
- パディング領域はコンテンツと一緒にラップします。
- カスケードスタイルはカバレッジを持っている、かつての>は、同じレベルのパターン、。
今、私はすべての3つのポイントを少し説明しましょう、その前に、我々は、つまり、パディングの値の割合は、親要素の幅に基づいて計算され、明確にすることができ、この場合には、パディング値は、ダウンおよそ400ピクセル* 50です= 200pxの％。（パディング約50％とパディング、見直し、この章に基づいてパディングの一部を要約するために注意を払ってください業績連動要素を含む。）だから、インライン要素の最終幅=程度+のインライン要素のコンテンツのパディング値の幅。確かに、親要素のこの特定の幅>幅、その要素は、自動的に改行は驚くべきことではないでしょう。これまでのところ、我々は前進小さな一歩を踏み出しています。私たちは、それが旅行のために実際にある、「4」が単語であることがわかります。
今回は、私たちが削除背景色のインライン要素を持って、少し変更を行う必要があり、そして何が起こるかを参照してください。
当我们把background去掉之后，发现“一”其实就在二三的前面，只是好像被背景色给覆盖了。这里我们就需要用到作者给出的的第二个和第三个解释了，首先，由于“四”换行了，导致“四”后面的padding-right区域会随着内容一起换行。而"一二三"的宽度是padding-left + 3个字的宽度，而"四"换行之后的宽度是padding-left+1个字的宽度，这个时候padding-left和padding-right宽度抵消，由于层叠样式的覆盖性，层级相同的样式，后来的"四"携带着换行的padding正好覆盖了前面一行一个文字长度的区域，导致正好一个"一"字被覆盖了，同时，由于上面的二三的宽度是多出来的部分，下面的四由于padding换行也多出一个字的高度，因此正好产生了右下角的空白区。至此，我们已经解决了，"一"去哪儿了以及右下角空白部分的问题。
看似上面提出的两个问题都解决了，但我仍然不满足，再提出一个问题
（3）为什么是"四"换行，而不是"三四”,也不是"二三四"。
要解决这个问题，我们得往这个内容区多加一些字看看，最终我将字添加到一二三四五六七八九十一二三四，才发现最后两个字"三四"换行了。
由于有两个字换行，因此遮住了开头的"一二"，这正好印证了我之前的说法，同时我也提出一个什么时候字会换行的猜想，根据第二章讲到的元素包裹性的内容，我猜测，当内容区未将要超出父容器的宽度减padding-left时，content部分的最后一个子会自动换行，同时宽度自适应，当内容即将要超出父容器的宽度减padding-left时，content多余的部分会换行。这里仅根据元素包裹性提出一个猜想，有更好的说明的欢迎指正。