학습 스타일 시트 CSS 참조 - 일반적으로 사용되는 CSS 지식_경험 교환

1. 블록 요소와 인라인 요소 비교

모든 HTML 요소는 블록 요소와 인라인 요소 중 하나에 속합니다.
블록 요소의 특징은 다음과 같습니다.
항상 새 줄에서 시작합니다.
높이, 줄 높이, 위쪽 및 아래쪽 여백을 모두 제어할 수 있습니다.
너비는 기본적으로 컨테이너의 100%입니다. 너비를 설정하지 않는 한

,

,

,

,

및
• 은 블록 요소의 예입니다.
  
  반대로 인라인 요소의 특징은 다음과 같습니다.
  다른 요소는 같은 줄에 있습니다.
  높이, 줄 높이 및 위쪽 및 아래쪽 여백은 변경할 수 없습니다. 텍스트 또는 변경할 수 없는 이미지의 너비입니다.
  
  , , , , , 및 은 인라인 요소의 예입니다.
  요소의 이 기능을 변경하려면 display: inline 또는 display: block 명령을 사용하세요. 언제 이 속성을 변경해야 합니까?
  인라인 요소가 새 줄에서 시작되도록 합니다.
  블록 요소와 다른 요소를 같은 줄에 유지합니다.
  인라인 요소의 너비를 제어합니다(특히 탐색 모음에 유용함). 인라인 요소의 높이
  너비를 설정하지 않고도 블록 요소의 텍스트와 동일한 너비로 배경색을 설정할 수 있습니다.
  
  
  2. 또 다른 박스 해킹 방법
  박스 해킹 방법이 이렇게 많은 이유는 6 이전의 박스에 대한 IE의 이해도가 남들과 달랐기 때문입니다. 가장자리 너비와 공백을 포함합니다. IE5를 다른 브라우저와 일치시키려면 CSS를 사용할 수 있습니다.
  
  padding: 2em;
  border: 1em solid green
  width: 20em; / 14em;
  
  첫 번째 너비는 모든 브라우저에서 인식되지만 IE5.x는 해당 줄에 빈 주석 기호가 있기 때문에 줄 2의 너비 설정을 인식하지 못합니다(얼마나 멍청한 구문 분석입니까!) , 그래서 IE5.
  
  
  3. 페이지의 최소 너비
  
  min-width는 요소의 최소 너비가 다음보다 작을 수 없도록 지정할 수 있는 매우 편리한 CSS 명령입니다. 특정 너비를 보장할 수 있도록 레이아웃은 항상 정확했습니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서도 작동하도록 하려면 태그 아래에
  을 넣은 다음 div에 대한 클래스를 지정하면 됩니다.
  
  
  
  
  그런 다음 CSS는 다음과 같이 설계됩니다.

  }
  
  첫 번째 최소 너비는 정상이지만 두 번째 줄의 너비는 IE에서만 인식되는 Javascript를 사용하므로 HTML 문서도 작아집니다. 익숙하다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
  같은 방법을 사용하여 IE의 최대 너비를 얻을 수도 있습니다.
  
  #container
  {
  min-width: 600px
  max-width: 1200px; ;
  width:expression(document.body.clientWidth
  1200? ”1200px“ : ”auto”;
  }
  
  4. IE와 너비 및 높이 문제
  
  IE는 min-의 정의를 인식하지 못하지만 실제로는 일반적인 너비와 높이를 min이 있는 것처럼 처리합니다. 이는 너비와 높이만 사용하면 이 두 가지가 지원되지 않는 문제입니다. 일반 브라우저에서는 값이 변경되지 않습니다. min-width와 min-height만 사용하면 IE에서는 너비와 높이가 전혀 설정되지 않습니다. 배경 이미지를 설정하려면 이 질문을 해결하는 것이 더 중요합니다.
  .box
  {
  width: 80px
  height: 35px; }
  
  html>body .box
  {
  너비: 자동;
  높이: 자동;
  최소 너비:
  최소 높이: 35px; >}
  
  모든 브라우저를 사용할 수 있습니다. 첫 번째 상자 설정은 두 번째 설정이 더 특별하기 때문에 IE에서는 두 번째 설정을 인식하지 못하므로 첫 번째 설정을 덮어씁니다. >5. >
  
  text-transform 명령에는 3가지 값이 있습니다: text-transform: 대문자, text-transform: 소문자 및 text-transform: 텍스트를 모두 대문자로 변경하고 두 번째 문자를 대문자로 변경합니다. 모두 소문자로, 세 번째 글자는 대문자로 입력해야 합니다. 이는 병음 텍스트에 매우 유용합니다. 대문자 사용 오류가 있어도 웹 페이지에 표시되지 않습니다.
  
  
  6. IE에서 그림 텍스트가 사라지는 현상
  
  
  때때로 텍스트나 배경 이미지가 갑자기 사라지는 문제가 발생하고, 새로 고친 후에 다시 나타나는 문제는 부동 요소에 가까울 때 더 중요합니다. (참고: 이전에는 본 적이 없습니다.) 이때 사라지는 요소에 대해 position:relative를 설정할 수 있습니다. 그래도 작동하지 않으면 이러한 요소에 대한 너비를 지정해 보세요. 🎜>7. 보이지 않는 텍스트
  인쇄나 작은 화면 등 일부 웹 텍스트가 브라우저에 표시되지 않도록 하려면 디스플레이: 없음을 사용할 수 있습니다. 이것은 매우 간단하지만 때때로 일부 사람들에게는 약간 쓸모가 없으므로 이 컨트롤을 제거한 다음 position:absolute:-9000px를 사용할 수 있습니다.
  
  실제로 페이지 외부에 표시할 텍스트를 지정합니다.
  
  8. 휴대기기용 특수 CSS 디자인
  
  즉, 휴대폰/PDA와 같이 화면이 작은 사용자는 특수 CSS를 디자인하여 웹페이지를 표시할 수 있습니다. 더 편안합니다.이렇게 하려면 브라우저 창을 150포인트 너비로 조정하여 효과를 확인할 수 있습니다. 휴대용 기기 관련 CSS를 지정하는 구문은 다음과 같습니다.
  
  
  
  휴대용 기기별 가용성에 대해서도 읽을 수 있습니다.
  
  9. 3D 효과를 적용한 버튼
  
  기존에는 클릭하면 변화하는 3D 효과를 적용한 버튼을 만들려면 이미지를 사용해야 했습니다. 이제 CSS가 작업을 수행합니다:
  
  a
  {
  display: block
  border-color: #aaa #000 #000 # aaa;
  너비: 8em;
  배경:
  
  a:hover
  {
  상대: 1px; >left: 1px ;
  border-color: #000 #aaa #aaa #000;
  }
  
  효과는 직접 조정할 수도 있습니다.
  
  
  10. 다른 페이지에서 동일한 탐색 코드 사용
  
  
  많은 웹페이지에는 특정 페이지에 들어가면 해당 메뉴가 나타납니다. 회색으로 바뀌고 다른 페이지가 켜집니다. 일반적으로 이 효과를 얻으려면 각 페이지에 대해 특별히 프로그램이나 디자인을 작성해야 합니다. 이제 CSS를 사용하여 이 효과를 얻을 수 있습니다. 먼저 탐색 코드에 CSS 클래스를 사용하세요.
  
  
  
  
  
  Home

  
  
  • 회사 소개
  
  
  • 연락처
  
  
  그런 다음 각 페이지의 본문 ID를 지정하고 위 클래스의 이름은 동일합니다.
  같은 거죠.

  
  그런 다음 CSS를 다음과 같이 디자인하세요.
  #home .home, #about .about, #about .about
  {
  강조 표시된 탐색 명령은 여기로 이동하세요
  }
  
  여기서 ID가 home으로 설정되면 .home이 적용됩니다. 즉, 클래스가 home으로 설정된 내비게이션 바에 특수 효과가 표시됩니다. 다른 페이지도 마찬가지다.