아주 좋은 CSS 기술이 있지만 people_Experience exchange에서는 종종 무시됩니다.

1. 대소문자 구분
XHTML에서 CSS를 사용할 때 CSS에 정의된 요소 이름은 대소문자를 구분합니다. 이 오류를 방지하려면 모든 정의 이름에 소문자를 사용하는 것이 좋습니다.

2. 배경 이미지 경로에는 따옴표를 추가할 필요가 없습니다.
바이트를 절약하기 위해 배경 이미지 경로에는 따옴표가 필요하지 않으므로 따옴표를 추가하지 않는 것이 좋습니다. 예:

background:url("images/***.gif") #333;

은

background:url(images/***.gif) #333;

따옴표를 추가하면 다음과 같이 쓸 수 있습니다. , 반대로 일부 브라우저 오류가 발생합니다


3. 링크 스타일을 올바른 순서로 지정합니다
CSS를 사용하여 링크의 여러 상태 스타일을 정의하는 경우 스타일에 주의하세요. 올바른 순서는 다음과 같습니다: :link :visited :hover :active. 추출된 첫 글자는 "LVHA"로, "LoVe HAte"(좋아요)로 기억할 수 있습니다.
매우 일반적입니다. CSS 문제는 플로트 위치를 지정할 때 기본 레이어가 플로팅 레이어로 덮이거나 레이어에 중첩된 하위 레이어가 외부 레이어의 범위를 초과한다는 것입니다.

일반적으로 해결 방법은 추가 요소를 추가하는 것입니다. div 또는 br과 같은 플로팅 레이어 뒤에 스타일을 명확하게 정의합니다. 이 방법은 다소 무리가 있지만 이 기사를 참조하세요. 구조적 마크업 없이 플로트 지우기" (참고: 이 사이트에서는 이 기사를 가능한 한 빨리 번역할 것입니다.)

위의 두 가지 방법은 플로팅 오버플로 문제를 아주 잘 해결할 수 있지만, 실제로 레이어를 수정해야 하는 경우에는 가능합니다. 아니면 레이어의 개체가 지워질 때 어떻게 해야 할까요? 이 방법은 원래 "Simple Clearing of Floats"에 게시되었으며 "Clearance" 및 "Super simple Clearing Floats" 토론에서 널리 사용되었습니다. .

위의 명확한 방법 중 어느 것이 더 적합한지는 구체적인 상황에 따라 다르며, 여기서는 이에 대해 논의하지 않겠습니다. 또한 이미 일부 훌륭한 기사에서 이에 대해 매우 명확하게 설명했습니다. : "Floatutorial", "Containing Floats" 및 "Float Layouts"


5. 수평 센터링(centering)
이것은 간단한 기술이지만, 제가 본 적이 있기 때문에 다시 말씀드릴 가치가 있습니다. 많은 초보자 질문은 다음과 같습니다. CSS를 수평으로 가운데에 배치하는 방법은 무엇입니까? 레이아웃이 레이어(컨테이너)에 포함된 경우 다음과 같이 정의해야 합니다.
body {
text-align:center;
}
#wrap {
width:760px /* 레이어 너비로 변경*/
margin:0 auto;
text-align:left;
}


6. 디버깅 기술: 레이어는 얼마나 큽니까?
CSS 오류를 디버깅할 때 CSS 코드를 한 줄씩 분석해야 합니다. 저는 보통 문제가 있는 레이어에 배경색을 정의합니다. 레이어가 얼마나 많은 공간을 차지하는지 명확하게 알 수 있습니다. 어떤 사람들은 일반적으로 가능한 테두리 사용을 제안하지만 문제는 때때로 테두리가 요소의 크기를 늘리고 border-top 및 boeder-bottom이 파괴된다는 것입니다. 세로 여백 값이 있으므로 배경을 사용하는 것이 더 안전합니다