CSS 표시 및 가시성
일반적인 개발 과정에서 우리는 원하는 효과를 얻기 위해 특정 시나리오에서 표시되거나 숨겨진 일부 텍스트를 항상 접하게 됩니다. CSS의 표시 및 표시 구문 모두 html 요소를 숨기거나 표시할 수 있습니다. 똑같아 보일 수도 있지만 여전히 특정 차이점이 있습니다.
디스플레이 정의 및 사용법
디스플레이 속성은 요소가 생성해야 하는 상자 유형을 지정합니다.
설명
이 속성은 레이아웃 생성 시 요소에서 생성되는 표시 상자 유형을 정의하는 데 사용됩니다. HTML과 같은 문서 유형의 경우 부주의하게 표시를 사용하면 HTML에 이미 정의된 표시 계층 구조를 위반할 수 있으므로 위험할 수 있습니다. XML의 경우 XML에는 이러한 종류의 계층 구조가 내장되어 있지 않으므로 모든 표시가 절대적으로 필요합니다.
가능한 값
값 none 이 요소는 표시되지 않습니다.
block 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
인라인 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
inline-block 인라인 블록 요소입니다. (CSS2.1의 새로운 값)
list-item 이 요소는 목록으로 표시됩니다.
run-in 이 요소는 상황에 따라 블록 수준 요소 또는 인라인 요소로 표시됩니다.
compact CSS에는 Compact 값이 있지만 폭넓은 지원이 부족하여 CSS2.1에서는 제거되었습니다.
마커 CSS에는 값 마커가 있지만 폭넓은 지원이 부족하여 CSS2.1에서는 제거되었습니다.
table 이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(<table>과 유사)로 표시됩니다.
inline-table 이 요소는 테이블 앞뒤에 줄 바꿈 없이 인라인 테이블(<table>과 유사)로 표시됩니다.
table-row-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(<tbody>와 유사).
table-header-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(<thead>와 유사).
table-footer-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(<tfoot>와 유사).
table-row 이 요소는 테이블 행으로 표시됩니다(<tr>와 유사).
table-column-group 이 요소는 하나 이상의 열 그룹으로 표시됩니다(<colgroup>과 유사).
table-column 이 요소는 셀 열로 표시됩니다(<col>와 유사)
table-cell 이 요소는 테이블 셀로 표시됩니다(<td>와 유사). ; 및 <th>)
table-caption 이 요소는 테이블 제목으로 표시됩니다(<caption>과 유사).
inherit는 표시 속성의 값이 다음과 같아야 함을 지정합니다. 상위 요소에서 상속됩니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>가시성 정의 및 사용법
가시성 속성은 요소가 요소인지 여부를 지정합니다. 표시됩니다.
팁: 보이지 않는 요소도 페이지 공간을 차지합니다. 페이지 공간을 차지하지 않는 보이지 않는 요소를 만들려면 "display" 속성을 사용하세요.
설명
요소에 의해 생성된 요소 상자를 표시할지 여부를 지정하는 속성입니다. 이는 요소가 여전히 원래 공간을 차지하지만 완전히 보이지 않을 수 있음을 의미합니다. 값 축소는 테이블 레이아웃에서 열이나 행을 제거하기 위해 테이블에서 사용됩니다.
가능한 값
값 표시 기본값입니다. 요소가 표시됩니다.
숨겨진 요소는 보이지 않습니다.
collapse 테이블 요소에서 이 값을 사용하면 행이나 열을 삭제할 수 있지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.
inherit는 가시성 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>CSS 표시 - 블록 및 인라인 요소
블록 요소는 전체 너비를 차지하고 앞뒤에 줄바꿈이 오는 요소입니다.
블록 요소의 예:
<h1>
<p>
<div>
인라인 요소만 필요한 너비가 필요하며 줄 바꿈이 강제로 적용되지 않습니다.
인라인 요소의 예:
<span>
<a>
표시를 변경하는 방법 요소
인라인 요소와 블록 요소를 변경하거나 그 반대로 변경하여 페이지를 특정 방식으로 구성하면서도 여전히 웹 표준을 준수하도록 할 수 있습니다.
다음 예에서는 목록 항목을 인라인 요소로 표시합니다.
li {display:inline;}
다음 예에서는 범위 요소를 블록 요소로 사용합니다.
span {display:block;}
참고: 요소의 표시 유형을 변경하여 요소가 표시되는 방식과 요소의 종류를 확인하세요. 예를 들어, display:block으로 설정된 인라인 요소는 그 안에 중첩된 블록 요소를 가질 수 없습니다.
