CSS 상자 모델이란 무엇입니까? CSS 박스 모델에 대한 간략한 소개-CSS 튜토리얼-php.cn

상자 모델

1. 정의

집

웹 프론트엔드

CSS 튜토리얼

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

不言

Sep 27, 2018 pm 03:42 PM

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외부 효과 line

margin

margin 멤버: margin-left, margin-right, margin-top, margin-bottom
margin 전체 설정

요약: 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 설명: 가로 | 세로

visible

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