CSS 웹 페이지 레이아웃 소개 튜토리얼 3: 중앙에 고정 너비가 있는 열 1개_기본 튜토리얼
- PHP中文网원래의
- 2016-05-16 12:07:201860검색
CSS 웹 페이지 레이아웃 입문 튜토리얼 3: 고정 너비를 중심으로 한 열 _기본 튜토리얼
페이지 전체를 중앙에 배치하는 것은 전통적인 테이블 레이아웃에서 가장 일반적으로 사용되는 형태입니다. , 이를 달성하려면 테이블의 align="center" 속성을 사용합니다. p 자체도 p를 중앙에 표시할 수 있는 align="center" 속성을 지원합니다. 그러나 CSS 레이아웃은 성능과 콘텐츠의 분리를 달성하기 위한 것이며 align 속성은 XHTML의 p 속성에 작성된 스타일 코드입니다. . 이는 공유 원칙에 위배되므로(분리하면 웹 사이트를 더 쉽게 관리할 수 있음) CSS 메서드를 사용하여 콘텐츠를 중앙에 배치해야 합니다. 고정 너비 1열 레이아웃 코드를 예로 들어 중앙에 정렬된 CSS 스타일을 추가해 보겠습니다.
코드는 다음과 같습니다.
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
margin:0px auto;
}
margin 속성은 위쪽, 오른쪽, 아래쪽, 왼쪽의 외부 여백을 제어하는 데 사용됩니다. margin이 두 개의 매개변수를 사용하는 경우, 첫 번째 매개변수는 위쪽 및 아래쪽 여백을 나타내고, 두 번째 매개변수는 왼쪽 및 오른쪽 여백을 나타냅니다. 숫자값을 직접 사용하는 것 외에, margin은 auto라는 값을 지원하지 않습니다. auto 값을 사용하면 브라우저가 자동으로 여백을 결정할 수 있습니다. 여기서는 현재 p의 왼쪽 및 오른쪽 여백을 auto로 설정하며, 브라우저는 이를 자동으로 설정합니다. p의 왼쪽과 오른쪽 여백은 동일하게 설정되어 중앙에 표시되므로 게임 중반 효과를 얻을 수 있습니다.
참고: 이 센터링 방법은 IE6 이하의 브라우저에서는 지원되지 않습니다. 아래 CSS HACK 섹션에서 해결 방법을 자세히 설명합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
CSS 테두리 설정 항목에서 테두리의 위쪽, 오른쪽, 아래쪽, 왼쪽을 0, 자동, 0, 자동을 각각 지정할 수 있습니다.
위 내용은 CSS 웹페이지 레이아웃 입문 튜토리얼 3: 고정 너비 centered_basic 튜토리얼의 내용입니다. PHP 중국어 홈페이지(www.php .cn)!