최고의 CSS 스킬 공개, div+css 레이아웃을 알아야 합니다_경험 교환

CSS 최고 스킬 공개, 꼭 알아야 할 div+css 레이아웃_체험 교환

글꼴 크기에 px 사용

CSS를 한 줄로 선언
아래 비교 두 번째:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
h2 { 
   font-size:18px; 
   border:1px solid blue; 
   color:#000; 
   background-color:#FFF; 
   }

두 번째는 형식화된 것처럼 보이지만 읽는 데 도움이 되지 않습니다. 한 줄로 작성하면 필요한 부분을 더 빨리 찾을 수 있습니다.

저는 두 번째 방법과 비슷한 방식으로 글을 쓰곤 했는데, 점차 글의 내용처럼 그다지 유용하지 않다는 것을 알게 되었습니다. 한 줄은 또렷해 보이고 공간을 절약하며 파일을 더 작게 만듭니다.

블록 단위로 코드 작성
이런 식으로 코드를 작성하면 CSS를 좀 더 페이지처럼 만들 수 있고, 문제가 발생했을 때 가장 짧은 시간에 문제를 찾을 수 있습니다. 이렇게:

#content {float:left;} 
   #content p { … } 
#sidebar {float:left;} 
   #sidebar p { … } 
#footer {clear:both;} 
   #sidebar p { … }

브라우저 지원
최신 브라우저만 지원합니다. 이는 IE5와 IE5.5를 포기하는 것을 의미합니다. 이렇게 하면 많은 시간이 절약됩니다. IE6의 경우 Box Model Hack을 사용할 필요가 없습니다. 인기 있는 브라우저만 대상으로 하는 경우 동일한 효과를 얻으려면 몇 가지 해킹만 필요합니다.

NetEase 새 홈페이지의 CSS에 주목했는데 !important나 Hack은 없지만 FF와 IE에서는 아주 잘 표시됩니다. CSS를 합리적으로 사용하면 해킹을 피할 수 있습니다. 물론 디버깅에는 시간이 더 걸립니다.

플로팅 요소를 포함합니다.
컨테이너 내의 모든 콘텐츠는 컨테이너와 일관되게 디자인되어야 합니다. 너무 크면 잘못된 위치로 미끄러질 수 있습니다. 컨테이너 외부를 조정하기 위해 음수 여백을 사용하면 미끄러짐이 발생합니다.

오버플로 이해
페이지에 플로팅 요소가 두 개 있는 경우 왼쪽 컨테이너에 너무 많은 콘텐츠를 출력하면 오른쪽 컨테이너가 아래에서 실행됩니다. 이는 여백, 너비 또는 패딩 설정이 엉망이지만 FF에 반영되지 않음을 의미합니다. IE에서 콘텐츠가 컨테이너 밖으로 흘러나오는 것을 방지하려면 Overflow:hidden 또는 Overflow:scroll을 사용하세요.

블록 요소가 공백을 자동으로 채우도록 허용

축약된 CSS
많은 사람들이 margin-top, margin-right, margin-bottom 및 margin-left를 여러 개 사용합니다. 실제로 이것이 가장 기본입니다. 마진은 마진: 오른쪽 위 왼쪽 값으로 직접 축약될 수 있습니다. CSS 약어 요약은 여기에서 볼 수 있습니다.
불필요한 선택자를 피하세요.
스타일 선택자를 최소한으로 줄이세요. ul li {} 또는 table tr td{}를 계속해서 작성하고 있다면 너무 자세하게 작성하고 있다는 증거입니다. 선택기가 적으면 문제를 더 쉽게 발견할 수 있습니다.

완전히 번역하지도 않았고, 제 말이 많이 들어있네요. 하하.

위 내용은 최고의 CSS 기술, div+css 레이아웃 꼭 알아야 할 경험 교환 콘텐츠의 릴리스입니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.php.php)를 참고하세요. CN)!