CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)

青灯夜游

Sep 07, 2018 pm 02:00 PM

웹 프론트엔드를 개발할 때 웹사이트를 시각적으로 더욱 아름답고 효과적으로 풍부하게 만들기 위해서는 당연히 CSS의 강력한 속성이 없어서는 안 될 역할을 합니다. 여기서는 웹 프런트엔드를 개발할 때 자주 사용하는 속성인 css 디스플레이 속성을 언급하겠습니다. 모든 주요 브라우저는 표시 속성을 지원합니다. 둘째, 우리 모두는 표시 속성이 요소가 생성해야 하는 상자 유형을 지정한다는 것을 알고 있습니다. CSS 표시 속성에 자주 사용되며 가장 일반적인 속성 값이기도 합니다: none, block, inline, inline-blockt.

다음으로 CSS 표시 속성에서 가장 일반적인 속성 값 사용법을 하나씩 설명하기 위해 구체적인 코드 예제를 사용하겠습니다.

One: display: none, 설정 요소가 표시되지 않습니다

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:none</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 200px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
			.a1{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>数字2不会显示出来</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span class="a1">2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

로그인 후 복사

위 코드의 렌더링은 다음과 같습니다.

CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)

display: none, 설정 요소가 표시되지 않으며 공백 요소를 사실적으로 만드는 것은 표시되지 않습니다. 유지하세요. 그러나 요소의 공간을 유지하는 숨겨진 또 다른 가시성이 있습니다. 자세히 알아보려면 css 가시성 속성을 읽어보세요.

두 가지: 디스플레이:블록, 요소를 블록 수준 요소로 표시합니다.

요소 앞뒤에 줄 바꿈을 사용하여 요소를 블록 수준 요소로 표시합니다. 블록으로 설정한 후 요소의 너비와 높이를 설정할 수 있습니다. 요소는 자체 라인을 차지합니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 500px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				display:block; 
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>span元素定义了宽与高，宽与高都显示为30px</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span>2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

로그인 후 복사

위 코드의 렌더링은 다음과 같습니다.

CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)

스팬 태그 너비와 높이가 모두 30px로 표시됩니다. 코드에서 display:block을 제거하면 표시되는 렌더링은 다음과 같습니다.

CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)

분명히 display:block을 제거하면 범위의 높이와 너비를 설정할 수 없습니다.

스팬 태그는 인라인 요소로 높이, 너비, 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백, 패딩, 여백을 설정할 수 없습니다. 블록 요소로 변환할 수 있으므로 요소의 높이, 너비, 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백, 패딩, 여백을 설정할 수 있습니다.

3: 디스플레이:인라인, 요소를 인라인 요소로 표시합니다.

디스플레이의 기본 속성입니다. 요소 앞이나 뒤에 줄바꿈 없이 요소를 인라인 요소로 표시합니다. 인라인 요소의 너비와 높이는 설정할 수 없다는 것을 알고 있으므로 요소의 표시 속성이 인라인으로 설정되면 높이와 너비 속성을 설정하는 것은 쓸모가 없습니다. 이때 영향을 미치는 높이는 일반적으로 내부 요소의 높이(글꼴 크기)와 패딩입니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 1000px;
				height: 200px;
				margin:50px auto;
			}
			.demo p{
				display:inline ;
				color: #0081EF;
			}
			.demo div{
				display:inline ;
				color: #70DBDB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>p标签和div标签同为块状元素，本应无法在同一行显示;</p>
			<div>此时全为内联元素，不换行，在同一行显示。</div>
		</div>
	</body>

</html>

로그인 후 복사

위 코드의 렌더링은 다음과 같습니다.

CSS 표시 속성의 4가지 공통 속성 값 사용법에 대한 자세한 설명(코드 예)