CSS에서 범위 너비를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 범위 너비를 설정하는 방법

青灯夜游

풀어 주다： 2023-01-06 11:13:03

원래의

9883명이 탐색했습니다.

CSS에서 범위 너비를 설정하는 방법: 먼저 "display:block;" 또는 "display:inline-block;" 스타일을 사용하여 범위 요소를 블록 요소 또는 인라인 블록 요소로 설정한 다음 "너비: 너비"를 사용하세요. value;" "스타일은 범위의 너비를 설정합니다.

CSS에서 범위 너비를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML에서 스팬은 다음과 같은 특징을 지닌 인라인 요소입니다.

1. 높이, 줄 높이, 위쪽 및 아래쪽 여백은 변경할 수 없습니다. 너비는 텍스트나 이미지의 너비이며 변경할 수 없습니다.

스팬의 너비와 높이는 일반적으로 변경되지 않는 것을 볼 수 있습니다. 그런데 가끔 스팬 너비를 설정해야 할 경우가 있는데 어떻게 해야 할까요?

해결 방법:

표시 속성을 사용하여 범위 요소를 블록 요소 또는 인라인 블록 요소로 설정한 다음 너비 속성을 사용하여 너비를 설정합니다. 예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			.inline{
				width: 150px;
				background-color: palevioletred;
			}
			.block{
				display: block;
				width: 150px;
				background-color: palevioletred;
			}
			.inline-block{
				display: inline-block;
				width: 150px;
				background-color: palevioletred;
			}

		</style>
	</head>

	<body>
		<div>测试文本，<span class="inline">测试文本</span>，<span class="block">测试文本</span>，<span class="inline-block">测试文本</span></div>
	</body>

</html>

로그인 후 복사

렌더링:

설명: CSS에서 범위 너비를 설정하는 방법

1. html

의 요소 차단

, <양식> ,

는 블록 요소입니다. 인라인 요소는 display:block;을 설정하여 블록 요소로 표시할 수 있습니다. 구문:
```
span{display:block;}
```
로그인 후 복사
블록 수준 요소의 특성: display:block;显示为块状元素。
语法：
```
span{display:inline-block;}
```
로그인 후 복사
块级元素的特点：

1、每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；

2、元素的高度、宽度、行高以及顶和底边距都可设置；

3、元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）；

2、内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block
1. 각 블록 요소는 새 줄에서 시작하고 후속 요소도 새 줄에서 시작합니다( 독점적으로) 한 줄에
)

2. 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다.

3. 요소의 너비를 설정하지 않으면 해당 요소의 100%를 차지합니다. 상위 컨테이너(및 상위 요소의 너비가 동일함)

2. 인라인 블록 요소
인라인 블록 요소(inline-block)는 인라인 요소와 블록 요소의 특성을 모두 갖습니다. display:inline- block은 요소를 인라인 블록 요소로 설정하는 것입니다.
🎜구문: 🎜rrreee🎜인라인 블록 요소의 특징: 🎜🎜1. 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다. . 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜
위 내용은 CSS에서 범위 너비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!