CSS에서 속성 값 상속을 사용하는 방법
- php中世界最好的语言원래의
- 2018-03-21 14:59:392062검색
이번에는 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 스타일 텍스트입니다.
브라우저의 기본 스타일이
의 CSS 규칙을 설정하기 때문입니다.
동시에 일부 이전 버전의 브라우저는 상속을 잘 지원하지 않을 수 있습니다. 예를 들어 일부 브라우저에서 <테이블>을 발견하면 상속된 모든 속성이 손실됩니다
5. 취소할 수 있나요? CSS 속성은 일단 상속되면 취소할 수 없으며 재정의만 가능합니다.
6. 사례
상위 요소 위치: 상대 하위 요소: 위치: 절대 상위 요소의 너비는 고정되고 하위 요소는 상위 요소의 너비를 상속합니다. 숨겨진 탐색 표시줄의 너비가 고정되지 않았거나 너비가 상위 요소보다 큰 경우 일반적으로 하위 요소의 너비는 이때만 재설정될 수 있습니다.)
옆으로 가면 안으로 들어가면 뒤로 이동합니다. 서두르세요, 천천히 가세요. 가끔씩 멈춰서 생각해보고, 살펴보고, 생각하고, 계속해서 걸어가세요. 이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 주세요!추천 도서:
위 내용은 CSS에서 속성 값 상속을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!