CSS 레이아웃 방법은 무엇입니까? CSS 레이아웃 방법 요약-CSS 튜토리얼-php.cn

CSS 레이아웃 방법은 무엇입니까? CSS 레이아웃 방법 요약

不言

풀어 주다： 2018-08-02 16:22:22

원래의

2656명이 탐색했습니다.

CSS 페이지 레이아웃은 웹 페이지에서 매우 유용합니다. CSS 페이지 레이아웃은 일반 레이아웃 흐름, 주변 요소, 상위 컨테이너 또는 기본 뷰포트/창을 기준으로 웹 페이지의 위치를 제어할 수 있습니다. ? CSS 페이지 레이아웃 방법을 자세히 살펴보겠습니다.

css는 왼쪽 및 오른쪽 레이아웃을 구현합니다.

왼쪽 및 오른쪽 레이아웃을 구현하는 방법은 약 6가지가 있습니다. css: #🎜🎜 #

1. 테이블의 li 구현

table 태그는 왼쪽 및 오른쪽 레이아웃을 구현하는 속성을 가질 수 있습니다. tr은 행을 나타냅니다. 열을 나타냅니다. tr은 상자의 왼쪽 및 오른쪽 레이아웃을 구현합니다.

2 . inline-block 속성은 행 수준 요소(display:inline)와 블록 수준 요소(display: block) 사이에 있으며 행 수준 요소처럼 가로로 배치되거나 블록 수준처럼 너비 및 높이 속성을 설정할 수 있습니다. 요소를 왼쪽과 오른쪽으로 배치할 수 있습니다.

3. Float는 왼쪽 및 오른쪽 레이아웃을 구현합니다.

float는 블록 영역을 상위 태그의 문서 흐름과 분리합니다. 속성 값은 이 영역이 상위 레이블 영역의 왼쪽 가장자리에 배치됩니다. 오른쪽 속성 값을 사용하면 영역 블록이 상위 레이블의 오른쪽 가장자리에 배치됩니다. 올바른 레이아웃. float 레이아웃은 후속 노드의 레이아웃을 위해 엇갈린 레이아웃을 채택하고, inline-block은 일반 레이아웃을 채택합니다.

4. flexbox 속성은 왼쪽 및 오른쪽 레이아웃을 구현합니다.

flexbox 유연한 상자 레이아웃, display:box; 프론트엔드 개발.

5. float+margin은 왼쪽 및 오른쪽 레이아웃을 구현합니다.

float는 요소 레이아웃을 왼쪽이나 오른쪽으로 만들 수 있습니다. 동일한 레벨 요소 플로팅 블록과 평행한 일반 흐름 영역을 설정하면 플로팅 블록은 일반 흐름 형제 영역의 경계에 있게 되지만 플로팅 블록은 영역 블록의 레이아웃에 영향을 미치므로 플로팅의 영향 블록을 지워야 하므로 이때는 정상입니다. 흐름 영역 블록 외부의 상자 여백을 플로팅 블록의 너비와 동일하게 설정하면 효과를 지울 수 있습니다.

6. 위치:절대 왼쪽 및 오른쪽 레이아웃

절대 위치 지정은 문서 흐름을 벗어나는 레이아웃 현상을 발생시킵니다. Absolute는 모든 위치의 요소를 덮을 수 있으며 일반 흐름의 레이아웃에 영향을 주지 않지만 그림자가 발생합니다.

css 왼쪽 가운데 오른쪽 레이아웃

3열 적응형 레이아웃: 양쪽 고정 너비, 블록 너비 중간에 적응형.

1. 절대 위치 지정 방법

절대 위치 지정은 문서 흐름에서 벗어나므로 왼쪽과 오른쪽에 절대 위치 지정을 사용합니다. 후속 중심은 자연스럽게 위쪽으로 흐른 다음 여백 속성을 사용하여 왼쪽 및 오른쪽 요소의 너비를 그대로 두어 가운데 요소를 화면 너비에 맞게 조정할 수 있습니다.

2. 자체 부동 방식을 사용합니다.

왼쪽과 오른쪽에 각각 float:left 및 float:right를 사용합니다. 및 오른쪽 요소. 중간 요소는 일반적으로 일반 문서 흐름에 있으며 여백을 사용하여 위치를 지정할 왼쪽 및 오른쪽 여백을 지정합니다. 동시에 상위 상자는 Overflow: auto; 하위 상자가 넘치지 않도록 설정합니다.

3. 성배 레이아웃의 원리는 네거티브 마진 방식입니다. 성배 레이아웃을 사용하려면 먼저 중앙 요소 외부에 p를 포함해야 합니다. p를 포함하려면 BFC를 구성하는 float 속성을 설정하고 너비를 설정해야 하며, 이 너비는 여백의 음수 값과 일치해야 합니다. 왼쪽 블록.

css 중심 레이아웃

가로 중심# 🎜🎜#인라인 요소(인라인): text-align: center;블록 수준 요소(블록): 너비를 설정하고 margin-left 및 margin-right를 자동으로 설정하고 max를 사용하세요. - 너비가 너비를 대체합니다.

여러 블록 수준 요소의 경우: 상위 요소에 대해 text-align: center;를 설정하고 하위 요소에 대해 inline-block; (vertical-alinga:top)을 설정하거나 flex 레이아웃을 사용합니다. 🎜 🎜#flex 레이아웃: 디스플레이:flex; justify-content:center

수직 중심

인라인 요소용 )

한 줄 : 위쪽과 아래쪽 패딩을 동일하게 설정 (또는 줄 높이와 높이를 동일하게 설정)

여러 줄 : 위쪽과 아래쪽 패딩을 설정 같거나 설정: table-cell; 및 수직 -align: 중간;; 또는 의사 요소 사용

블록 수준 요소의 경우: (첫 번째 아래 두 가지 옵션, 상위 요소는 상대 레이아웃을 사용해야 함) # 🎜🎜#Known height: 하위 요소는 절대 레이아웃 top: 50%;를 사용한 다음 음수 margin-top을 사용하여 하위 요소를 위로 끌어옵니다. 높이의 절반

알 수 없는 높이: 하위 요소는 절대 레이아웃 위치를 사용합니다: 절대; 상단: 50%; 변환: 번역Y(-50%);

Flexbox 사용: 선택 방향, justify-content: center;

CSS는 가로 및 세로 중심 레이아웃을 구현합니다.

고정 높이 및 고정 너비: 먼저 절대 레이아웃을 사용합니다. 위쪽: 50%; 왼쪽: 50%; 그런 다음 너비와 높이의 절반에 해당하는 음수 여백을 사용하여 하위 요소를 분리합니다. Pullback

높이와 너비를 알 수 없음: 먼저 절대 레이아웃 위쪽을 사용합니다. : 50%; 왼쪽: 50%; 그런 다음 변환을 설정합니다: 변환(-50%, -50%);

# 🎜🎜#Flexbox 사용: justify-content: center;

box-sizing

요소를 box-sizing: border-box;로 설정하면 이 요소의 패딩과 테두리 더 이상 너비가 늘어나지 않습니다.

퍼센트 너비

Percent는 포함 블록을 기준으로 한 측정 단위입니다. 이는 이미지 및 상자 모듈에 유용합니다. 예를 들어 창이 축소되더라도 이미지 너비는 항상 컨테이너 너비의 50%입니다.

css는 인라인 블록 레이아웃을 구현합니다.

inline-block 요소는 수직 중앙 정렬에 영향을 미치며, 수직 정렬을 추가합니다: 상단.