표시 속성은 CSS에서 가장 중요한 속성 중 하나이며 주로 요소의 레이아웃을 제어하는 데 사용됩니다. 표시 속성을 통해 요소 표시 여부와 방법을 설정할 수 있습니다.
1. 표시 속성의 역할
1. 표시 속성은 요소의 내부 및 외부 표시 유형을 설정할 수 있습니다.
(1) 외부 디스플레이 유형:
a. 요소의 외부 디스플레이 유형에는 블록, 인라인 등이 포함됩니다.
b. 외부 디스플레이 유형에 따라 유동 레이아웃의 요소 성능이 결정됩니다.
(2) 내부 디스플레이 유형:
내부 디스플레이 유형에는 플렉스 레이아웃, 그리드 레이아웃, 유동 레이아웃 등이 포함됩니다.
요소의 내부 표시 유형은 해당 하위 항목이 배치되는 방식을 제어합니다.
2. 유동 레이아웃(문서 흐름 또는 일반 흐름):
"문서 흐름" 또는 "유동 레이아웃"은 레이아웃이 변경되기 전에(기본적으로) "블록" 및 "인라인" 요소가 페이지에 표시되는 방식입니다.
간단하고 직설적으로 말하면 블록 수준 요소와 인라인 요소를 입력하고 페이지에 표시하는 방법을 규정하는 조판 방법입니다.
(1) 흐름 레이아웃에서 - 블록 수준 요소 레이아웃 방법:
블록 수준 상자는 포함 블록의 상단부터 시작하여 수직으로 순서대로 배열됩니다.
동일한 레벨의 상자 사이의 수직 거리는 "여백" 속성에 의해 결정됩니다.
인접한 두 블록 수준 상자 사이의 수직 간격은 여백 접기 원리에 따라 축소됩니다.
(2) 유동 레이아웃 - 인라인 요소 레이아웃 방법:
상자는 포함 블록의 상단부터 시작하여 수평으로 정렬됩니다.
가로 여백, 테두리 및 안쪽 여백만 유지됩니다.
상자는 아래쪽이나 위쪽, 텍스트 아래쪽 정렬 등 다양한 방법으로 수직으로 정렬할 수 있습니다.
2. 요소 외부 디스플레이 방식
1. splay는 다음 속성 값을 통해 요소의 표시 유형을 지정합니다.
(1) 블록 블록 레벨
(2) 인라인 블록 인라인 블록
(3) 인라인
2. 요소 표시 유형은 블록 레벨과 인라인 등으로 구분됩니다.
3. 인라인(인라인) 요소는 인라인 인라인 요소와 인라인 블록 인라인 블록 요소로 구분됩니다.
(1) 이중블록 블록 수준 요소
1. 일반적인 블록 수준 요소는 다음과 같습니다.
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl> 등
2. 블록 수준 요소의 특성:
(1) 전용라인
(2) 너비와 높이 속성을 설정할 수 있습니다.
(3) 너비가 설정되지 않은 경우 너비는 기본적으로 상위 요소의 콘텐츠 영역 너비로 설정됩니다.
(4) 블록 수준 요소에는 모든 유형의 요소를 배치할 수 있지만, 텍스트 요소 태그에는 다른 블록 요소를 배치할 수 없습니다.
(5) p 및 div 태그는 p 태그 안에 배치될 수 없습니다.
(6) p 및 div 태그는 h1-h6 태그에 배치할 수 없습니다.
(2) 인라인 블록 인라인 블록 요소
1. 다음 요소는 인라인 블록 요소의 특성을 갖습니다.
<img>, 양식 요소, <video>, <audio> 등 이러한 요소는 본질적으로 교체 가능한 요소라고 합니다(인라인 요소로 분류됨).
2. 인라인 블록 요소의 특성:
(1) 인접한 인라인 블록(또는 인라인) 요소는 한 줄에 표시됩니다. 배치할 수 없으면 다른 줄로 넘어갑니다.
(2) 인접한 인라인 블록 요소 사이에는 빈 공간이 있습니다.
(3) 너비 및 높이 속성을 설정할 수 있습니다. 요소의 기본 너비는 해당 콘텐츠의 너비입니다.
(3) 인라인 인라인(inline) 요소
1. 일반적인 인라인 요소는 다음과 같습니다.
<a>, <strong>, <span>, <i>, <del> 등
2. 인라인 요소의 특성:
인접한 인라인 요소가 한 줄에 표시됩니다. 맞지 않으면 새 줄에 표시됩니다.
너비 및 높이 속성 설정이 잘못되었습니다. 콘텐츠의 크기에 따라 너비와 높이가 확장됩니다.
인라인 요소 안에는 텍스트나 기타 인라인 요소만 배치할 수 있습니다.
3. 참고:
<a> 태그는 <a> 태그 안에 들어갈 수 없지만, 블록 수준 요소는 <a> 태그 안에 들어갈 수 있습니다.
실제 개발에서는 경우에 따라 <a> 태그가 블록 수준 요소로 변환됩니다.
세 가지 요소 유형 비교
3. 인라인 요소와 블록 수준 요소 간의 변환
요소를 해당 요소 유형으로 변환하려면 해당 요소에 해당 표시 속성 값을 추가하기만 하면 됩니다.
(1) 요소를 블록 수준 요소로 변환하려면 display: block을 사용합니다.
예:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;Background-color:#ACC;line-height:50px;text-align:center;text-design: 없음;}</style></head><body><ahref=>dotcpp 프로그래밍 링크</a></body></html>실행 결과:
(2) 요소를 인라인 요소로 변환하려면 display: inline을 사용하세요. 그러나 요소를 인라인 요소로 변환하는 응용 프로그램은 거의 없습니다.
(3) 요소를 인라인 블록 요소로 변환하려면 display: inline-block을 사용하세요.
4. 히든요소 방식
다시 채우다:
(1) 없음 이외의 표시값은 표시요소입니다.
(2) 가시성:visible은 표시 요소입니다.
예:
display의 속성 값 none은 visible: hide;와 유사한 기능을 가지고 있습니다. 차이점은 display: none입니다. 요소를 숨기는 동안 요소가 차지하는 위치도 숨겨집니다. display: none;은 일반적으로 요소를 숨기거나 표시하기 위해 JavaScript와 함께 사용됩니다.
<!DOCTYPEhtml><html><head><style>div{너비:350px;높이:100px;배경색:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>숨기기</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>실행 결과:
5. 두 가지 숨기기 방법의 차이점
6. 인라인 블록 요소의 기본 공백을 제거합니다.
인라인 블록 요소 사이에는 기본적으로 간격이 생성됩니다.
격차가 있는 이유:
(1) 요소가 인라인 요소로 형식화되면 요소 사이의 공백 문자(공백, 캐리지 리턴, 줄 바꿈 등)가 브라우저에서 처리됩니다.
(2) 공백 처리 방법(기본값은 초과 공백을 병합하는 일반)에 따라 원본 HTML 코드의 캐리지 리턴 및 줄 바꿈이 공백 문자로 변환되므로 요소 사이에 공백이 나타납니다.
(3) 이 요소들 사이의 간격은 글꼴 크기에 따라 변경됩니다.
해결책:
(1) 상위 요소를 추가하고 동시에 하위 요소의 글꼴 크기를 다시 작성합니다.
글꼴 크기 속성에는 상속이 있으므로 상위 요소인 글꼴 크기:0은 하위 요소 범위에 상속되며 하위 요소는 글꼴 크기 크기를 재설정해야 합니다.
(2) 요소에 float 추가
요소에 float를 추가한 후 문서 흐름에서 벗어나게 됩니다. 상위 요소의 높이가 추가되지 않으면 높이 붕괴 문제가 발생하므로 float로 인해 발생하는 문제를 해결해야 합니다.
(3) 그림 사이의 간격에 display:block을 추가합니다.
display:block을 추가하면 이미지가 블록 수준 요소가 되어 전용 라인을 차지합니다.