CSS의 표시 속성은 웹 개발에서 자주 사용하는 속성입니다. 오늘의 글에서는 표시 속성이 무엇인지 자세히 알아볼 것입니다.
먼저 CSS 표시 속성의 정의를 살펴보겠습니다
CSS 표시 속성의 정의는 페이지 요소를 숨기거나 표시할 수 있거나 요소를 강제로 블록 수준 요소 또는 인라인 요소로 만들 수 있다는 것입니다. . 페이지 레이아웃 및 표시 속성은 JavaScript 특수 효과에 자주 사용됩니다.
CSS 표시 속성에는 가장 일반적으로 사용되는 네 가지 속성 값, 즉 block, inline-block, inline 및 none이 있습니다.
이 네 가지 표시 속성 값을 자세히 분석해 보겠습니다.
이 네 가지 속성 값을 소개하기 전에 먼저 블록 수준 요소와 인라인 요소를 이해해야 합니다. http://www.php.cn/css-tutorial-409377 html. 그리고 http://www.php.cn/css-tutorial-409376.html여기에서는 자세히 설명하지 않겠습니다. 일반적으로 사용되는 표시 속성의 4가지 속성 값에 대한 소개를 직접 살펴보겠습니다. .
1. 표시(display:block)
의 블록 속성 값은 해당 요소를 블록 요소로 설정합니다. 너비와 높이가 지정되지 않으면 기본적으로 상위 요소의 너비가 상속되어 차지합니다. 한 행을 차지하더라도 높이는 일반적으로 하위 요소의 높이를 기준으로 합니다. 물론 너비와 높이를 직접 설정할 수도 있습니다.
예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a {
background: lightblue;
width: 300px;
display: block;
}
</style>
</head>
<body>
<div>
<a href="http//:www.php.cn">php中文网</a>
<a href="http//:www.php.cn">php中文网</a>
<a href="http//:www.php.cn">php中文网</a>
</div>
</body>
</html>디스플레이의 블록 속성 값 설정 효과는 다음과 같습니다.
2 디스플레이의 인라인 속성 값(display:inline)
콘텐츠는 너비를 확장하고 한 줄을 차지하지 않으며 너비와 높이를 지원하지 않으며 코드 줄 바꿈은 공백으로 구문 분석됩니다.
인라인 속성값 예시:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
background: lightblue;
}
li{
display: inline;
}
</style>
</head>
<body>
<div>
<li><a href="http//:www.php.cn">php中文网</a></li>
<li><a href="http//:www.php.cn">php中文网</a></li>
<li><a href="http//:www.php.cn">php中文网</a></li>
</div>
</body>
</html>디스플레이의 인라인 속성값 설정에 따른 효과는 다음과 같습니다.
3.디스플레이의 인라인 블록 속성값(display:inline-block)
너비를 설정하지 않습니다. , 콘텐츠가 너비를 확장합니다. 한 줄을 차지하지 않고 너비와 높이를 지원하며 코드 줄 바꿈이 공백으로 구문 분석됩니다. 즉, 객체는 인라인으로 렌더링되지만 객체의 내용은 블록으로 렌더링되어 블록의 너비 및 높이 특성과 인라인의 피어 특성을 모두 제공합니다.
4. 표시의 none 속성 값(display:none)
요소가 없음으로 설정되면 공간을 차지하지도 않고 표시되지도 않습니다. 이는 존재하지 않는 요소와 동일합니다. 다시 그리기를 통해 재배열을 개선합니다.
display 속성의 다른 속성 값에 대한 소개는 여기서 끝납니다. 자세한 내용은 PHP 중국어 웹사이트의 css 학습 매뉴얼을 참조하세요.
위 내용은 CSS 표시 속성은 무엇을 의미합니까? CSS의 표시 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PMCSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.
첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AMSvelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.
고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스Mar 10, 2025 am 11:37 AM이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.
쇼, 말하지 마십시오Mar 16, 2025 am 11:49 AM웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때
Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축Mar 28, 2025 am 09:18 AM최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.
NPM 명령은 무엇입니까?Mar 15, 2025 am 11:36 AMNPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.
특이성에 대해 이야기하기 위해 (X, X, X, X)를 사용해 보겠습니다.Mar 24, 2025 am 10:37 AM나는 다른 날에 Eric Meyer와 대화를 나누고 있었고 나는 내 형성 시절부터 Eric Meyer 이야기를 기억했습니다. CSS 특이성에 대한 블로그 게시물을 썼습니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Dreamweaver Mac版
시각적 웹 개발 도구
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
