CSS 레이아웃
레이아웃은 CSS의 중요한 부분입니다. 이 문서에서는 일반적으로 사용되는 수평 센터링 및 수직 센터링 방법은 물론 단일 열 레이아웃 및 다중 열 레이아웃을 포함하여 CSS 레이아웃의 일반적인 기술을 요약합니다. 열 레이아웃. 다양한 구현 방법(전통적인 상자 모델 레이아웃 및 상대적으로 새로운 플렉스 레이아웃 구현 포함)이 도움이 필요한 친구에게 도움이 되기를 바랍니다.
목차
1. 일반적으로 사용되는 센터링 방법: 가로 센터링, 세로 센터링,
2. 단일 열 레이아웃
3. 플로트+마진, 위치+마진, 홀리. Grail 레이아웃(float+음수 마진), Double Flying Wing 레이아웃(Float + 음수 마진), Flex 레이아웃
html5css3 및 기타 웹 프론트엔드 기술을 배우고 소통하고 싶고, 프론트엔드 측면에 대해 더 알고 싶다면 , QQ 학습 그룹: 27062964에 가입하여 함께 배우고 소통하며 공유할 수 있는 학습 자료와 소스 코드가 있습니다. 또는 링크를 클릭하여 QQ 그룹에 직접 가입하세요.
요약
1. 일반적으로 사용되는 센터링 방법
센터링은 레이아웃에서 매우 일반적입니다. DOM 문서 구조는 다음과 같고 하위 요소는 다음과 같습니다.
가로 가운데
하위 요소가 인라인 요소인지 블록 요소인지, 너비가 확실하거나 결정되지 않았는지, 채택된 레이아웃 계획이 다릅니다. 아래에서 분석해 보겠습니다.
인라인 요소: 상위 요소에 text-align:center 설정
고정 너비 블록 요소: 왼쪽 및 오른쪽 여백 값을 자동으로 설정
가변 너비 블록 요소: 설정 표시할 하위 요소:인라인, 그런 다음 text-align:center;
상위 요소에 대한 일반 솔루션: flex 레이아웃, 디스플레이 설정:flex;justify-content:center;
상위 요소를 기준으로 수직 중심
Vertical 하위 요소의 중앙 정렬은 한 줄의 인라인 텍스트이고 여러 줄의 인라인 텍스트이며 블록 요소는 다른 솔루션을 사용합니다.
상위 요소는 확실하고 하위 요소는 인라인 텍스트의 한 줄입니다. 상위 요소의 높이를 줄 높이 line-height와 동일하게 설정합니다.
상위 요소가 확실하고 하위 요소가 다중 요소입니다. 라인 인라인 텍스트: 디스플레이 설정: table-cell 또는 상위 요소의 인라인 -block, 수직 정렬:middle;
Block 요소 설정: 하위 요소 위치 설정: 고정(절대), 여백:자동 설정 ;
일반 솔루션: flex 레이아웃, {display:flex;를 상위 요소로 설정; align-items:center;}
2. 단일 열 레이아웃
특징: 고정 너비, 가로 가운데 맞춤
두 가지 일반적인 단일 열 레이아웃이 있습니다.
첫 번째는 머리글, 내용 및 바닥글 너비가 모두 동일하다는 것입니다. , 일반적으로 전체 공간을 차지하지 않습니다. 브라우저의 가장 넓은 너비이지만 브라우저가 최대 너비 아래로 줄어들면 너비가 조정됩니다.
하나는 머리글과 바닥글의 너비가 브라우저의 너비와 같지만 내용과 머리글과 바닥글의 내용이 브라우저의 너비를 채우지 않는다는 것입니다.
첫 번째 유형의 경우 머리글, 내용 및 바닥글에 대해 너비 또는 최대 너비를 균일하게 설정하고 margin:auto를 사용하여 가운데 정렬을 수행합니다.
DOM 문서:
CSS 목록:
두 번째 유형의 경우 머리글과 바닥글의 내용 너비는 100%이지만 머리글과 바닥글의 내용 영역과 내용이 설정됩니다. 최대 너비로 설정하고 margin:auto를 통해 센터링을 달성합니다.
DOM 문서:
CSS 목록:
3.2열 및 3열 레이아웃
II 열 레이아웃에는 사이드바 고정 너비, 기본 기능이 있습니다. 열 적응 너비. 3열 레이아웃은 양쪽에 2개의 고정 너비 열이 있고 가운데 열에 적응형 너비가 있는 것이 특징입니다.
2열 레이아웃과 3열 레이아웃을 함께 쓰는 이유는 2열 레이아웃은 사이드바 하나를 제거한 3열 레이아웃으로 볼 수 있고, 레이아웃 아이디어도 비슷하기 때문입니다. 전통적인 구현 방법의 경우 위 그림의 처음 세 가지 레이아웃, 즉 측면 열이 있는 클래식 2열 레이아웃과 왼쪽 및 오른쪽 측면 열이 있는 3열 레이아웃에 대해 주로 설명합니다. 위 사진이 구현되었습니다.
a.float+margin
원리 설명: 두 개의 사이드바를 각각 왼쪽과 오른쪽으로 설정합니다. 중간 열은 여백을 통해 두 개의 사이드바를 위한 공간을 만듭니다.
DOM 문서:
레이아웃 단계:
사이드바의 양쪽 너비를 설정하고, 왼쪽 열에 왼쪽 부동을 추가하고, 오른쪽 열에 부동을 추가합니다.
메인 패널의 왼쪽 및 오른쪽 여백을 설정합니다. margin-left 값은 왼쪽 열의 너비이고, margin-right 값은 오른쪽 열의 너비입니다.
CSS 목록:
몇 가지 지침:
* DOM 문서의 작성 순서에 주의하세요. 측면 열을 먼저 작성한 다음 교체 후 측면 열을 압축합니다. 다음 열(성배 레이아웃과 이중 비행 날개 레이아웃이 사용됩니다). * 이 레이아웃 방법은 비교적 간단하고 명확하지만, 중요한 메인 패널 대신 사이드바가 먼저 렌더링된다는 단점이 있습니다.
2열 구현 방법
왼쪽에 사이드바가 있는 2열 레이아웃이라면 오른쪽 열을 제거하고 메인 패널의 margin-right 값을 설정하지 마세요. 다른 작업은 동일합니다. 그 반대.
b.위치+여백
원리 설명: 절대 위치 지정을 통해 두 개의 측면 열을 고정하고, 또한 여백을 통해 두 개의 측면 열을 위한 공간을 만들고, 가운데 열은 적응형입니다.
DOM 문서:
레이아웃 단계:
양쪽 사이드바의 너비를 설정하고 위치 지정 방법을 절대 위치 지정으로 설정합니다.
열 양쪽 상단 값을 0으로 설정하고, 왼쪽 열의 왼쪽 값을 0, 오른쪽 열의 오른쪽 값을 0으로 설정합니다.
메인 패널의 왼쪽 및 오른쪽 여백을 설정합니다. margin-left 값은 왼쪽 열의 너비이고, margin-right 값은 오른쪽 열의 너비입니다.
CSS 목록:
참고 사항:
이전 방법과 비교하여 이 방법은 위치 지정을 통해 사이드바의 고정 위치를 달성합니다.
중간 열에 최소 너비 제한이 있거나 너비가 있는 내부 요소가 있고 브라우저 창이 충분히 작은 경우 기본 패널과 측면 열이 겹칩니다.
2열 구현 방법
왼쪽에 사이드바가 있는 2열 레이아웃이라면 오른쪽 열을 제거하고 메인 패널의 margin-right 값을 설정하지 마세요. 다른 작업은 동일합니다. 그 반대.
c. 성배 레이아웃(부동 + 음수 여백 + 패딩 + 위치)
원리 설명:
메인 패널의 너비를 100%로 설정하고, 메인 패널과 양쪽 사이드바를 모두 부동으로 설정합니다. 왼쪽은 떠 있습니다. 이때 사이드바는 모두 메인 패널에 의해 압착됩니다. 음수 여백을 통해 플로팅 사이드바를 당깁니다. 왼쪽 열의 음수 여백은 100%이며 이는 정확히 창 너비입니다. 따라서 기본 패널 아래 왼쪽에서 기본 패널과 정렬된 왼쪽으로 실행됩니다. 패널 오른쪽 열이 여기에 있습니다. 기본 패널 아래 왼쪽에 떠 있을 때 음수 여백을 음수로 설정하면 자체 너비가 기본 패널 정렬 오른쪽에 떠 있습니다. 사이드바가 메인 패널의 콘텐츠를 가리는 것을 방지하기 위해 외부 레이어의 왼쪽 및 오른쪽 패딩 값을 왼쪽 및 오른쪽 사이드바의 너비로 설정하여 사이드바를 위한 공간을 확보합니다. 메인 패널의 크기가 줄어듭니다. 사이드바의 음수 여백은 기본 패널을 기준으로 하기 때문에 두 개의 사이드바는 우리가 원하는 대로 왼쪽과 오른쪽에 도킹되지 않지만 축소된 기본 패널과 함께 중앙에 더 가깝게 이동합니다. 이때 상대 레이아웃을 사용하고 두 개의 사이드바를 해당 위치에 맞게 조정합니다.
DOM 문서:
레이아웃 단계:
세 가지 모두 왼쪽으로 부동하도록 설정되어 있습니다.
기본 너비를 100%로 설정하고 두 개의 측면 열 너비를 설정합니다.
음수 여백을 설정하고, sub는 음수 왼쪽 여백을 100%로 설정하고, extra는 음수 왼쪽 여백을 음수 자체 너비로 설정합니다.
왼쪽 및 오른쪽 하위 패널을 위한 공간을 남겨두기 위해 기본 패딩 값을 설정합니다.
두 개의 하위 패널을 상대 위치로 설정합니다. sub의 왼쪽 값은 음의 하위 너비이고 extra의 오른쪽 값은 음의 추가 너비입니다.
CSS 체크리스트:
일부 참고사항
DOM 요소의 쓰기 순서를 변경하면 안 됩니다.
패널의 주요 콘텐츠 부분이 양쪽 하위 패널의 너비보다 작을 경우 레이아웃이 엉망이 됩니다. main의 min-width 속성을 설정하거나 이중 날개 레이아웃을 사용하면 문제를 피할 수 있습니다.
2열 구현 방법
왼쪽에 사이드바가 있는 2열 레이아웃이라면 오른쪽 열을 제거하고 메인 패널의 padding-right 값을 설정하지 마세요. 다른 작업은 동일합니다. 그 반대.
d. 이중 비행 날개 레이아웃(부동 + 음수 마진 + 여백)
원리 설명:
이중 비행 날개 레이아웃과 성배 레이아웃의 아이디어는 둘 다 부동 및 음수 마진을 사용하지만 이중 비행 날개 레이아웃입니다. 성배 레이아웃을 기반으로 합니다. 메인 요소에 div 레이어를 추가하고 여백을 설정하여 개선이 이루어졌습니다. 두 측면 열의 음수 여백은 메인 랩을 기준으로 하기 때문에 메인 여백 값의 변경은 영향을 미치지 않습니다. 따라서 두 개의 측면 열의 상대적인 레이아웃을 설정하는 단계가 제거됩니다.
DOM 문서:
레이아웃 단계:
세 가지 모두 왼쪽으로 부동하도록 설정되어 있습니다.
메인 랩 너비를 100%로 설정하고 두 사이드바의 너비를 설정합니다.
음수 여백을 설정하고, sub는 음수 왼쪽 여백을 100%로 설정하고, extra는 음수 왼쪽 여백을 음수 자체 너비로 설정합니다.
왼쪽 및 오른쪽 하위 패널을 위한 공간을 남겨두기 위해 기본 여백 값을 설정합니다.
CSS 목록:
설명
성배는 패딩을 사용하는 반면 이중 비행 날개는 여백을 사용하여 성배 레이아웃의 기본 너비가 다음보다 작을 수 없다는 단점을 해결합니다. 왼쪽 열.
이중 비행 날개 레이아웃은 상대 레이아웃과 해당 왼쪽 및 오른쪽 값을 설정할 필요가 없습니다.
상대 레이아웃을 도입하면 3열 레이아웃의 다양한 조합을 실현할 수 있습니다. 예를 들어 오른쪽 열에 위치: 상대, 190px를 설정하면 하위+추가+메인 레이아웃을 구현할 수 있습니다.
2열 구현 방법
왼쪽에 사이드바가 있는 2열 레이아웃인 경우 오른쪽 열을 제거하고 main-wrap의 margin-right 값을 설정하지 마세요. 다른 작업은 동일합니다. 그 반대.
다음은 5개 레이아웃에 대한 Flex 레이아웃 코드입니다.
DOM 문서:
CSS list
앞서 언급한 여러 기존 레이아웃 구성표와 비교하면 Flex 레이아웃 코드는 매우 간단하고 매우 다재다능하며 간단한 세 줄의 CSS를 사용하여 다섯 가지 공통 레이아웃을 구현합니다.
요약
기존 레이아웃 방법은 상자 모델을 기반으로 하며 일부 특수 효과를 달성하기 위한 논리가 특히 복잡하고 번거롭습니다. 예를 들어 수직 센터링. Flex 레이아웃의 Flex 컨테이너는 실제 사용 가능한 공간에 따라 하위 요소의 종횡비와 순서를 동적으로 조정할 수 있으므로 요소는 사용 가능한 공간을 최대한 활용하는 동시에 공간을 초과하지 않도록 축소할 수 있습니다. Flex 레이아웃은 간단하고 완벽하며 반응성이 뛰어난 레이아웃 솔루션을 제공합니다.