CSS-Tricks(二)

1.line-heightの文字垂直中央揃え

demoはここにいる
2.SASS mixin異なるデバイスのピクセル比によって異なる後ろ姿の画像をロードする

@mixin background-image($url: 'decrease_1'){
  background-image($url + '@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
    background-image($url + '@3x.png')
  }
}

これは単独で書類を作る
3.ピット:親要素がmin-height:100%に設定されている場合.サブレベル要素はmin-height:100%を再設定します.有効でない
パーセンテージの値を設定すると、参照する要素に対応する値は確定した値でなければなりません.そうしないと有効になりません.
demoはここにいる
4.文字と画像を一緒に置くデフォルトはベースラインの位置合わせで、破る方法はvertical-align:topです.
前に何度も使ったので、例を挙げません.
5.floatとフローティングクリア

にフローティングが設定されていると、現在の行の一番左または一番右にフローティングし、四角形のループの効果を形成します.demoはここで

フローティング要素はドキュメントフローから離れ、div要素を隠すが、divの具体的な内容を隠すことはなく、フローティング要素は親要素の高さを支えず、親要素の高さはドキュメントフローから離れていない要素によって支えられている.demoはここで

floatの最も重要なテクニック:フローティングをクリアします.フローティング要素はドキュメントフローから離れており、親要素の高さを支えることはありません.したがって、フローティング要素の高さが親要素より大きい場合、飛び出します.この場合、親要素をどのように包んで、フローティング要素を親要素の高さを支えることができますか?clearメソッドを使用します.要素clear:bothを設定します.左側と右側にフローティング要素を持つことはできません.これにより、フローティング要素の下に移動し、ドキュメントフローにあります.これにより、上のフローティング要素も親要素に囲まれます.この要素は通常、親要素の偽要素で書かれます.(踏坑:ここにpositionは书けません...书いたらどうやって高さを支えますか)

ここに穴を踏んで、偽の要素で高さを支えたら、どうやってpositionを書くことができますか?汗をかく!汗をかく!
demoはここにいる
6.フローティングをクリアする3つの方法

divラベルを書き、clear:bothを設定します.

親要素にCSS擬似クラス(spanラベルのようなもの)を書き、clear:bothを設定します.この方法は最大

親要素overflow:hidden/autoを設定します.第3の方法のdemo