CSS 상자 모델

2016-10-22

"CSS 초보자의 클래식" 6장

1. 각 HTML 요소는 표시 상자에 해당하지만 모든 요소가 화면에 표시되는 것은 아닙니다.

2. HTML 요소가 CSS 표시 상자로 표시되는 실제 방식을 "시각적 형식 지정 방법"이라고 합니다. 시각적 서식은 HTML 콘텐츠가 화면에 표시되는 방식을 브라우저에 알려줍니다.

3. 요소 유형:

(1) 블록 요소(block): 새로운 줄로 시작하고 끝납니다.

, ,
등

(2) 인라인 요소(inline) : 단독 라인을 차지하지 않고 텍스트 흐름에 포함됩니다. , , , 등

4.표시 속성

표시 속성 값을 설정하여 요소 유형을 변경할 수 있습니다

표시:없음;표시하지 않음

디스플레이:블록 요소로 설정

디스플레이:인라인 요소로 설정

5. 익명박스

태그에 텍스트와 일부 HTML 태그 등 혼합된 콘텐츠가 포함된 경우 HTML 태그가 없는 상자, 즉 익명 상자가 생성됩니다. 익명 상자는 포함된 상자와 동일한 스타일을 갖습니다.

예.

Hello World!

그림에서 볼 수 있듯이 Hello 텍스트는 익명 상자입니다.

6. HTML에서는 태그가 display:none;으로 정의됩니다. 따라서 페이지에서 태그의 내용을 볼 수 없습니다.

7. 상자 속성 표시

여백: 여백

경계: 경계

패딩 : 패딩

(1) 여백: 두 상자 사이의 거리입니다. 여백은 항상 투명합니다.

참고: 겹치는 여백, 즉 두 개의 수직 상자는 수직 간격으로 두 요소 사이의 최대값을 사용합니다. 여백은 블록 요소에서만 겹치며 가로가 아닌 세로로 겹칩니다.

(2) 테두리:

테두리 속성 설정: 선택기 { 테두리: 크기 스타일 색상 }

border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

테두리 너비

테두리 너비를 지정합니다.

thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

테두리 스타일

테두리 스타일을 지정합니다.

테두리 색상

테두리 색상을 지정합니다.

상속

테두리 속성 설정이 상위 요소에서 상속되도록 지정합니다.

너비:

얇다

얇은 테두리를 정의하세요.

중간

기본값. 중간 테두리를 정의합니다.

두꺼움

두꺼운 테두리를 정의하세요.

길이

테두리 너비를 맞춤설정할 수 있습니다.

상속

는 테두리 너비가 상위 요소에서 상속되어야 함을 지정합니다.

스타일:

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

없음

테두리를 정의하지 마세요.

숨김 '없음'과 동일합니다. 테두리 충돌을 해결하기 위해 숨김이 사용되는 테이블에 적용되는 경우는 제외됩니다.

점선

점선 테두리를 정의하세요. 대부분의 브라우저에서는 실선으로 렌더링됩니다.

점선

점선을 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.

단색

실선을 정의합니다. 더블 이중선을 정의합니다. 이중선의 너비는 border-width 값과 같습니다. 그루브 3D 홈 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다. 능선 3D 능선 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다. 삽입 3D 삽입 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다. 시작 3D 시작 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다. 상속 테두리 스타일이 상위 요소에서 상속되어야 함을 지정합니다. 설명 예측하기 가장 어려운 테두리 스타일은 이중입니다. 이는 두 줄의 너비에 border-width 값과 같은 두 줄 사이의 공간을 더한 값으로 정의됩니다. 그러나 CSS 사양에서는 선 중 하나가 다른 선보다 두꺼운지, 두 선이 모두 같은 두께인지, 선 사이의 간격이 선보다 두꺼워야 하는지에 대해 언급하지 않습니다. 이 모든 것은 사용자 에이전트에 의해 결정되며 광고 소재는 이 결정에 영향을 미치지 않습니다. (W3스쿨) (3) 패딩: 콘텐츠 주변의 공간입니다. 패딩은 항상 콘텐츠 자체의 배경색과 동일합니다. 참고: (1) 테이블 셀은 인라인 요소도 아니고 블록 요소도 아닙니다. 테이블 셀의 표시 값은 display:table-cell입니다. table-cell 요소에는 여백이 있을 수 없습니다. (2) 줄 길이 em: CSS에서 줄 길이는 위치 크기와 동일한 측정값으로 정의됩니다. 이는 글꼴의 높이와 동일한 높이와 너비를 갖는 정사각형입니다.