CSS 상속 및 자동

아주 단순한 우화, 천년된 나무가 벼락을 맞아 가만히 서 있다가 개미의 침입으로 괴멸됐다는 이야기입니다. CSS에 능숙하다고 생각하는 사람들은 작은 문제로 인해 혼란스러워하는 경우가 많습니다. 일반적으로 증폭과 왜곡을 겹친 후에는 전체 구조가 모양이 벗어나는 매우 작은 값입니다. CSS는 매우 단순한 언어이고 배우고 사용하기 쉽지만 쓰레기 코드가 발생하기 가장 쉬운 언어이기도 합니다. 이는 언어를 깊이있게 공부하지 않기 때문입니다. 내 생각에 CSS는 기본값, 상속 시스템, 가중치 시스템이라는 세 가지 블록으로 구성되어 있습니다. 기본값은 사용자가 속성을 설정하지 않은 경우 브라우저에서 기본적으로 지정하는 속성입니다. CSS 프레임워크에는 기본적으로 Reset.css라는 파일이 있는데, 이를 재설정하고 브라우저 간의 차이점을 제거하는 데 사용됩니다. 상속 시스템은 아래에서 중점적으로 다루겠습니다. 가중치 시스템, 즉 우선순위 문제는 이 글의 범위를 벗어나므로 더 이상 논의하지 않습니다.

CSS에서는 많은 속성을 상속받을 수 있습니다. 예를 들어 특정 단락의 글꼴을 흰색으로 설정하면 해당 요소의 글꼴을 설정할 필요가 없거나 상속하도록 설정됩니다. 하얀색. 이러한 속성을 상속된 속성이라고 합니다. 상위 요소에서 해당 속성의 계산 및 변환된 값을 가져옵니다. 상위 요소가 동일한 상황에 있으면 계속 조회하고, 마지막으로 찾아보기를 사용합니다. 찾을 수 없습니다. 장치의 기본값입니다.

다음은 상속된 속성 목록입니다.

• border-collapse

• border-spacing

• 자막

• 색상

• 커서

• 방향

• 빈 셀

• 글꼴

• 글꼴 모음

• 글꼴 늘이기

• 글꼴 크기

• 글꼴 크기 조정

• 글꼴 스타일

• 글꼴 변형

• 글꼴 두께

• 문자 간격

• 줄 높이

• 목록 스타일

• 불투명도

• 목록 스타일 이미지

• 목록 스타일 유형

• 인용문

• 텍스트 정렬

• 텍스트 들여쓰기

• 텍스트 변환

• 공백

• 단어 간격

http://www.php.cn/

상위 요소 글꼴 스타일은 설정되어 있으나 하위 요소는 설정되어 있지 않습니다. 하위 요소를 꺼내면 해당 값이 rgb 형식으로 변환되는 것을 확인할 수 있습니다(물론 IE는 제외!)

단, IE7 이하 버전에서는 상속을 사용하여 방향 및 가시성 이외의 스타일 속성을 설정하는 것은 지원되지 않습니다. 자세한 내용은 여기와 여기를 참고하세요

IE8에서는 원래 상속된 속성이었던 text-align이 th에서 실패합니다.

 <table>
  <tr>
    <th>Ruby</th>
    <th>Rouvre</th>
  </tr>
  <tr>
    <td>By</td>
    <td>司徒正美</td>
  </tr>
</table>

rrree

원래는 테이블에서 오른쪽 정렬 텍스트 설정을 상속받아야 했지만 실패했습니다...

이 정신지체 버그도 쉽게 해결할 수 있습니다. IE8, 즉 Set Inherit를 적절하게 표시합니다.

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  } 
  td, th {
    width: 100px;
  }

또한 상속할 수 없는 CSS 속성도 있는데, 가장 고전적인 속성은 테두리 시리즈입니다. 상속되지 않는 속성이라고 합니다. 설정하지 않으면 브라우저의 기본값만 가져올 수 있습니다. Firefox에서는 기본값을 초기값이라고 합니다. 관련된 좋은 소식은 Firefox에서도 기본값을 지정할 수 있으므로 스타일을 재설정할 필요가 없다는 것입니다!

다음은 상속되지 않는 속성 목록입니다.

• background

• border

• 하단

• 클리어

• 디스플레이

• 플로트

• 높이

• 왼쪽

• 여백

• 개요

• 오버플로

• 패딩

• 위치

• 오른쪽

• 상단

• 가시성

• 너비

• z- index

상위 요소의 배경색을 설정합니다. 하위 요소를 설정하지 않으면 브라우저의 기본값인 투명이 적용됩니다. (W3C만 있으면 될 것 같습니다. 색상은 rgb 형식으로 변환하고, 여분의 a는 알파입니다.)

그럼 모호한 값이지만 길이 개념을 갖고 있는 auto를 살펴보겠습니다. 다음 속성에 적용됩니다:

• overflow

• cursor

• height

• 너비

• 마커-오프셋

• 여백

• 여백- * (왼쪽|아래|위|오른쪽|시작|끝)

• 위

• 아래

• 왼쪽

• 오른쪽

• 테이블 레이아웃

• z-index

• -moz-column-width

• 언어

블록 수준 요소의 측정 가능한 속성( 예: 너비, 높이), 값이 설정되지 않은 경우 기본값은 auto이지만 상위 요소의 값으로 쉽게 덮어쓸 수 있으므로 암시적으로 상속됩니다. 인라인 요소에는 박스 모델이 없기 때문에 설정하지 않으면 Firefox에서도 이를 반환하므로 요소의 너비와 높이를 정확하게 계산하는 데 매우 해롭습니다. Auto에는 대칭도 있는데, 이는 중앙 레이아웃에서 자주 사용됩니다. 오버플로와 같은 비메트릭 속성 중에서는 구체적인 분석이 필요합니다.

CSS 상속 및 자동 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!