CSS 구문 매뉴얼(3) 텍스트 채우기, 테두리, 경계 및 위치 속성(1)

1. 상자 채우기 속성

1. padding-bottom
padding-left
padding-top
padding-right

기능: 모든 컨테이너에 있음 Border 에서 이러한 속성은 테두리와 상자 내 요소 사이의 거리를 설정합니다.
값:
길이 - 상대값 또는 절대값을 설정합니다. 숫자 뒤에 측정 단위를 지정합니다: mm, cm, in, pt, px, pc, ex, em. em 및 ex 설정은 상위 글꼴을 기준으로 글꼴 크기를 생성합니다.
백분율 - 테두리를 상위 요소의 백분율로 설정합니다.
참고: 채우기 값에는 음수 값을 사용할 수 없지만 소수는 사용할 수 있습니다.
예

2. 패딩

기능: 상하좌우 방향의 테두리와 콘텐츠 요소 사이의 간격을 설정하는 데 사용되는 단축 속성입니다.
값: 이전과 동일합니다.
설명: 단일 값을 사용하여 각 가장자리를 등거리로 채웁니다. 두 값을 사용하는 경우 첫 번째 값은 위쪽 및 아래쪽 채우기에 사용되고 두 번째 값은 왼쪽 및 오른쪽 채우기에 사용됩니다. 상단 패딩, 왼쪽 및 오른쪽 패딩, 하단 패딩에 할당합니다. 4개의 값을 사용하면 각각 상단, 오른쪽, 하단 및 왼쪽 패딩에 사용됩니다. 숫자 유형은 혼합될 수 있습니다.
예

2. 상자 테두리 속성

1. border-top
border-bottom
border-right
border-left

기능: 이 네 가지 속성은 모두 속기 속성으로 각각 위쪽, 아래쪽, 오른쪽 및 왼쪽 테두리 속성을 설정합니다. 기본적으로 테두리에는 스타일이 지정되지 않습니다.
값: 세 가지 테두리 속성이 있습니다.
border-width: 값은 가늘음, 중간, 두꺼움 또는 지정된 길이입니다.
border-style: 테두리를 장식하는 데 사용되는 음영을 설정합니다. 다음 스타일을 설정할 수 있습니다: 없음, 점선, 점선, 실선, 이중, 홈, 능선, 삽입, 시작.
border-color: 테두리 색상을 설정합니다.
예

2. border-top-width
border-bottom-width
border-right=width
border-left-width

기능: 각각 각 테두리의 두께를 설정합니다.
값:
얇음 - 얇은 테두리.
medium - 중간 선 너비.
굵은 선.
길이 - 테두리 너비를 상대 또는 절대 단위로 설정합니다.
예

3. border-width

기능: 4개의 테두리 너비를 동시에 설정할 수 있는 약어 속성입니다.
값:
얇음 - 얇은 테두리.
medium - 중간 선 너비.
굵은 선.
길이 - 테두리 너비를 상대 또는 절대 단위로 설정합니다.
설명: 패딩 설명을 참조하세요.
예:

4. border-color

기능: 약어 속성, 4개 테두리의 색상 값을 설정합니다.
값: 색상 이름이나 RGB 값을 사용할 수 있습니다. 단일 색상을 지정하면 네 가지 테두리가 모두 이 색상으로 표시됩니다. 두 가지 색상을 지정하면 위쪽, 아래쪽, 왼쪽, 오른쪽 순서로 표시됩니다. 하단; 4가지 색상을 지정한 경우 순서는 위, 오른쪽, 아래, 왼쪽입니다.
사용방법: 색상명은 다음과 같습니다
아쿠아, 블랙, 블루, 퓨샤, 그레이, 그린, 라임, 마룬, 네이비, 올리브, 퍼플, 레드, 실버, 청록색, 화이트, 옐로우.
용 RGB 값을 지정하는 방법에는 세 가지가 있습니다.
#rrggbb; rgb(r%,g%,b%)
예:

5. border-style

기능: 테두리를 표시하고 테두리 스타일을 지정하는 데 사용됩니다.
값:
none - 테두리를 표시하지 않음(기본값) 3D inset line
ridge - 3D 능선 같은 선
inset - 페이지가 가라앉는 느낌
outset - 페이지가 떠다니는 느낌을 줍니다.
참고: 모든 브라우저가 능선, 삽입을 표시할 수 있는 것은 아닙니다. 오프셋과 같은 스타일을 사용하면 일부 브라우저는 모든 테두리를 실선으로 그립니다.




6. border

기능: 약어 속성, 모든 테두리 속성을 설정합니다. 값:

border-width - 얇음, 중간, 두꺼움 또는 지정된 길이 값입니다.

border-style - 값 없음, 점선, 점선, 실선, 이중, 홈, 능선, 삽입, 시작

border-color - 사용 가능한 색상 이름 또는 RGB 값.

참고: 다른 약식 속성과 달리 각 설정은 하나의 값만 사용할 수 있습니다. 이 속성은 상자의 모든 면에서 균등하게 작동합니다.
예:




위 내용은 CSS 문법 매뉴얼(3) 텍스트 채우기, 테두리, 테두리 및 위치 속성(1)의 내용입니다. PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!