CSS 디스플레이, 부동, 투명, 오버플로, 가시성의 여러 속성

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가 부동된 후에는 제외). 두 개의 블록 수준 요소를 연속적으로 편집하면 자동으로 페이지에 줄바꿈되어 표시됩니다. 블록 수준 요소는 일반적으로 블록 수준 요소 또는 인라인 요소를 중첩할 수 있습니다.

블록 수준 요소는 일반적으로 구조를 구성하는 컨테이너로 표시되지만 항상 그런 것은 아닙니다.

과 같은 일부 블록 수준 요소는 블록 수준 요소만 포함할 수 있습니다. 다른 블록 레벨 요소는

와 같은 라인 레벨 요소를 포함할 수 있습니다. 다른 블록 레벨 요소는 라인 레벨 요소를 모두 포함할 수 있습니다.

p는 가장 일반적으로 사용되는 블록 수준 요소이며, display:block 요소 스타일은 모두 블록 수준 요소입니다. 항상 블록 형태로 표현되며, 같은 레벨의 형제 블록과 수직으로 순차적으로 배열되어 왼쪽과 오른쪽을 채운다.

2. 인라인 요소: 인라인 요소

는 인라인 요소라고도 하며, 인라인 요소 등은 일반적으로 의미 수준(semantic)에 따른 기본 요소이며 수용할 수만 있습니다. 텍스트 또는 기타 인라인 요소, 공통 인라인 요소 "a". 예를 들어 SPAN 요소, IFRAME 요소 및 요소 스타일 표시: 인라인은 모두 인라인 요소입니다. 예를 들어, 텍스트와 같은 요소는 글자 사이에 가로로 배열되어 자동으로 오른쪽 끝으로 줄바꿈됩니다.

3. 블록 요소의 특징


①, 항상 새 줄에서 시작합니다.


②, 높이, 줄 높이, 외부 여백 및 내부 여백을 모두 제어할 수 있습니다. 너비가 설정되지 않은 경우 너비는 기본적으로 컨테이너의 100%입니다.


4, 인라인 요소와 기타 블록 요소를 수용할 수 있습니다.

4. 인라인 요소의 특징

①과 다른 요소는 같은 줄에 있습니다.


②, 높이, 줄 높이; 여백과 패딩은 변경할 수 없습니다.


3, 너비는 텍스트 또는 그림의 너비이며 변경할 수 없습니다.

4, 인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다.

인라인 요소, 다음 사항에 유의하세요.

너비 너비 설정이 잘못되었습니다.
높이 높이 설정이 유효하지 않으며 line-height를 통해 설정할 수 있습니다.
여백을 설정하세요. 왼쪽 및 오른쪽 여백만 유효하며 위쪽 및 아래쪽 여백은 유효하지 않습니다.
패딩 설정은 왼쪽 및 오른쪽 패딩에만 유효하며 상단 및 하단에는 적용되지 않습니다. 요소의 범위는 증가하지만 요소 주변의 콘텐츠는 영향을 받지 않습니다.

5. 공통 블록 요소

주소 - 주소

• blockquote - 블록 인용

• center - 가운데 정렬 블록

• dir - 디렉토리 목록

• p - 일반적으로 사용되는 블록 수준이 쉽고 CSS 레이아웃의 기본 태그

• dl - 정의 list

• fieldset – 양식 제어 그룹

• form – 대화형 양식

• h1 – 제목

• h2 – 자막

• h3 – 레벨 3 제목

• h4 – 레벨 4 제목

• h5 – 레벨 5 제목

• h6 – 레벨 6 제목

• hr – 가로 구분선

• isindex – 입력 프롬프트

• menu – 메뉴 목록

• noframes – 프레임 선택 사항 content, (이 블록 콘텐츠는 프레임을 지원하지 않는 브라우저에 표시됩니다.

• noscript - 선택적 스크립트 콘텐츠(이 콘텐츠는 스크립트를 지원하지 않는 브라우저에 표시됩니다.)

• ol - 주문 양식

• p – 단락

• pre – 서식 있는 텍스트

• table – 테이블

• ul – 순서가 지정되지 않은 목록

6. 공통 인라인 요소

• a – 앵커

• abbr – 약어

• acronym – 첫 번째 단어

• b – 굵게(권장하지 않음)

• bdo – bidi override

• big – 큰 글꼴

• br – 줄바꿈

• cite – quote

• code – 컴퓨터 코드(소스 코드를 인용할 때 필요)

• dfn – 필드 정의

• em – 강조

• 글꼴 – 글꼴 설정(권장하지 않음)

• i – 기울임꼴

• img – 이미지

• input – 입력 상자

• kbd – 키보드 텍스트 정의

• label – 테이블 라벨

• q – 짧은 따옴표

• s – 밑줄 (권장하지 않음)

• samp – 컴퓨터 코드 정의 예

• select – 프로젝트 선택

• small – 작은 글꼴 텍스트

• span – 일반적으로 사용되는 인라인 컨테이너, 텍스트 내의 블록 정의

• strike – 밑줄

• strong – 굵은 강조

• sub – 아래 첨자

• sup – 위 첨자

• textarea – 여러 줄 텍스트 입력 상자

• t t – 텔렉스 문자

• u – 밑줄

7. 인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?

차이점 1:

블록 수준: 블록 수준 요소는 기본적으로 너비는 상위 요소의 너비를 자동으로 채웁니다.

인라인: 인라인 요소는 단독 라인을 차지하지 않으며 인접한 인라인 요소는 같은 줄에 배열됩니다. 내용에 따라 너비가 변경됩니다.

차이 2:

블록 수준: 블록 수준 요소는 너비와 높이를 설정할 수 있습니다

인라인: 인라인 요소는 너비와 높이를 설정할 수 없습니다

차이 3:

블록 level : 블록 수준 요소는 여백 및 패딩으로 설정할 수 있습니다.

인라인: 가로 여백-왼쪽; padding-right; 그러나 수직 margin-bottom; padding-top;은 적용되지 않습니다. 차이점 4:

블록 수준: display:block;

위 내용은 CSS 디스플레이, 부동, 투명, 오버플로, 가시성의 여러 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!