CSS의 일반적인 레이아웃은 무엇입니까?

CSS의 일반적인 레이아웃은 다음과 같습니다. 1. 가로 가운데 맞춤, 인라인 요소는 가로 가운데 맞춤, 블록 수준 요소는 가로 가운데 맞춤, 다중 블록 수준 요소는 가로 가운데 맞춤 2. 세로 가운데 맞춤, 한 줄 인라인 요소는 세로 맞춤 3. 플렉스 레이아웃을 사용합니다. 5. 2열 레이아웃.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 수평 센터링:

인라인 요소의 수평 센터링

text-align: center를 사용하여 블록 수준 요소 내 인라인 요소의 수평 센터링을 달성합니다. 이 방법은 인라인 요소(inline), 인라인 블록(inline-block), 인라인 테이블(inline-table), inline-flex 요소의 수평 중앙 정렬에 효과적입니다.

핵심 코드:

.center-text {
  text-align: center;
}

블록 수준 요소는 가로 중심에 배치됩니다.

고정 너비 블록 수준 요소의 왼쪽 여백 및 오른쪽 여백을 자동으로 설정하면 블록 수준 요소를 가로 중심에 배치할 수 있습니다.

핵심 코드:

.center-block {
  margin: 0 auto;
}

여러 블록 수준 요소가 가로 중앙에 배치됨

인라인 블록 사용

행에 두 개 이상의 블록 수준 요소가 있는 경우 블록 수준 요소의 표시 유형을 인라인으로 설정 -block 및 상위 컨테이너의 text-align 속성을 사용하면 다중 블록 수준 요소를 수평으로 중앙에 배치할 수 있습니다.

핵심 코드:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

2. 수직 센터링

단일 라인 인라인(inline-) 요소는 수직 중앙에 배치됩니다.

인라인 요소의 높이(height)와 라인 높이(line-height)를 설정하여 요소가 수직으로 중앙에 위치하도록 동일해야 합니다.

핵심 코드:

#v-box {
    height: 120px;
    line-height: 120px;
}

여러 줄 요소가 수직으로 가운데 정렬됩니다.

테이블 레이아웃(테이블) 사용

테이블 레이아웃의 수직 정렬: 중간을 사용하여 하위 요소의 수직 중앙에 배치됩니다.

핵심 코드:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

3. 플렉스 레이아웃 사용(flex)

플렉스 레이아웃을 사용하여 수직 중심을 달성합니다. 여기서 flex-direction: 열은 주축 방향을 수직으로 정의합니다. Flex 레이아웃은 CSS3에 정의되어 있으므로 이전 브라우저에서는 호환성 문제가 있습니다.

핵심 코드:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

4. 단일 열 레이아웃

두 가지 주요 유형이 있습니다:

- 머리글, 내용, 바닥글의 너비는 동일하며 최대 너비

- 머리글과 바닥글이 있습니다. 브라우저 너비의 100%를 차지하며 콘텐츠는 최대 너비를 갖습니다

첫 번째 유형

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

두 번째 유형:

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

5 2열 레이아웃

float + margin

float를 사용하여 사이드바를 당깁니다. 및 주요 내용을 한 줄로 묶은 다음 주요 내용의 여백을 설정합니다.

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

추천 학습: css 비디오 튜토리얼

위 내용은 CSS의 일반적인 레이아웃은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!