セレクタの解析方式は逆で、右から左へ、つまりサブ要素から親要素まで、ブラウザのCSSに対する解析速度を速め、性能を向上させる. セレクタ重み:IDセレクタ#id{}+100クラス、属性、擬似クラス+10要素「擬似要素」+1その他のセレクタ+0 重み非進位画像の下に隙間があり、imgはinlineのように整列しています.つまり、ベースラインbase-lineで整列しています.つまり、ベースラインと一定の隙間があります.解決策:vertical-align:bottom、ベースラインで整列させます.シナリオ2:display:block. 行のinline-boxの行の高さは最大行の高さそのinline-boxによって決まるので、異なる行の高さを設定して同じように表示し、行の高さはその中のレイアウトを変えるのではなく、親の箱を高くしました. 親コンテナの中で1つの要素を中心にしたい場合は、line-heightを自分の要素の高さよりも高く設定すると、高い高さが上下両側に分布し、垂直中心の効果を実現します. hsla(x,y,z,k)色相背景グラデーション:background:linear-gradient(135 deg,red,green)マルチバックグラウンドオーバーラップ:bg:linear-gradient(135 deg,red,green)、linear-gradient(135 deg,red,green)の間にカンマを付ける
雪碧図:同じ画像を使用して、主にbackground-positionで大背景図の小さなアイコンを位置決めします.メリット:パフォーマンスの最適化、画像のロードの削減、HTTPのリクエストの削減. base 64ピクチャ:テキストフォーマットで、小さなアイコンの使用シーンに適しています.欠点:体積は元の図より1/3大きくて、CSSファイルは増大して、復号のオーバーヘッドを増大します(先にピクチャーに変換して、更に後の操作をして、ブラウザの負担を増加して、特に移動端);利点:性能の最適化、HTTP接続数の減少. border-img:枠線に背景を付ける三角形の作成:div{
width:0px;
height:30px;
border-bottom:30px solid red;
border-right:20px solid transparent;
border-left:20px solid transparent;
}
スクロールバー:行数が多すぎる場合、overflowプロパティを使用して表示効果を設定し、4つの値があり、auto適応(行数が足りない場合はスクロールバーが現れず、行数が多すぎる場合はスクロールバーが現れず、windows環境下).hiden非表示(行数が多すぎて非表示になり、部分のみが表示されます).Visiable(すべての行数が表示され、親要素の外側が押し出されます)、scroll(効果はautoとほぼ同じですが、windows環境では、行数が少ない場合でもスクロールバーが表示されます.) 文字折り返し:overflow-wrap(word-wrap)汎用改行制御;word-breakはマルチバイト文字に対して;white-space空白で改行します.white-space:nowrapを使用して、長い文を改行しないようにします. CSS Hack:Hackは合法ではないが発効する書き方で、主に異なるブラウザを区別するために用いられ、欠点:難理解難メンテナンスは失効しやすい面接本題>CSSスタイル(セレクタ)の優先度:1.計算ウェイト決定2.!importantの優先度が最も高い3.インライン様式4の後書きの発効(近接原則)面接真題>擬似クラスと擬似要素の違い:擬似クラステーブルの状態;擬似要素は本当に要素があります.前者は単一コロン、後者は二重コロンである. 面接真題>checkboxをどのように美化しますか? 1.Label[for]とid 2.オリジナルinput 3を隠す:checked+label