CSS小tip整理

1.cssを使用して、リストの先頭と末尾に矢印を追加します.

/*    */
ol a[rel="prev"]:before {
    content: "\00AB";
    padding-left: 0.5em;
}


/*    */
ol a[rel="next"]:after {
    content: "00BB";
    padding-right: 0.5em;
}

2.親エレメントにフローティングの子エレメントを含めるには、次の手順に従います.

クリーンアップする要素

を追加

親要素をフローティングし、ある要素を使用して

をクリーンアップ

overflow：hidden

3.固定幅、フロー、スプリングレイアウト

固定幅:簡便で、よく使われ、利用可能な空間を十分に利用できず、柔軟ではない

フローレイアウト:寸法はパーセンテージで設定します.ブラウザウィンドウに対して伸縮することができます.ただし、ウィンドウ幅が小さい場合には、行が非常に狭いなり、画素またはem単位のmin-widthを追加する必要があり、レイアウトが狭すぎることを防止する

.

フレックスレイアウト:要素の幅をem単位で設定します.

ストリーミングおよび弾性画像:弾性レイアウトは画像要素に遭遇する、画像を背景として使用することができ、次いで容器を100%に設定し、overflowをhidden

に設定する.
4.一般的なバグ

二重距離浮動bug IE 6以下のバージョンでは、任意の浮動要素の外側距離を倍にするソリューション:display：inlineを設定すると、bug

を修復できます.

3ピクセルテキストオフセットバグIE 5およびIE 6では、1つのテキストが1つのフローティング要素に隣接する場合、このバグは

として現れる.
例:

.myFloat {
    float: left;
    width: 200px;
}
p {
    margin-left: 200px;
}

/*
      ：
 */

p {
    /*
     * IE 6 ，           ，IE 6
     *                    ，
     *               。 
     */
    height: 1%; 
    margin-left: 0;
}
.myFloat {
    margin-right: -3px;
}

フローティング要素が画像であれば、まだ足りません.画像ソリューション:

p {
    height: 1%;
    margin-left: 0;
}
img .myFloat {
    margin: 0;
}

IE 6の繰り返し文字bug一連のフローティング要素の最初の要素と最後の要素の間に複数のコメントがある場合、このbugが表示されます.最初の2つの注釈は影響しませんが、後続の各注釈は2つの自己読み取りを繰り返します.解決:注釈

を削除

相対容器中の絶対位置決めIE 5,6の位置決めが不正確であり、相対位置決め容器にレイアウトを持たせる必要がある.条件付きで容器に小さな高さを設定することができ、IE 6とそれ以下のバージョンの要素は彼らの高さを正しく拡張せず、小さな高さを設定しても実際の高さに影響しない.