CSS 표시 속성을 사용하는 방법
- silencement원래의
- 2019-05-26 16:45:493824검색
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: 요소를 블록 수준 테이블(f5d188ed2c074f8b944552db028f98a1과 유사)로 설정하고 테이블 앞뒤에 줄바꿈을 사용합니다.
inline-table: 요소를 인라인으로 설정합니다. 테이블(f5d188ed2c074f8b944552db028f98a1과 유사), 테이블 앞뒤에 줄 바꿈이 없습니다.
table-row-group: 요소를 하나 이상의 행 그룹으로 설정합니다(92cee25da80fac49f6fb6eec5fd2c22a와 유사)
table- header-group: ae20bdd317918ca68efdc799512a9b39 태그와 유사
table-footer-group: 06669983c3badb677f993a8c29d18845 태그와 유사;table-row: a34de1251f0d9fe1e645927f19a896e8 태그 표시 속성의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!