CSS의 속성 값 상속 소개

이 글에서는 CSS에서 속성값의 상속을 주로 소개하고, 상속할 수 있는 속성과 상속할 수 없는 속성을 소개하고, 상속의 한계와 취소 가능 여부 등도 분석합니다. 구체적인 내용은 아래의 자세한 설명을 확인하실 수 있습니다. 작업 단계에 관심이 있으면 친구가 참조할 수 있습니다.

상속: HTML 요소는 현재 요소가 이 속성을 정의하지 않더라도 상위 요소로부터 일부 CSS 속성을 상속받을 수 있습니다.

1.css 상속할 수 있는 속성과 상속할 수 없는 속성

상속 불가능: 디스플레이, 여백, 테두리, 패딩, 배경, 높이, 최소 높이, 최대 높이, 너비, 최소 너비, 최대 너비, 오버플로, 위치, 왼쪽, 오른쪽, 위쪽, 아래쪽, Z-색인, 부동, 지우기, 테이블 레이아웃, 수직 정렬, 페이지 나누기 후, 페이지 빵빵 전 및 유니코드-bidi.
가시성과 커서 등 모든 요소는 상속 가능합니다.
인라인 요소는 상속할 수 있습니다: 문자 간격, 단어 간격, 공백, 줄 높이, 색상, 글꼴, 글꼴 모음, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 무게, 텍스트 장식, 텍스트 변환, 방향.
터미널 블록 요소는 text-indent 및 text-align을 상속할 수 있습니다.
목록 요소는 목록 스타일, 목록 스타일 유형, 목록 스타일 위치, 목록 스타일 이미지를 상속받을 수 있습니다.
테이블 요소는 border-collapse를 상속받을 수 있습니다.

2. 값 상속

상속도 문서 트리를 기반으로 합니다. 문서 트리에 있는 요소의 일부 속성은 해당 하위 요소에 의해 상속될 수 있습니다. 문서의 일부 기본 스타일 속성을 설정하려면 문서 트리의 루트에서 이 속성을 설정할 수 있습니다. 이 속성을 상속할 수 있는 경우 색상, 글꼴 크기 및 기타 속성과 같은 하위 요소가 이 속성을 상속합니다.

3. "상속" 값

각 속성에는 "상속" 값이 할당될 수 있습니다. 즉, 특정 요소에 대해 속성은 상위 요소의 상대 속성의 계산된 값과 동일한 값을 갖습니다. . 상속된 값은 일반적으로 "inherit"를 명시적으로 지정하여 향상될 수 있는 대체 값으로만 ​​사용됩니다. ~ > 테두리, 여백, 패딩 및 배경.

이 설정은 의미가 있습니다. 예를 들어

에 테두리가 설정된 경우 이 속성도 상속되면 이

내의 모든 요소에 테두리가 생기므로 의심할 여지 없이 문제가 발생합니다. 결과. 마찬가지로 여백, 패딩 등 요소 위치에 영향을 미치는 속성은 상속되지 않습니다.

p { font-size: inherit; }

4.继承的局限性

继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。
这样设定是有道理的，例如，为一个

设定了边框，如果此属性也继承的话，那么在这个

内所有的元素都会有边框，这无疑会产生一个让人眼花缭乱的结果。同样的，影响元素位置的属性，例如margin（边距）和padding（补白），也不会被继承。

　　同时，浏览器的缺省样式也在影响着继承的结果。例如：

      body { font-size: 12px; } 동시에 브라우저의 기본 스타일도 상속 결과에 영향을 미칩니다. 예: c BODY {font-size: 12px;}

& lt h2 & gt;

                   // H2 중국어 텍스트는 12px 크기 텍스트가 아닌 제목 2 스타일 텍스트입니다.

　 이는 브라우저의 기본 스타일이

의 CSS 규칙을 설정하기 때문입니다.

동시에 일부 이전 버전의 브라우저는 상속을 잘 지원하지 않을 수 있습니다. 예를 들어 일부 브라우저에서 <테이블>을 발견하면 상속된 모든 속성이 손실됩니다

5. 취소할 수 있나요? 일단 상속된 CSS 속성은 취소할 수 없으며 재정의만 가능합니다.

6. 사례

상위 요소 위치: 상대 하위 요소: 위치: 절대 상위 요소의 너비는 고정되고 하위 요소는 상위 요소의 너비를 상속합니다. 숨겨진 탐색 모음의 너비가 고정되지 않았거나 너비가 상위 요소보다 큰 경우 일반적으로 이때 하위 요소의 너비만 재설정할 수 있습니다.)

옆으로 가면 안으로 들어가면 뒤로 이동합니다. 서두르세요, 천천히 가세요. 가끔씩 멈춰서 생각해보고, 살펴보고, 생각하고, 계속해서 걸어가세요.

위 내용은 CSS의 속성 값 상속 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!