CSSの断片的な知識ポイント
- （1）HTMLセマンティクスを理解する方法は？
さまざまなタグを合理的に使用します。シャトルを分割しないでください。ここをクリックして他の投稿にジャンプして表示してください。
- （2）インライン要素、ブロックレベル要素、インライン要素とそれらの特性
ブロックレベル：ブロック、テーブル。専用ライン
インライン：インライン、可能な限り一緒に絞る、幅、高さを設定するのは無効です
インライン：インラインブロック、外部要素と他の要素は1行にあり、内部要素は1行だけにあります。要素の高さ、幅、行の高さ、および上下の余白を設定できます。
Position：absoluteおよびfloat：left / rightはブロック状です。要素がabsoluteまたはfloatになった後、要素の幅と高さを設定でき、デフォルトの幅は親要素を占有しません。
- （3）％単位とは何ですか？
一般的に言えば、それは親要素に関連しています
1.通常の位置決め要素の場合、たとえば親要素を理解します
高さの％：それを含むブロックレベルのオブジェクトの高さのパーセンテージに基づきます。
行の高さの％：現在のフォントサイズに基づく行間隔のパーセンテージ。
％of width：含まれているブロック（親要素）の幅に基づいてパーセンテージ幅を定義します。
高さの％：それを含むブロックレベルのオブジェクトのパーセンテージに基づきます。高さの
マージンの％：親要素の幅に基づいて計算されます。親要素に幅がある場合は、親要素の幅を基準にします。そうでない場合は、親要素の幅を見つけます。幅が設定されていない場合は、画面の幅を基準にしています。
パディングの割合は、親要素の幅に基づいて計算されます。親要素に幅がある場合は、親要素の幅を基準にします。そうでない場合は、親要素の幅を見つけます。幅がない場合は、画面の幅を基準にします。
2.位置の場合：絶対;要素は配置された親要素を基準にしています
3.位置の場合：固定。要素はViewPort（ビジュアルウィンドウ）を基準にしています。
- （4）マージンの負の値はどういう意味ですか？
margin-topとmargin-leftの負の値：要素自体が上下に移動します
margin-bottomとmargin-rightの負の値：それ自体は影響を受けず、下の要素と右の要素はそれぞれ上または左に移動します
- （5）BFCの理解
BFC（ブロックフォーマットコンテンツ）ブロックレベルのフォーマットコンテキスト
つまり、独立したレンダリング領域であり、内部要素のレンダリングは境界外の要素に影響を与えません。
生産方法：
float不是none
position是absolute或者fixed
display是flex，inline-flex，inline-block，table-cell，table-caption
overflow不是visible
根元素
- （6）フローティングをクリアする方法
父盒子设置高度
.parent{
height: 200px;
}
添加额外标签 用clear：both
<div class="parent" >
<div class="left" style="float:left"></div>
<div class="right style="float:right""></div>
<div style="clear: both;"></div>
</div>
使用br标签和它的属性
<div class="wrap" >
<div class="left" style="float:left"></div>
<div class="right style="float:right""></div>
<br clear="both" />
</div>
父元素设置overflow:hidden
.parent{
border: 4px solid red;
overflow: hidden;
zoom: 1;
}
使用:after伪元素
.clearfix{
*zoom: 1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
-
（8）センタリングとレイアウト
-
（9）行の高さ
親要素が行の高さの数値またはパーセンテージ値を使用する場合、子要素は数値またはパーセンテージ計算値を直接継承します