집 > 기사 > 웹 프론트엔드 > CSS 표시 모드를 사용하는 방법

CSS 표시 모드를 사용하는 방법

이번에는 CSS 표시 모드 사용 방법과 CSS 표시 모드 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. 태그 보충 div와 pan CSS는 웹페이지의 일부 로컬 정보를 수정합니다

3. .div와 스팬의 차이점은 무엇인가요?

3.1.div는 한 행만 차지하지만 스팬은 한 행을 차지하지 않습니다. alone

3.2.div는 컨테이너 수준 태그이고, SPAN은 텍스트 수준 태그입니다

4. 컨테이너 수준 태그와 텍스트 수준 태그의 차이점은 무엇인가요?

다른 모든 태그는 컨테이너에 중첩될 수 있습니다. -수준 태그

텍스트 수준 태그에는 텍스트/이미지만 중첩될 수 있습니다. /Hyperlink

컨테이너 수준 태그

div h ul ol dl li dt dd ...

텍스트 수준 태그

span p buis strong em ins del ...

참고:

어떤 태그가 텍스트 수준 태그이고 어떤 태그가 컨테이너 수준 태그인가요? , 일반적으로 엔터프라이즈 개발에서는 의도적으로 기억할 필요가 없습니다. 중첩하려면 div에 중첩되거나 그룹 태그에 따라 중첩되어야 합니다.

2. 요소 표시 모드

HTML에서 HTML은 분할됩니다. 모든 태그를 컨테이너 수준과 텍스트 수준이라는 두 가지 범주로 나눕니다.

CSS에서는 모든 태그를 블록 수준 요소와 인라인 요소라는 두 가지 범주로 나눕니다.

블록 수준 요소는 한 줄만 차지합니다. 인라인 요소는 한 줄만 차지합니다.

컨테이너 수준 태그

div h ul ol dl li dt dd ...

텍스트 수준 태그

span p buis stong em ins del ...

블록 수준 요소

p div h ul ol dl li dt dd

인라인 요소(모두 p를 제외한 텍스트 요소는 인라인 요소입니다)

span buis Strong em ins del

2. 블록 수준 요소와 인라인 요소의 차이점은 무엇인가요?

2.1 블록 수준 요소

한 줄을 차지합니다.

너비가 그렇지 않은 경우 설정하면 기본적으로 상위 요소와 동일한 너비가 됩니다.

너비와 높이가 설정되면 설정으로 표시됩니다.

2.2 인라인 요소

한 줄만 차지하지 않습니다.

너비가 설정되지 않으면 너비가 설정되지 않습니다.

2.3 인라인 블록 수준 요소
요소가 한 줄을 차지할 뿐만 아니라, 너비와 높이도 설정하려면 인라인 블록 수준 요소(예: img 태그)가 나타납니다

세 가지 CSS 요소 표시 모드 변환

1 CSS 요소의 표시 모드를 변환하는 방법 ?

설정 요소의 표시 속성

2. 표시 값

block block levelinline inline

inline-block inline block level

3. 단축키

di 표시: inline;

db 표시: block;

dib 표시: inline-block;

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!