CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]

藏色散人

Aug 29, 2018 am 11:43 AM

웹 프론트엔드를 개발할 때 웹사이트를 시각적으로 더욱 아름답고 효과적으로 풍부하게 만들기 위해서는 당연히 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의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]

display:block 속성을 주석 처리합니다. 그림 2에서 볼 수 있듯이:

CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]

그런 다음 그림 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의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]

그림 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의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]

그림 4에서 볼 수 있듯이 CSS 디스플레이 인라인 속성은 요소를 인라인으로 바꿀 수 있습니다. 요소, 즉 인라인 요소와 요소 앞뒤에 개행 문자가 없습니다.

4. CSS 표시 인라인 블록 속성 소개

이름에서 알 수 있듯이 inline-block 속성은 확실히 인라인 속성과 블록 속성의 특성을 결합합니다. 즉, 이 속성은 요소를 인라인 블록으로 변환할 수 있음을 의미합니다. 표시용 요소입니다. 지정된 요소를 동일한 줄에 표시할 수 있을 뿐만 아니라 해당 요소의 너비와 높이도 설정할 수 있습니다.

이 글에서는 none, block, inline 및 inline-block의 구체적인 사용 예를 포함하여 CSS 표시 속성의 구체적인 사용 방법을 소개합니다. 그것은 일정한 참고 가치를 가지고 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사