>웹 프론트엔드 >CSS 튜토리얼 >CSS의 속성 값 상속 지식에 대한 종합 요약

CSS의 속성 값 상속 지식에 대한 종합 요약

小云云
小云云원래의
2017-12-12 09:31:591684검색

이 글에서는 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; } 동시에 브라우저의 기본 스타일도 상속 결과에 영향을 미칩니다. 예를 들면 다음과 같습니다.

                                                                                              ~                                                    

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

 브라우저의 기본 스타일이

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

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

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

6. 사례

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

관련 권장 사항:


속성 값 상속 소개 in css

javascript 특정 CSS 속성 값 얻기_경험 교환

CSS 속성 값 사용법에 대한 자세한 설명

위 내용은 CSS의 속성 값 상속 지식에 대한 종합 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:CSS에 숨겨진 BFC다음 기사:CSS에 숨겨진 BFC