CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]
- 藏色散人원래의
- 2018-08-29 11:43:4120078검색
웹 프론트엔드를 개발할 때 웹사이트를 시각적으로 더욱 아름답고 효과적으로 풍부하게 만들기 위해서는 당연히 CSS의 강력한 속성이 없어서는 안 될 역할을 합니다. 그런 다음 언급해야 할 중요한 속성인 CSS 표시 속성이 있습니다. 그래서 일부 초보자는 CSS에서 표시가 무엇을 의미하는지 물을 수 있습니다. CSS 디스플레이를 사용하는 방법은 무엇입니까?
이 기사에서는 CSS 표시 속성의 구체적인 사용법을 자세히 소개하여 귀하의 질문을 해결해 드릴 것입니다. (이 글을 모두가 쉽게 이해할 수 있도록 블록 수준 요소와 인라인 요소에 대해 자세히 소개한 제 글 [HTML 요소는 어떻게 구별하나요?]를 읽어보시길 권합니다)
우선 , 일반적으로 사용되는 몇 가지 값을 나열하겠습니다: none, block, inline, inline-block
다음으로 구체적인 코드 예제를 통해 CSS 표시 속성의 사용법을 자세히 설명하겠습니다.
1. CSS 표시 블록 속성의 구체적인 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block属性实例</title>
<style>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{
display:block;
width: 30px;height: 30px;
color:#fff;
background: green;margin: 5px;
text-decoration: none;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>위 코드는 브라우저를 통해 액세스되며 효과는 그림 1과 같습니다.
![CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]](https://img.php.cn//upload/image/155/181/330/1535509776826503.png "1535509776826503.png")
display:block 속성을 주석 처리합니다. 그림 2에서 볼 수 있듯이:
![CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]](https://img.php.cn//upload/image/408/696/456/1535509957880975.png "1535509957880975.png")
그런 다음 그림 1과 그림 2를 비교하면 그림 1에서 알 수 있습니다. display:block 속성이 설정되었기 때문에 요소 블록은 a는 너비, 높이, 내부 및 외부 여백 설정을 표시할 수 있습니다. 그림 2에서는 표시 블록 속성만 제거되어 모든 요소 블록에 대해 너비와 높이가 설정되지 않습니다.
즉, 표시 블록 속성은 인라인 요소를 블록 수준 요소로 설정한 다음 너비, 높이, 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백, 패딩 및 여백을 설정할 수 있습니다. 이 속성을 사용하여 원하는 효과를 얻을 수 있습니다.
2. CSS 디스플레이 없음 속성의 구체적인 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none属性实例</title>
<style>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{
display: none; width: 30px;height: 30px;color:#fff; background: green;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
</style>
</head>
<body>
<div class="demo">
<p>a元素不会显示出来</p>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>효과는 그림 3과 같습니다.
![CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]](https://img.php.cn//upload/image/324/990/977/1535511221114844.png "1535511221114844.png")
그림 3에서 display:none 속성을 설정한 후에 이를 확인할 수 있습니다. , 해당 요소는 모두 숨겨져 있으면 표시되지 않습니다. 따라서 display 속성 값은 none 속성으로 결정되는 것이 당연합니다. 표시 없음은 일반적으로 탐색 모음의 첫 번째 및 두 번째 열 디자인에 사용됩니다.
3. CSS 디스플레이 인라인 속성 소개
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:inline属性实例</title>
<style>
p {display: inline}
</style>
</head>
<body>
<p>p标签是块级元素。</p>
<p>此时显示为内联元素，不换行。</p>
</body>
</div>
</body>
</html>효과는 그림 4와 같습니다.
![CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]](https://img.php.cn//upload/image/816/646/687/1535512554851704.png "1535512554851704.png")
그림 4에서 볼 수 있듯이 CSS 디스플레이 인라인 속성은 요소를 인라인으로 바꿀 수 있습니다. 요소, 즉 인라인 요소와 요소 앞뒤에 개행 문자가 없습니다.
4. CSS 표시 인라인 블록 속성 소개
이름에서 알 수 있듯이 inline-block 속성은 확실히 인라인 속성과 블록 속성의 특성을 결합합니다. 즉, 이 속성은 요소를 인라인 블록으로 변환할 수 있음을 의미합니다. 표시용 요소입니다. 지정된 요소를 동일한 줄에 표시할 수 있을 뿐만 아니라 해당 요소의 너비와 높이도 설정할 수 있습니다.
이 글에서는 none, block, inline 및 inline-block의 구체적인 사용 예를 포함하여 CSS 표시 속성의 구체적인 사용 방법을 소개합니다. 그것은 일정한 참고 가치를 가지고 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!