CSS 디스플레이, 부동, 투명, 오버플로, 가시성의 여러 속성
- 巴扎黑원래의
- 2017-06-28 11:32:231699검색
http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/
display attribute: block/inline/none
display: block (함수는 행 속성을 표시하는 것입니다. label 블록 속성 라벨, 너비와 높이를 설정할 수 있습니다.
display: inline(이 기능은 블록 속성 라벨을 행 속성 라벨로 표시하는 것입니다. 그러면 블록 속성 라벨이 너비와 높이를 설정할 수 없습니다.)
display: none (제어되는 레이블이 표시되지 않도록 하는 기능입니다.)
visibility: hide (요소의 상자가 보이지 않도록 설정하지만 레이아웃에서의 위치는 변경되지 않습니다.)
표시와 차이점: 없음 후자는 해당 위치를 차지하지 않으며, 다음 요소는 이를 직접 덮고, 전자는 레이아웃을 차지하지만 내용을 표시하지 않고 비어 있으며, 다운로드할 때 display: none이 사용되면 표시되지 않은 요소는 다운로드되지 않지만 가시성: 숨겨진 요소는 다운로드됩니다.
float(부동, 여전히 문서 흐름 제한이 적용됨) 행 레이블이 부동된 후 너비와 높이를 설정할 수 있습니다.
float: 없음/왼쪽/오른쪽
none: 개체가 뜨지 않습니다
left: 왼쪽 float
right: 오른쪽 float
clear(clear float)
clear: 둘 다/없음/왼쪽/오른쪽
none: 부동 허용 양쪽에 있는 개체
both: 떠 있는 개체 허용 안 됨
left: 허용되지 않음 왼쪽에 떠 있는 개체 있음
right: 오른쪽에 떠 있는 개체 허용 안 됨
overflow(overflow)
overflow: visible/auto/hidden/ scroll
visible: 내용을 자르거나 스크롤 막대를 추가하지 않음
auto: 기본 속성
hidden: 내용 너머로 숨김
scroll: 항상 스크롤 막대 표시
visibility(visible)
visibility: 상속/가시/숨김
inherit: Inherit 이전 상위 개체의 가시성
visible: 개체 표시
hidden: 개체 숨김
여러 이미지 형식 간의 차이점:
gif: 반투명을 지원하지 않음
jpg: 투명도 지원
png: 투명도를 부분적으로 지원하고 추가 처리 필요
==============
http ://www.studyofnet.com/news/398.html
1. 블록 요소: 블록 요소
각 블록 수준 요소는 기본적으로 한 행의 높이를 차지합니다. 행에 블록 수준 요소를 추가하는 것은 일반적일 수 없습니다(float가 부동된 후에는 제외). 두 개의 블록 수준 요소를 연속적으로 편집하면 자동으로 페이지에 줄바꿈되어 표시됩니다. 블록 수준 요소는 일반적으로 블록 수준 요소 또는 인라인 요소를 중첩할 수 있습니다.
블록 수준 요소는 일반적으로 구조를 구성하는 컨테이너로 표시되지만 항상 그런 것은 아닙니다.