WEB 표준 학습을 위한 CSS/XHTML 지식 요약 페이지 1/3_경험 교환

1. 브라우저마다 기본 여백 여백 값이 다른 여러 태그로 인해 많은 호환성 문제가 발생합니다. 그래서 미리 정의해두시면 됩니다

코드 복사 코드는 다음과 같습니다.

* { padding: 0; 여백: 0;}

또는

코드 복사 코드는 다음과 같습니다.

ul, li,h1,h2,h3,h4,h5,h6,p,table,td,p,img,hr,dd,dt,span,a,dt,dd,ol{마진: 0;padding:0;font- size:12px;}

2. 레이아웃과 관련하여 dreamweaver cs3의 템플릿이 어떻게 작성되는지 확인할 수 있습니다. 글쓰기 방법이 가장 좋은 방법이다. 대규모 레이아웃의 경우 dreamweaver cs3의 기본 템플릿을 직접 사용할 수 있습니다. 그런 다음 주석을 제거하면 작동합니다.

3. 여백/패딩을 적절하게 사용하세요. 상자 내 요소의 위치를 ​​조정할 때는 상자의 패딩을 사용하는 것이 좋습니다. 상자 내부의 요소 여백을 사용하지 마십시오.

그 이유는 박스 안의 요소들이 마진을 사용하게 되면 박스의 마진에 영향을 주어 정렬 불량이 발생하기 때문입니다.

하지만 패딩을 사용할 때는 한 가지 주의하세요. 예를 들어 원래 너비:100px 상자가 padding-left:20px로 설정된 경우 너비에서 20px을 빼야 합니다.

4. 박스의 경우 테두리를 설정한 후 너비에서 테두리의 너비를 빼야 합니다. 예를 들어 너비가 100px인 상자의 왼쪽과 오른쪽 측면이 1px인 경우 상자 너비는 98px로 설정되어야 합니다.

5. 박스 추가 시 너비와 높이를 가능하면 지정하지 마세요.

내부 요소에 따라 높이 확장이 가능합니다.

너비가 설정되지 않은 경우 기본값은 100% 너비입니다.

6. 상자의 배경 이미지와 배경 색상을 동시에 설정하는 방법은 배경 이미지를 먼저 설정한 후 배경 색상을 설정하는 방법입니다.

코드 복사 코드는 다음과 같습니다.

.bg {배경:url(/images/blbian.gif) no -반복}
.style1 {너비:100px;높이: 100px;배경색:#ebf1e5;}

7. float:left 같은 것도 작성하는 경우 주변 요소나 기본 요소에 영향을 미치는 경우에는 clear:both를 사용하여 지워보세요.

코드 복사 코드는 다음과 같습니다.

.clearfloat {
지우기:모두;
높이:0;
글꼴 높이: 0px
}

8.

과 같이 설정하면 호환성 문제가 발생합니다. ie6에 문제가 있을 것입니다. 상자의 높이가 3px가 아니라는 것을 알게 될 것입니다.

다음 설정이 필요합니다: 글꼴 크기:1px; 문제가 없습니다. dw cs3 템플릿의 Clearfloat 작성 방법을 참조하고 line-height:0px도 추가하세요. 하지만 추가하지 않을 수도 있다는 것을 알았습니다. 그러나 캐나다 협회는 좀 더 형식적입니다.

9. 텍스트 한 줄의 높이를 설정할 때 줄 높이도 함께 설정하세요. 그렇지 않으면 호환성 문제가 발생하고 텍스트가 약간 잘못 정렬됩니다.

10. ul li 목록을 사용할 때 list-style-type: none을 설정해야 합니다. 그렇지 않으면 호환성 문제가 발생합니다. 원점은 ff 아래에 표시되지만 ie 아래에는 표시되지 않는 경우가 많습니다.