찾다
웹 프론트엔드CSS 튜토리얼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; } 동시에 브라우저의 기본 스타일도 상속 결과에 영향을 미칩니다. 예를 들면 다음과 같습니다.

                                                                                              ~                                                    

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

 브라우저의 기본 스타일이

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

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

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

6. 사례

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

관련 권장 사항:


속성 값 상속 소개 in css

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

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

CSS의 품질과 복잡성을 모니터링하는 스택을 찾아CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

취리히에서 열린 전면 회의취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

NUXT 응용 프로그램에서 동적 경로 생성NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기