CSSの仕事の応用知識点と常考面接問題の総括(一)


  • セレクタの解析方式は逆で、右から左へ、つまりサブ要素から親要素まで、ブラウザの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