CSS 작은 tip 정리

1812 단어
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와 더 낮은 버전 요소는 그들의 높이를 정확하게 확장하지 못하고 작은 높이를 설정하면 실제 높이에 영향을 주지 않는다.
    • CheckBoxList 평가 및 초기화
    asp.netrepeater의 컨트롤을 옮겨다니는 몇 가지 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage