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으로 문의하세요.
저자별 최신 기사
2020-02-27 16:50:07
2020-01-30 22:49:41
2020-01-30 22:43:08
2023-04-08 11:32:02
2023-04-08 11:24:01
2023-04-08 11:00:01
2023-04-08 10:56:02
2023-04-08 10:54:02
2023-04-08 10:36:01
2023-04-08 10:34:01