웹 프론트엔드를 개발할 때 웹사이트를 시각적으로 더욱 아름답고 효과적으로 풍부하게 만들기 위해서는 당연히 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과 같습니다.
display:block 속성을 주석 처리합니다. 그림 2에서 볼 수 있듯이:
그런 다음 그림 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과 같습니다.
그림 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와 같습니다.
그림 4에서 볼 수 있듯이 CSS 디스플레이 인라인 속성은 요소를 인라인으로 바꿀 수 있습니다. 요소, 즉 인라인 요소와 요소 앞뒤에 개행 문자가 없습니다.
4. CSS 표시 인라인 블록 속성 소개
이름에서 알 수 있듯이 inline-block 속성은 확실히 인라인 속성과 블록 속성의 특성을 결합합니다. 즉, 이 속성은 요소를 인라인 블록으로 변환할 수 있음을 의미합니다. 표시용 요소입니다. 지정된 요소를 동일한 줄에 표시할 수 있을 뿐만 아니라 해당 요소의 너비와 높이도 설정할 수 있습니다.
이 글에서는 none, block, inline 및 inline-block의 구체적인 사용 예를 포함하여 CSS 표시 속성의 구체적인 사용 방법을 소개합니다. 그것은 일정한 참고 가치를 가지고 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 CSS의 표시 속성은 무엇을 의미합니까? 그것을 사용하는 방법? [예제 요약]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!