CSS 상자 모델이란 무엇입니까? CSS 박스 모델에 대한 간략한 소개

이 글의 내용은 CSS 박스 모델이 무엇인지에 관한 것입니다. CSS 상자 모델에 대한 간략한 소개에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

상자 모델

1. 정의

1. 모든 요소를 ​​상자 모델로 사용할 수 있습니다.
2 상자의 크기는 콘텐츠 너비/높이 + 패딩 + 테두리에 따라 결정됩니다. 3. 상자는 다음 요소의 영향을 받습니다.
일반화된 상자 모델: 문서의 모든 기능 및 내용 태그와 문서의 모든 표시 태그.
좁은 상자 모델: 블록 수준 형식으로 존재하는 태그. 문서 (블록 수준 태그는 상자 모델의 기능을 100% 가지며 가장 일반적으로 사용됩니다)

2. 상자 모델 멤버 소개

content

• 너비와 높이를 설정하여 내용을 지정하세요

• 블록 수준 태그는 자체 너비와 높이를 설정할 수 있습니다. 기본 너비는 상위 너비(너비=자동)이고 높이는 자동입니다(콘텐츠에 따라 확장됨)

• 인라인 태그는 자체 너비와 높이를 설정할 수 없습니다. 기본값은 자동입니다(내용에 따라 확장)

border

• border(border)는 border-width(너비), border-color(색상), border-style(스타일)의 세 부분으로 구성됩니다.

• border 멤버: border-left, border-right, border-top , border-bottom

• border-width 멤버: border-left-width, border-right-width, border-top-width, border-bottom -width

• border-color 멤버: border-left-color, border-right-color, border-top-color, border-bottom-color

• border-style 멤버: border-left-style, border -오른쪽 스타일, 테두리 상단 스타일, 테두리 하단 스타일

StyleExplanationsolidsolid dasheddashed 점선 점선이중이중 실선 groove홈이 있는 선ridgeridgeinset임베디드 효과 라인outset외부 효과 linemargin

• margin 멤버: margin-left, margin-right, margin-top, margin-bottom

• margin 전체 설정

과제 수방향 1위, 아래, 왼쪽 및 오른쪽 2위 및 아래|왼쪽 및 오른쪽3위|왼쪽 및 오른쪽|아래4 up|right|down|left

• 요약: 1. 시작 위치 지정 2. 시계 방향 3. 반대편을 찾지 않음

3. 테두리 둥근 모서리

border-radius

• border-radius member

member설명border -left-left-radiusupper-left positionborder-top-right-radius 상단- 오른쪽 위치border-bottom-left-radius왼쪽 아래 위치border-bottom-right-radius오른쪽 아래

• 단일 방향 설정

할당된 값 수 ​(값 유형: 길이 또는 백분율): 1로 해석됨: 가로 및 세로
할당된 값 수 ​​(값 유형: 길이 또는 백분율): 2 해석됨 as: 가로 | 세로

• 전체 설정 지정 格 형식: 1/1 설명: 가로 | 세로

최대 너비 | Overflow

value

visible기본값입니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다. 콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다. scroll콘텐츠는 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다. auto콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다. inherit은 오버플로 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. valuedescription

	hidden
	display

inline

inlineblock 블록 수준인라인 블록인라인 블록 자체 레이아웃에 영향: 여백 - left, margin-top

5. 상자 모델 레이아웃	상자 모델 레이아웃 기본 소개
레이아웃 방향: margin-left, margin-right, margin-top, margin-bottom

동위 레이아웃에 영향: margin-right, margin-bottom

• forward/reverse: 양수 값/음수 값

• margin 레이아웃 피트

• 많은 의미 체계 태그에 기본값이 있음 margin

• 부모와 자식 태그, margin-top 겹침 중 더 큰 쪽

동위 태그는 margin-bottom, margin-top 겹침 중 더 큰 쪽

위 내용은 CSS 상자 모델이란 무엇입니까? CSS 박스 모델에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!