> 웹 프론트엔드 > CSS 튜토리얼 > 디스플레이에는 어떤 가치가 있습니까?

디스플레이에는 어떤 가치가 있습니까?

百草
풀어 주다: 2023-11-20 17:28:15
원래의
2735명이 탐색했습니다.
<p>표시 값에는 블록, 인라인, 없음, 인라인 블록, 플렉스, 그리드, 테이블, 인라인 테이블 및 목록 항목 등이 포함됩니다. 자세한 소개: 1. 요소를 블록 수준 요소로 렌더링하는 블록 블록 수준 요소는 페이지에서 블록을 형성하고 한 줄만 차지합니다. 2. 요소를 인라인 요소로 렌더링하는 인라인. 인라인 요소는 그 자체로 한 줄을 차지하지 않으며 다른 요소와 나란히 있을 수 있습니다. 3. 없음, 이 값은 요소가 페이지에 표시되지 않음을 지정합니다.

<p>디스플레이에는 어떤 가치가 있습니까?

<p>이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS에서 display 속성은 요소의 표시 유형을 결정하는 데 사용됩니다. 다양한 값을 가질 수 있으며 주요 값은 다음과 같습니다. none; 글꼴 계열: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; 탭 크기: 4; 배경색: rgba(27, 31 , 35, 0.05); 테두리 반경: 3px;">표시 속성 값: display属性用于确定元素的显示类型。它可以有多种不同的值,以下是一些主要的display属性值:

<p>1、block:将元素渲染为块级元素。块级元素在页面上形成一个块,并且独占一行。例如,<div><p><h1>-<h6>以及<li>

1. block: 요소를 블록 수준 요소로 렌더링합니다. 블록 수준 요소는 페이지에서 블록을 형성하고 자체 줄을 차지합니다. 예를 들어 <div>, <p>, <h1>-<h6><li> 등 모두 기본 블록 수준 요소입니다. 🎜<p>2. inline: 요소를 인라인 요소로 렌더링합니다. 인라인 요소는 그 자체로 한 줄을 차지하지 않으며 다른 요소와 함께 배치될 수 있습니다. 예를 들어 <span>, <a> 등은 모두 기본 인라인 요소입니다. <span><a>等都是默认的内联元素。

<p>3、none:此值指定元素不会在页面上显示。它与visibility: hidden不同,因为使用visibility: hidden的元素仍然会占据页面空间,而使用display: none

<p>3.none: 이 값은 요소가 페이지에 표시되지 않도록 지정합니다. 가시성: 숨겨진visibility: Hidden 요소는 여전히 페이지 공간을 차지하고 display: none 요소가 레이아웃에서 완전히 제거됩니다.

<p>4. inline-block: 요소를 인라인 블록 수준 요소로 렌더링합니다. 인라인 블록 수준 요소의 특징은 인라인 요소처럼 나란히 배치되지만 너비와 높이를 설정할 수 있고 블록 수준 요소처럼 자체 크기를 가질 수 있다는 것입니다.

🎜5. flex🎜: 요소를 유연한 상자 모델로 렌더링합니다. Flexbox 모델은 1차원 공간(행 또는 열) 내에서 공간을 배치하고, 정렬하고, 배포하기 위한 CSS 레이아웃 기술입니다. 🎜<p>6. 그리드: 요소를 그리드 컨테이너로 렌더링합니다. 그리드 컨테이너는 두 차원(행과 열) 내에서 공간을 배치하고 정렬하고 배포합니다.

<p>7. table: 요소를 테이블로 렌더링합니다. 이 값은 주로 표 형식의 데이터를 표시하는 데 사용되었지만 최신 CSS 기술이 보다 유연한 레이아웃 방법을 제공하므로 더 이상 일반적으로 사용되지 않습니다.

<p>8. inline-table: 요소를 인라인 테이블로 렌더링합니다. 인라인 테이블은 인라인 블록 수준 요소와 유사하지만 셀 사이의 여백 및 패딩과 같은 테이블의 특성을 갖습니다.

<p>9. list-item: 요소를 목록 항목으로 렌더링합니다. 이 값을 사용하면 요소가 기본 글머리 기호 또는 번호 매기기와 함께 목록의 항목으로 나타납니다.

위의 주요 display属性值,还有一些其他的取值,如 run-incompactmarkeretc 외에도 현대 웹 개발에서는 이러한 값을 사용하는 것이 일반적이지 않습니다. 대부분의 경우 위에서 언급한 주요 값을 사용하면 대부분의 레이아웃 요구 사항을 충족할 수 있습니다.

위 내용은 디스플레이에는 어떤 가치가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿