推奨される学習方法
問題に基づく学習方法：問題を伴う学習は、集中力と明確な目的を助長します。これは、意図的な学習の要件であるだけでなく、発見学習の必要条件でもあります。心理学者は注意を2つのタイプに分けます：意図的でない注意と意図的な注意。意図的な注意には、事前に意識的な目的が必要であり、必要に応じて、特定のことに積極的に注意を払う意志と努力が必要です。それは人々の心理的活動の主観性と熱意を示しています。問題ベースの学習方法は、問題解決に関する情報への慎重な注意を強調するため、学習の方向性が明確になり、学習効率が向上します。
問題学習法を紹介した後、本日はトピックを紹介します。次に、cssの低レベルな知識と奇妙な現象を紹介し、誰もがcssをより深く理解できるようにします。
One.cssサイズ
1.推奨される最小幅-複雑なグラフィック効果を実現するため
cssでは、画像とテキストの重みがレイアウトの重みよりもはるかに大きいため、width：0の場合、表示される幅は「推奨される最小幅」になります。中国語の最小幅は、各中国語文字の幅です。西洋文字は、連続する英語の文字単位に依存します。
したがって、次のように、この機能に基づいていくつかの複雑なグラフィックを実装できます。
マウスが通過すると、次のようになります。
コードは次のように表示されます。
.minW{
display: inline-block;
width: 0
}
.minW::before {
content: "love 你 love";
color: transparent;
outline: 2px solid #cd0000;
}
.minW:hover::before{
content: "你 love 我";
color: transparent;
outline: 2px solid #cd0000;
}
コンテナの幅を0に設定すると、優先幅の影響により、テキストスペースに基づく形状が表示されることがわかります。
2.2。子要素の幅を100％に設定した場合の奇妙な現象の原理
親要素の幅=画像の幅+テキストコンテンツ
ブラウザのレンダリング原則の幅：最初にドキュメントコンテンツをダウンロードし、ヘッドスタイルのリソースをロードしてから、domコンテンツを上から下、外側から内側の順序でレンダリングします。この例の現象の理由は、親要素にレンダリングする場合、幅：子要素の100％はレンダリングされず、幅は画像の幅にテキストコンテンツを加えたものです。テキストを子要素にレンダリングする場合、親要素の幅です。修正済みです。現時点では、width：100％が親要素の固定幅であり、オーバーフローするのに十分な幅ではありません。
.box{
display: inline-block;
white-space: nowrap;
}
.text{
display: inline-block;
width: 100%;
}
理論的には、親要素の幅は子要素の幅の合計である必要がありますが、上の図に示す現象が発生します。理由は、ブラウザのレンダリングの順序（外側から内側）にあります。これは非常に重要です。
3.要素が高さをサポートするようにする方法：100％の効果
知識ポイント：絶対位置の幅と高さのパーセンテージはパディングボックスに基づいていますが、非絶対位置の幅と高さのパーセンテージはコンテンツボックスに基づいています
以下の方法：
* 1.设置显示的高度值
* 2.使用绝对定位
4.任意の高さ要素の展開と折りたたみのアニメーション（最大高さ/最小高さ）
1.min-height / min-widthの初期サイズはautoで、max-height / max-widthの初期サイズはnoneです。
2. min-height / min-widthの優先度がmax-width / max-heightよりも高い
上の図に示すように、展開と折りたたみのアニメーションを実現するには、max-height / min-heightを使用できます。
.nav > .sub-nav{
max-height: 0;
overflow: hidden;
transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
max-height: 400px;
}
2.インライン要素の詳細な調査
一般的なインライン要素は次のとおりです。表示がinline、inline-block、inline-tableに設定された要素インラインボックスモデル：
コンテンツ領域：テキスト選択の背景色領域として理解できます（強調）
インラインボックス：インラインラベルまたはプレーンテキスト
ラインボックス：インラインボックスで構成されるライン。各ラインはラインボックスです。
含むボックス：ラインボックスボックスで構成されるボックスゴースト空白ノード：HTML5ドキュメント宣言では、インライン要素の解析とレンダリングは、各ラインボックスボックスの前に空白ノードがあるかのように動作します。次の場合に示すように：
3.コンテンツの深い理解
1. Webでは、多くの置換要素のデフォルトサイズ（境界線を除く）は300 * 150で、ビデオ、iframe、キャンバスなどの明確なサイズ設定はありません。imgやフォームなどのいくつかは0です。要素の置換サイズは、ブラウザ自体に関連しています。
2. img要素の場合、cssサイズがある場合、最終的なサイズはcssサイズによって決定されます（cssサイズ> htmlサイズ>固有サイズ）
3.画像のsrc属性がデフォルトの場合、画像にはリクエストがありません。これは、最も効率的な方法です。次に、このメソッドを使用する画像プレースホルダーコードを示します（firefoxブラウザーの場合、srcのデフォルトのimgは通常のインライン要素、幅と高さの設定は無効です）：
img { visibility: hidden; }
img[src] { visibility: visible; }
コンテンツコンテンツ生成テクノロジー
1.改行を実現する
::after{
content: '\A';
white-space: pre;
}
2.読み込みアニメーションを実現します
.dot{
display: inline-block;
width: 8em;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
.dot::after{
display: block;
margin-left: 5.2em;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot{
33% { transform: translateY(-3em);}
66% { transform: translateY(-2em);}
99% { transform: translateY(-1em);}
}
3.属性値コンテンツの生成
<div class="icon" data-tip="江小白"></div>
/* 可以使用原生属性和自定义属性 */
.icon::after{
content: attr(data-tip);
}
4.カウンター属性---技術的効果を達成するための純粋なcss
.box1{
counter-reset: count1;
}
.xigua:checked::before{
content: counter(count1);
counter-increment: count1;
position: absolute;
color: transparent;
}
.box1::after{
content: counter(count1);
}
</style>
<div class="counter">
<div class="box1">
<div>西瓜<input class="xigua" type="checkbox" /></div>
<div>香蕉<input class="xigua" type="checkbox" /></div>
<div>萝卜<input class="xigua" type="checkbox" /></div>
</div>
</div>
Four.Paddingの詳細な調査
1.ボックスモデルがbox-sizing：border-boxに設定されている要素の場合、パディングが十分に大きいと、幅は無効になります。
width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;
2.インライン要素の場合、パディングはビジュアルレイヤーとレイアウトレイヤーの両方に影響します。親要素がoverflow：autoに設定されている場合、インラインの子要素の垂直パディングにより、親要素がスクロールバーとして表示される場合があります。そうでない場合、親要素が設定されていない場合オーバーフローは垂直方向にのみ重なり、レイアウトには影響しません。
/* 父元素设置 */
.pd-2-1{
overflow: auto;
}
.pd-2-1 > span{
padding-top: 1em;
padding-bottom: 1em;
}
3.パディングの実用化（特定の実装について考えることができます）
1.增加链接或按钮的点击区域的大小
2.利用内联元素的padding实现高度可控的分割线
3.用内联元素实现瞄点定位距离
4.パディングパーセンテージ値を使用して、画像を比例してスケーリングする効果を実現します。
.pd-3{
padding: 10% 50%;
position: relative;
}
.pd-3 img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
**注：インライン要素の垂直方向のパディングにより、ゴーストブランクノードが表示されます。この時点で、font-size：0の設定を検討してください。
5.パディングとグラフィックスの描画
/* 菜单 */
.icon-menu{
display: inline-block;
width: 120px;
height: 10px;
padding: 35px 0;
border-bottom: 10px solid;
border-top: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
border: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
5.マージンの詳細な調査
1.使用：nth-type-of（3n）を使用して、子要素のテールマージンを削除します
.mg-item:nth-of-type(3n){
margin-right: 0;
}
注：コンテナをスクロールできる場合、IEとfirefoxではpadding-bottom値は無視されますが、chromeは無視されません。現時点では、スクロールコンテナの下部はmargin-bottomまで空白のままにすることができます。
本質的な違いは次のとおりです。chromeは子要素が親要素のコンテンツボックスサイズを超えるとスクロールバー表示をトリガーしますが、IEおよびFirefoxブラウザはパディングボックスサイズを超えるとスクロールバー表示をトリガーします
2.マージン合併条件
ブロックレベルの要素。ただし、フローティング要素と絶対位置の要素は除きます。
デフォルトのドキュメントフローでは、垂直方向にのみ表示されます
マージンマージの3つのシナリオ
隣接する兄弟
親と最初/最後の子要素
* 解决方案： 父级设置为块级格式化上下文元素
父元素设置border-top/bottom值
父元素设置padding-top/bottom值
父元素设置高度
空のブロックレベルの要素マージンのマージ
3.マージン統合の計算ルール
「正と正の値が大きい」、「正と負の値を追加」、「負と最も負の値」
4.マージンの深い理解：自動
片側が固定で片側が自動の場合、残りのスペースは自動です
両側が自動の場合、残りのスペースは均等に分割されます
マージンをトリガーするための前提条件：自動計算：幅または高さが固定値の場合、要素には自動充填特性があります
/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;
4.絶対配置された要素は、margin：autoを使用して、水平および垂直のセンタリングを実現します（ie8 +と互換性があります）
.father{
position: relative;
}
.child-2{
position: absolute;
left: 0; bottom: 0; right: 0; top: 0;
width: 40px;
height: 20px;
margin: auto;
}
***無効なマージンの分析：
表示計算値がインラインである、置換されていない要素の垂直マージンが無効です
インライン置換要素の場合、垂直マージンが効果的であり、マージンマージの問題がないため、マージンマージが発生することはありません。
インライン機能により、マージンが失敗します。コンテナ内に画像があり、画像がmargin-topに設定されます。margin-topの負の値が大きくなるにつれて、特定の負の値に達すると、画像は上にシフトしなくなります。
6.文字xとcssのベースライン
ベースライン文字xの下端
x-heightは文字xの高さを指します
ex：exは、相対的な単位である小文字のxの高さを指します。
vertical-align：middleはベースラインの高さ1 / 2x-heightを指します
内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的
7.BFC-ブロックレベルのフォーマットコンテキスト
パフォーマンス：要素内のレイアウト変更は外部要素に影響を与えないため、フローティングの影響をクリアするために使用できるマージンのマージはありません。
BFCをトリガーするための条件：
ルート要素
floatの値はnoneではありません
オーバーフローの値はauto、scroll、hiddenです
displayの値はtable-cell、inline-blockです
位置の値は静的または相対的ではありません
要素にBFC特性がある場合、クリアする必要はありません。両方ともフロートをクリアします。
表示：テーブルセル特性：幅をいくら大きく設定しても、テーブルコンテナの幅を超えない
オーバーフロー切断境界：境界ボックス：オーバーフロー：非表示の要素には、パディングと境界線の両方が設定されています。子要素がコンテナーの幅と高さの設定を超えると、切断境界は、パディングボックスの内側の端ではなく、境界ボックスの内側の端になります。
PC側では、デフォルトのスクロールバーはすべてからであり、PC側のスクロールの高さはdocument.documentElement.scrollTopで取得でき、モバイル側ではdocument.body.scrollTopで取得できます。
PC側のスクロールバーの幅は約17pxです
ページスクロールバーが揺れないようにする方法：
html{
/* ie8 */
overflow-y: scroll;
}
:root{
overflow-y: auto;
overflow-x: hidden;
}
:root body{
position: absolute;
}
body{
width: 100vw;
overflow: hidden;
}
9.複数行のテキストがオーバーフローしたときに省略形を表示するCSSメソッド：
.ell-rows-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
8.相対的な難易度の分析
相対的な位置決め変位はそれ自体を基準にしています。左/上/右/下の値がパーセンテージ単位の場合、計算されたサイズは親要素に基づきます。
左/右または上/下の反対の属性が同時に表示される場合、一方向の属性のみが有効になります。優先度はドキュメントフローの順序に関連します。デフォルトのドキュメントフローは上から下、左から右なので、上優先度は下より高く、左の優先度は右より高い
相対的な最小化の原則
相対位置を使用しないようにしてください。依存しない絶対位置を使用して、いくつかの問題を解決できます。
相対を使用する必要がある場合は、階層カバレッジなどの問題を回避するために、相対を最小化する必要があります（最小包含領域）
カスケードコンテキスト
位置決め要素のデフォルトのz-index：auto;このとき、通常の要素と同様に、z-indexが任意の値に設定されると、スタッキングコンテキストが作成され、順序は次のようになります。
カスケードコンテキスト<負のz-index <ブロック<float <インライン<z-index：自動<正のz-index
新しいcss3属性のカスケードコンテキスト：
1.flex
2.opacity不为1
3.transform不为none
4.mix-blend-mode不为normal
5.filter不为none
6.isolation是isolate
7.will-change为上面2-6的任意一个
8.元素-webkit-overflow-scrolling设为touch
z-indexの負の値は、実際のアプリケーションのブロックを下回っています。
1. 可访问性隐藏
2. ie8下的多背景隐藏
さて、cssについてはまだまだたくさんの知識があり、見た目では解決が難しい問題もありますが、現時点で目立つのは、基礎となるコードをより深く理解していることです。