CSS 표시 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 표시 속성을 사용하는 방법

silencement

May 26, 2019 pm 04:45 PM

표시 속성

CSS 표시 속성을 사용하는 방법

display 속성 정의 및 사용법

display 속성은 웹 페이지 레이아웃에서 많이 사용되며 많은 속성 값을 가지지만 가장 일반적으로 사용되는 속성은 block, inline-block, inline 및 none입니다. 다른 속성 값은 드물기 때문에 여기서는 일반적으로 사용되는 속성 값의 사용법에 중점을 둘 것입니다.

CSS에서 표시 속성은 요소가 생성해야 하는 상자 유형을 정의하는 데 사용되며 종종 블록형 요소를 인라인 요소로 변환하거나, 인라인 요소를 블록 요소로 변환하거나, 블록 요소/인라인 요소를 인라인 블록 요소로 변환하는 데 사용됩니다. 인라인 블록 요소는 블록 요소와 인라인 요소의 특성을 갖습니다.

표시 속성 구문 형식

1.css 구문: 표시:none/inline/block/inline-block/list-item/run-in/table/inline-table/table-row-group/table-header -group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit

2.JavaScript 구문: object.style.display="inline"

표시 속성 값 설명

none: 표시하지 않는 요소를 설정합니다.

block: 해당 요소를 블록 수준 요소로 설정합니다.

inline: 해당 요소를 인라인 요소로 설정합니다.

inline-block: 인라인 블록 요소입니다. , 기존 블록 요소 인라인 요소에 이미 존재하는 기능

list-item: 요소를 목록으로 설정

run-in: 컨텍스트에 따라 블록 수준 요소 또는 인라인 요소로 표시

compact/marker: 있음 CSS2.1

에서 제거되었습니다.

table: 요소를 블록 수준 테이블(

과 유사)로 설정하고 테이블 앞뒤에 줄바꿈을 사용합니다.

inline-table: 요소를 인라인으로 설정합니다. 테이블(

과 유사), 테이블 앞뒤에 줄 바꿈이 없습니다.

table-row-group: 요소를 하나 이상의 행 그룹으로 설정합니다(

와 유사)

table- header-group:

태그와 유사

table-footer-group:

태그와 유사;table-row: 태그 표시 속성의 none 속성 값과 유사

요소의 표시 속성 값이 없음으로 설정되면 요소가 숨겨지고 표시되지 않으며 웹 페이지 공간을 차지하지 않습니다. CSS 숨겨진 요소의 표시 및 가시성 속성 사용 참고사항

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>

로그인 후 복사

위 내용은 CSS 표시 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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