CSSを知らない場合

前置き

CSSは、ウェブ開発者にとっては馴染み深いものですが、バックエンドでもフロントエンドの開発者がスタイルを調整するのに役立ちます。それは多くのプログラマが体系的に学ぶために時間を費やす必要性を感じないように、そのシンプルさと理解の容易さのためです。私は一度、プロジェクトでは、UIの設計に従って、非常にシンプルなスタイルを描いた覚えて、彼らは100％問題ないと感じ、おなじみの物事は、次の日、テストのリーダーシップは、深刻なスタイルのエラーがあると予想されるように、エラーが発生しやすいと思うほど、批判されました。その時、私はまた、明らかに自分のコンピュータ上で、同僚のコンピュータのテストに問題がない隣に、自分のコンピュータに問題がある、憤りを感じています。後で自分の混乱のレイアウトは、その瞬間から引き起こされることがわかり、私はCSSを再理解することにしました。

注：この記事ではすべてのポイントをカバーするのではなく、私にとって体系的に学ぶまで知らなかったポイントのみを列挙します。

リード

まず2つ質問です：

1.以下のスタイル設定で、ブラウザでのdivの実際の表示幅は？

.div {
 width: 100px;
 margin: 10px;
 padding: 10px;
 border: 1px solid black;
}

もし、box-sizing: border-boxというプロパティを追加したらどうなるでしょうか？

2.コードの一部

<p><img src="1.jpg"></p> 
				p{
 text-align: center;}img { position: absolute;}

上記のスタイルは次のうちどれですか？

ストリーム属性

ストリームという概念は、多くの言語で、通常はファイル操作のために使われています。CSSでは、デフォルトで、ブロック要素はコンテナ全体を満たす水の流れのように振る舞い、インライン要素は各行を満たす水面に浮かぶ丸太のように振る舞います。流体レイアウトとは、要素の「流れ」の特性を利用してさまざまなタイプのレイアウト効果を実現し、適応的な特性を実現することを指します。

ボックス

要素のボックスモデルというのは聞き慣れないと思いますが、空の要素にもボックスモデルがあります。実際、点に関する機能から、要素は外部ボックスとコンテナボックスにも分けることができ、外部ボックスは行表示や線表示を反映するために使用され、コンテナボックスはボックスモデルであり、コンテナボックスはブロックレベルコンテナボックスとインラインコンテナボックスに分けることができます。コンテナ・ボックスはさらに、コンテント・ボックス、パディング・ボックス、ボーダー・ボックスに分けられます。

width

widthは間違いなく最もよく使われる属性で、バックエンドの人なら誰でもこの属性を使って要素の幅を設定するでしょう。しかし、インライン要素に直接 width を設定した場合、何か効果があるのでしょうか？

.test {
 width: 100px
}
<span class="test">a</span>

答えはノーで、要素の幅が文字'a'と同じだけしかないことがわかります。実際、withはブロックレベルのコンテナボックスに対してのみ機能します。では、具体的にボックスモデルのどの部分で動作するのでしょうか？

デフォルトでは、コンテンツ部分であるcontent-boxに作用するため、要素の実際の幅はcontent-boxの幅＋padding＋borderとなります。

パネルが選択されたため、パネルの幅は、元の幅に加えて、境界線の幅になっている、それがちょうど完全である場合、あなたは、このような問題が発生した可能性があり、複数のパネルパネルの行は、パネルのいずれかにマウスを重ねると、プラス境界線を強調表示するには、ちらつきの問題がある可能性があり、それはまた、最後のパネルの行の表示につながる可能性があります。

この問題を解決するには、box-sizing属性がborder-boxに設定され、withがcontent、padding、borderを含むように、withオブジェクトの役割を変更するためにbox-sizingを使用することができます。

widthのデフォルトはautoで、通常のブロック-レベル要素では流動的、つまり親要素の幅の100%になり、絶対・固定ブロック-レベル要素では折り返されます。widthとしてフォーマットされ、これは位置決めを持つ最も近い祖先要素からの相対値として計算されます。

Height

幅に相対的な高さは、通常のドキュメントフロー要素のため、それほど複雑ではありませんが、その親の役割をリコールするためにパーセンテージの高さの値は、高さの値が有効であることができる必要がありますので、時には直接高さを設定することが見つかりました：100％は効果が見つかりません、理由は、要素の直接の親要素が設定された高さを示していないことかもしれません。

絶対位置指定された要素に対するパーセンテージ計算と、絶対位置指定されていない要素に対するパーセンテージ計算には違いがあります。 その違いは、絶対位置指定された要素に対する幅と高さのパーセンテージ計算は、パディングボックスに対する相対計算、つまりパディングサイズが考慮されるのに対し、絶対位置指定されていない要素に対する計算は、コンテンツボックスに対する相対計算であるということです。

Padding

インライン要素のパディングは垂直方向のレイアウトにも影響を与え、視覚的な表現に影響を与えます。この機能は、クリック可能な領域を増やすために使うことができます。

パディングのパーセンテージは、現在の親ノードの幅に対して水平方向と垂直方向に計算されます！

Margin

マージンといえば、まず思い浮かぶのがマージンマージンという現象です。マージンが発生する条件

1.ブロック-レベル要素。ただし、フロートや絶対位置決めされた要素ではありません。

2.ドキュメントの現在の流れ方向と垂直な方向にのみ発生します。

合併のやり方と解決方法：

1.隣接兄弟要素のマージンマージン

ブロック方法：

• 要素の一つをdisplay: inline-blockに設定します；
• 代わりにpaddingを使いましょう；

2. 親要素と最初/最後の子要素。

ブロックの親子マージントップのマージメソッド：

• 親要素はブロック書式コンテキスト要素として設定されます。
• 親要素のborder-top値の設定;
• 親要素のpadding-top値の設定;
• 親要素と最初の子要素を分離するインライン要素を追加します。

マージン・ボトム・マージンの場合は、以下のようにします。

• 親要素はブロック書式コンテキスト要素として設定されます。
• 親要素の border-bottom 値の設定;
• 親要素のpadding-bottom値の設定;
• 親要素と最後の子要素を分離するインライン要素を追加します。
• 親要素は height、min-height または max-height を設定します。

3.空ブロックレベル要素のマージ

道を塞いでください：

• 垂直ボーダーの設定;
• 垂直パディングの設定;
• 内部にインライン要素を追加します。
• heightまたはmin-heightを設定します。

組み合わせ計算ルール：プラスが大きい方を取り、プラスとマイナスを足し、マイナスが小さい方を取る。

margin:auto: 設定された幅を持つブロックレベル要素で、片側が fixed で片側が auto の場合、auto は残されたスペースの量になります; 両側が auto の場合、スペースは均等に分割されます。 margin:auto の計算をトリガーするための前提条件は、width または height が auto であるとき、要素が対応する方向で auto 埋めされることです。

マージンのパーセンテージは、現在の親ノードの幅に対して水平方向と垂直方向に計算されます！

フロート

エレメント・フロートは親ノードの高さを崩します。

1. 隣接する要素でclear:を使うことは可能ですが、この方法はfloatをクリアするだけで、親ノードの高さを支えるのと同じ問題ではありません。親ノードの高さを支えたい場合は、要素をfloatの下に表示させるか、floatノードの高さを超えなければなりません。Clear属性はインライン要素では機能しませんが、ブロックレベル要素では機能します。
2. 親ノードを BFC

せかいきんゆうきき

ブロック・フォーマット・コンテキストには次のような特徴があります：

1. BFCは内部と外部のBFCを隔てるバリアのようなもので、内部と外部の領域のレンダリングは互いに影響しません。BFCには、内部のサブ要素をレンダリングするための独自のルールがあり、外部のレンダリングには影響しません。
2. BFCの領域は、外部フロートボックスの外側のマージン領域と重なりません。つまり、外部フロート要素の領域とBFCの領域は別個のものであり、重なり合うことはありません。
3. BFCが高さを計算する際、内部の浮遊エレメントの高さも考慮されます。つまり、BFCエリア内に浮遊エレメントが1つしかなくても、BFCの高さが崩れることはなく、高さは浮遊エレメントの高さ以上となります。
4. HTML 構造では、BFC 領域を構築する要素がフローティングボックスのすぐ隣にあるとき、つまりそのフローティングボックスの兄弟ノードであるとき、BFC 領域はまずフローティングボックスの隣にレンダリングしようとしますが、幅が十分でない場合はフローティング要素の下にレンダリングされます。

BFCの結成方法

ゴーストブランクノード

HTML5の文書モードでは、すべての「行ボックス」の前に幅0の「ゴースト空白ノード」があり、そのインライン・プロパティは通常の文字とまったく同じように振る舞い、font-size:0を使うことでクリアすることができます。

Vertical-align

ベースライン、トップ、ミドル、ボトムなどの値を設定するだけでなく、次のように特定の値やパーセンテージを設定することもできます：10px,10%;正の数を設定する場合、ベースラインのパフォーマンスを上へ、ベースラインの負の値を下へ、パーセンテージはラインハイトに対して相対的に計算されます。

vertical-alignは、インライン要素とテーブル・セル表示の要素に適用された場合にのみ機能します。通常、vertical-alignはline-heightと一緒に使われます：

.box { 
 height: 120px;
}
.box > img { 
 height: 96px; 
 vertical-align: middle;
} 
<div class="box"> 
<img src="1.jpg"></div>

この時点では、"ゴーストブランクノード "の高さの前に行ボックスボックスが小さすぎるため、効果を表示するには、この時点で.boxにline-heightを追加するには：120px、それは効果的なことができます。図のように：

Absolute

絶対位置決めされた要素のパーセンテージ幅は、位置が固定でない最初の祖先要素からの相対値で計算されます。 計算と位置決めは、先祖の位置決めされた要素のパディングボックスからの相対です；

要素にposition:absoluteのみが設定され、orientation属性が設定されていない場合、その要素は非依存的な絶対配置で振る舞います。

下の図は、多くの人がコードを書くときのイメージです：

.outer {
 position: relative
}
.icon {
 position: absolute;
 top: 0;
 left:0;
}
<div class="outer">
 <img class=".icon" src="0.png"/>
 <img src="1.png"/>
</div>

それは単に

.icon {
 position: absolute;
}
<div>
 <img class=".icon" src="0.png"/>
 <img src="1.png"/>
</div>

相対的な向きが設定されると、要素はその向きで流体として振る舞います。

Relative

相対的な位置づけには、主に2つの特徴があります。

それ自身に対する相対とは、要素が相対に設定され、その方向が設定されたとき、その方向が設定されていなかったとしたら、その要素は相対的な位置にあり、文書の流れから外れることはないということです。

写真の設定

.img{
 position: relative;
 right: 50px;
 opacity: 0.4;//を見やすくするために
}

ご覧のように、イメージはその位置に対して50pxだけオフセットされ、左右に隣接する2つの要素は位置効果を受けません。

ポジショニングの変位は自分自身に対する相対的なものですが、パーセント値は包含ブロックに対する相対的なものとして計算されることに注意してください。

ドキュメント・フローの方法に従って、デフォルトでは、top/bottomを同時に使用した場合、bottomは無効となり、left/rightを同時に使用した場合、rightは無効となります。

カスケード規則

ここを見て、最初の考えはz-indexではありませんが、確かにz-indexが、実際にはz-indexはそれのほんの一部です。時には、明らかにA要素のzインデックス高とB要素のzインデックスに設定しますが、AはBをカバーすることはできませんし、なぜ。など：

.car-text{
 z-index: 999;
 color: red;
}
img {
 position: relative;
 right: 50px;
}
<div>
 <span class="car-text">car</span>
 <img src="1.png"/>
</div>

結果は以下の通り：

テキストはz-index:999に設定されていますが、z-indexが999999に設定されていても結果は同じで、イメージに覆われています。なぜでしょうか？

カスケード・コンテキスト：

コンテキストのカスケードには決まったルールがあり、カスケードのルールは以下の通りです：

z-indexを設定して比較できるのは同じレベルの要素だけなので、上の例は次のように変更できます：

.car-text{
 z-index: 999;
 color: red;
 position相対;//要素をカスケード・コンテキスト要素として設定する
}
img {
 position: relative;
 right: 50px;
}

おわりに

よく使われる属性については以上です！