CSS 실용 튜토리얼(3)

12. BOX 스타일 제어

스타일 시트는 객체의 작동 가능한 모든 스타일을 저장하는 컨테이너 BOX를 지정합니다. 여기에는 개체 자체, 테두리 공백, 개체 테두리 및 개체 간격의 네 가지 측면이 포함됩니다.



모든 사람이 이러한 속성의 의미와 속성 간의 관계를 더 잘 이해할 수 있도록 다음 다이어그램을 살펴보시기 바랍니다.

1. 테두리 공백(MARGIN)

그림과 같이 BOX 모델의 가장 바깥쪽 레이어에 위치하며 4가지 속성을 포함합니다.

형식은 다음과 같습니다.

·margin-top: 위쪽 여백 거리

·margin-right: 오른쪽 여백 거리

·margin-bottom : 아래쪽 여백 거리

·margin-left: 왼쪽 여백 거리

여백의 거리는 길이 단위의 숫자로 표현 가능합니다.

위 속성의 단순화된 방법인 margin을 사용하면 길이 단위로 연속된 숫자 4개를 추가하여 각각 margin-top, margin-right, margin-bottom 및 margin-left를 나타낼 수 있습니다. 숫자는 공백으로 구분해야 합니다.

2． 개체 테두리(BORDER)

그림과 같이 테두리 공백과 개체 간격 사이에 위치하며 7가지 속성을 포함합니다.

형식은 다음과 같습니다.

·border-top: 위쪽 테두리 너비

·border-right: 오른쪽 테두리 너비

·border-bottom : 아래쪽 테두리 너비

·border-left: 왼쪽 테두리 너비

·border-width: 모든 테두리 너비

·border-color: 테두리 색상

· border-style: 테두리 스타일 매개변수

그 중 border-width 는 모든 테두리의 너비를 한 번에 설정할 수 있습니다. border-color 는 4개의 테두리 색상을 동시에 설정할 때 쓸 수 있습니다. 네 가지 색상을 연속해서 공백으로 구분합니다. 위에서 연속적으로 설정되는 테두리는 border-top, border-right, border-bottom, border-left의 순서로 되어 있습니다.

테두리 스타일은 여러 테두리 스타일 매개변수도 포함하기 때문에 다른 속성보다 약간 더 복잡합니다.

·없음: 테두리가 없습니다.

·점선 : 테두리가 점선입니다.

·점선: 테두리가 길고 짧은 선입니다.

·solid : 테두리가 실선입니다.

·더블 : 테두리가 이중선입니다.

·groove: 색상 속성에 따라 다양한 효과로 3D 테두리를 표시

·ridge: 색상 속성에 따라 다양한 효과로 3D 테두리를 표시

·inset: 표시 색상 속성에 따라 다른 효과 효과 3D 테두리

·outset: 색상 속성에 따라 다른 효과로 3D 테두리를 표시합니다

3. 객체 간격(PADDING)

그림과 같이 객체 테두리와 객체 사이에 위치하며 4가지 속성을 포함합니다.

기본 형식은 다음과 같습니다.

·padding-top: 위쪽 간격

·padding-right: 오른쪽 간격

·padding-bottom: 하단 간격

·padding-left: 왼쪽 간격

MARGIN과 유사하게 PADDING도 패딩을 사용하여 모든 개체 간격을 한 번에 설정할 수 있으며 형식도 MARGIN과 유사하므로 생략하겠습니다. 하나씩 나열해 보세요.
열셋. 표시 제어 스타일

기본 형식은 다음과 같습니다.

display: 매개변수

매개변수 값 범위:

·block(기본값): 앞 줄 바꿈 및 개체 뒤

·inline: 개체 앞뒤에 줄 바꿈 없음

·list-item: 개체 앞뒤에 줄 바꿈, 글머리 기호 추가

·없음 : 표시 없음

Fourteen． 공백 제어 스타일

의 기본 형식은 다음과 같습니다.

whitespace 속성은 요소 내의 공백을 처리하는 방법을 결정합니다.

white-space: 매개변수

매개변수 값 범위:

normal: 여러 공백을 하나로 바꿔 표시

PRe: 충실히 누르기 공백 표시 입력

nowrap: 줄 바꿈 비활성화

그러나 쓰기 공간도 블록 수준 속성이라는 점에 유의해야 합니다.

전문이 끝났습니다.

위 내용은 CSS 실기 튜토리얼(3) 내용이며, 더 많은 관련 글은 PHP 중국어 홈페이지(www.php. CN)!