CSS 실용 튜토리얼(3)
- 黄舟원래의
- 2016-12-17 11:40:431390검색
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)!