CSS에서 속성 값 상속을 사용하는 방법-CSS 튜토리얼-php.cn

CSS에서 속성 값 상속을 사용하는 방법

php中世界最好的语言

풀어 주다： 2018-03-21 14:59:39

원래의

2060명이 탐색했습니다.

이번에는 CSS에서 속성값 상속을 사용하는 방법과 CSS에서 속성값 상속을 사용할 때 주의사항이 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.

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

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

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

　브라우저의 기본 스타일이