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. 자주 발생하는 버그

쌍무 거리 부동 버그 IE 6과 더 낮은 버전으로 모든 부동 요소의 외측 거리를 배로 늘리는 해결 방안: 설정display：inline 버그 복구 가능

3픽셀 텍스트 편향 버그 IE 5와 IE 6에서 하나의 텍스트가 부동 요소와 인접할 때 이 버그가 나타납니다:

예를 들면 다음과 같습니다.

.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;
}

IE6의 중복 문자 버그는 일련의 부동 요소의 첫 번째 요소와 마지막 요소 사이에 여러 개의 주석이 있을 때 이 버그가 나타난다.앞의 두 주석은 영향을 주지 않았지만, 뒤의 각 주석은 두 개의 자독이 중복되어 나타날 것이다.해결: 주석 삭제

상대 용기 중의 절대 포지셔닝 IE 5,6의 포지셔닝이 정확하지 않기 때문에 상대적으로 포지셔닝된 용기가 레이아웃을 가지도록 해야 한다. 조건으로 용기에 작은 높이를 설정할 수 있다. IE 6와 더 낮은 버전 요소는 그들의 높이를 정확하게 확장하지 못하고 작은 높이를 설정하면 실제 높이에 영향을 주지 않는다.