페이지 레이아웃의 세 가지 핵심: 상자 모델, 부동 및 위치 지정.
웹 페이지 레이아웃의 핵심: CSS를 통해 상자 배치
상자 모델의 구성 요소에는 테두리, 여백, 패딩 및 실제 콘텐츠가 포함됩니다.
패딩: 기본적으로 상자에 표시되며 텍스트와 상자 사이의 거리를 제어합니다.
여백: 상자 사이의 거리를 제어합니다.
테두리에는 테두리 너비(두께), 테두리 스타일(실선, 점선, 점선), 테두리 색상이 포함됩니다.
div {
너비: 300px;
높이: 200px;
테두리 너비: 5px; 테두리 너비 테두리 스타일: 단색 테두리 스타일: 점선 테두리 스타일: 점선 테두리 색상}테두리: 1px 단색 빨간색, 순서 없음
테두리를 별도로 작성하는 방법(특정 가장자리를 수정하는 데 사용):
테두리 상단: 1px 단색 파란색; 테두리 하단:1px 솔리드 핑크;
테두리가 하나만 있는 경우 계단식 쓰기를 사용할 수 있습니다.
테두리: 5px 점선 분홍색; border-top: 1px 단색 파란색, 위의 전체 상자를 덮는 상단 테두리
테이블의 얇은 선 테두리:
표에서 셀 사이의 간격을 0으로 설정하면 인접한 두 셀의 테두리가 함께 배치되기 때문에 이 부분의 너비가 한 셀의 설정된 테두리 너비보다 크게 나타나게 됩니다. border-collapse 속성을 사용할 수 있습니다.
border-collapse 속성은 브라우저가 테이블 테두리를 그리는 방법을 제어하며 인접한 셀의 테두리를 제어합니다. 인접한 테두리를 함께 병합합니다.
테이블 {
border-collapse: Collapse; 이 속성을 적용하려면 테이블에 추가해야 합니다.} 테두리는 상자의 실제 크기에 영향을 미칩니다 . <br/>두 가지 옵션이 있으므로 테두리가 있으면 상자 크기가 커집니다.
(1) 상자 크기를 측정할 때 테두리를 측정하지 마십시오. (2) 측정에 테두리가 포함된 경우 너비와 높이 값에서 테두리의 너비를 빼야 합니다.
테두리와 내용 사이의 거리입니다.
패딩은 상자의 실제 크기에 영향을 미칩니다 . <br/>상자 크기가 렌더링과 일치하도록 하려면 너비와 높이 값에서 패딩 너비를 빼야 합니다.
상자 자체가 너비와 높이 속성을 지정하지 않으면 패딩은 상자의 크기를 확장하지 않습니다 . 너비가 지정되지 않은 경우 왼쪽 및 오른쪽 패딩은 높이가 지정되지 않은 경우 상자를 확장하지 않습니다. 상단 및 하단 패딩은 상자를 확장하지 않습니다.
상자 사이의 거리를 제어
일반적인 응용 프로그램: 블록 수준 상자의 수평 중심을 달성하려면 두 가지 조건이 충족되어야 합니다. 상자는 지정된 너비를 가져야 하며 상자의 왼쪽 및 오른쪽 여백은 자동으로 설정되어야 합니다.
인라인 요소 및 인라인 블록 요소: 수평 중앙 정렬을 구현하려면 상위 요소에 text-align: center를 추가하면 됩니다.
여백 병합 (1) 중첩된 블록 요소의 수직 여백 축소: 중첩 관계(부모-자식 관계)가 있는 두 블록 요소의 경우 상위 요소에는 상단 여백이 있고 하위 요소에도 상단 여백이 있습니다. 상위 요소는 더 큰 여백 값으로 축소됩니다.
해결 방법: 상위 요소의 외부 테두리를 지정하고 상위 요소의 내부 여백을 지정합니다(일반적으로 사용됨).
많은 웹 페이지 요소에는 기본 내부 및 외부 여백이 있으며 기본값은 브라우저마다 다릅니다. 레이아웃 전에 웹 페이지 요소의 내부 및 외부 여백을 지워야 하기 때문입니다.
* {
여백: 0px; 패딩 패딩 지우기: 0px;호환성을 고려하여 인라인 요소의 경우 왼쪽, 오른쪽 내부 및 외부 여백만 설정하고 위쪽 및 아래쪽 내부 및 외부 여백은 설정하지 않는 것이 좋습니다. 인라인 수준 요소.
상자의 모서리를 둥글게 만드세요.
border-radius 속성은 요소의 내부 및 외부 테두리의 둥근 모서리를 설정하는 데 사용됩니다.
문법:
border-radius: length; 매개변수가 클수록 호가 더 분명해집니다. 이 매개변수는 특정 배열 또는 백분율일 수 있습니다.
그 원리:
둥근 테두리를 작성하는 방법:
(1)圆形的写法: 상자가正方形이고 길이 = 상자의 높이 또는 너비의 절반이면 상자는 원입니다. 절반: 정확한 값 또는 50%일 수 있습니다. ]
(2)圆角矩形的写法：参数设置为高度的一半
(3) 이 속성은 축약된 속성으로 실제로는 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리(시계 방향)입니다.
(4) 한 모서리만 설정하려는 경우 border-top-left-radius, border-bottom-right-radius 등으로 작성할 수 있습니다. 순서는 되돌릴 수 없습니다.
box-shadow 속성은 상자에 그림자를 추가합니다.
문법:
box-shadow: h-shadow v-shadow 블러 확산 색상 삽입 상자 기본 외부 그림자;
흐림: 그림자의 가상과 현실. 매개변수가 클수록 흐려집니다.
텍스트 그림자
문법:
텍스트 그림자: h-그림자, v-그림자, 흐림, 색상
이것으로 CSS 상자 모델, 둥근 테두리 및 상자 그림자에 대한 기사를 마칩니다. 더 많은 관련 CSS 상자 모델 콘텐츠를 보려면 downcodes.com에서 이전 기사를 검색하거나 아래에서 계속해서 관련 기사를 읽어보시기 바랍니다. .downcodes.com을 지원하세요!