웹 디자인 CSS 레이아웃 디버깅의 효과적인 방법

CSS 레이아웃은 웹 디자인의 매우 중요 한 부분, 여기 몇 가지 효과적인 방법 CSS의 레이아웃을 확인 하.

1. 맞춤법 오류, 끝 태그를 잊고에 대 한 HTML 요소를 확인

심지어 베테랑 자주 div 중첩 관계에 대 한 실수. 오류를 확인 하려면 Dreamweaver 확인 기능을 사용할 수 있습니다.

2. CSS를 올바르게 작성 된 확인

맞춤법 오류의 끝을 잊고 있는지 확인 하는}, 등등. CLEANCSS를 사용 하 여 맞춤법 오류에 대 한 귀하의 CSS를 확인 수 있습니다. CLEANCSS 무게를 잃고, CSS 위한 도구 이지만, 또한 실수는 맞춤법을 검사할 수 있다.

3. 삭제 메서드를 사용 하는 오류가 발생 한 위치를 결정합니다

오류 전체 레이아웃에 영향을 미치는에 div 블록을 제거 하 고 디스플레이 오류가 발생 하는 결정을 정상으로 반환 할 때까지 div 블록을 개별적으로 삭제할 수 있습니다.

4.을 사용 하 여 Border 속성 오류 요소 레이아웃 특성

실수로 Float 속성 레이아웃을 사용 하 여 오류가 발생 합니다. 요소의 범위를 결정 요소에 테두리 특성을 추가 하 고 오류에 대 한 이유는 결론.

5. 부동 요소를 부모 요소 명확한 속성을 지정할 수 없습니다.

주변 부동 요소 레이아웃 혼란, Macie 경우 명확한 특성 float 요소를 부모 요소에 사용 됩니다. 이 경우 Macie의 유명한 버그 모른다 본론만 것 이다.

6. 부동 요소 Width 속성을 지정 해야 합니다.

많은 브라우저 버그가 float 요소 너비를 지정 하지 않는 표시 있다. 그래서 관계 없이 float 요소 내용의 반드시 width 특성을 지정 합니다.

요소를 지정할 때 단위로 PX 대신 EM을 사용.

7. 부동 요소 예: 여백 및 안쪽 여백 속성을 지정할 수 없습니다.

여백 및 안쪽 여백을 지정 하는 float 요소를 표시할 때 즉 버그가 있다. 따라서 float 요소에 대 한 여백 및 안쪽 여백 속성을 지정 하지 않으면 (여백 및 안쪽 여백을 설정할 수 있습니다 float 요소를 내부 div를 중첩 하 여). 또한 IE에 대 한 특별 한 값을 지정 하려면 해킹 메서드를 사용할 수 있습니다.

8. float 요소 너비의 합이 100% 보다 작은

부동 요소 너비는 100% 정확 하 게, 일부 오래 된 브라우저에서는 제대로 표시 되지 않습니다. 폭의 합계는 99% 미만 다는 것을 확인 하십시오.

9. 기본 스타일에 다시 설정 하면?

여백, 안쪽 여백 등 일부 속성, 다른 브라우저는 다른 해석 할 것 이다. 따라서, 그것은 최고의 모든 여백, 안쪽 여백 설정 없음, 0, 목록 스타일 모음의 첫 등입니다.

10. 당신은 DTD를 작성을 잊어버린?

상관 없이 페이지의 시작 부분을 확인할 수 있습니다 다음, 다른 브라우저 디스플레이 결과 조정 하는 방법 인지 다음 라인 Dtd:http://www.w3.org/tr/html4/loose.dtd을 작성 하는 것을 잊지 마세요 ">