CSS 레이아웃 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

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

青灯夜游

풀어 주다： 2023-01-05 16:13:13

원래의

11005명이 탐색했습니다.

CSS 레이아웃 방법은 다음과 같습니다. 1. 정적 레이아웃(플로트 레이아웃 및 절대 레이아웃) 2. 적응형 레이아웃 3. 유동 레이아웃(왼쪽 고정 + 오른쪽 적응형, 왼쪽 및 오른쪽 고정 너비 + 중간 적응형, 성배 레이아웃) 날개 레이아웃) 4. 반응형 레이아웃 5. 유연한 레이아웃.

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

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

우리는 CSS에서 다음 범주로 요약할 수 있는 현재의 주요 범주로 발전했습니다. 여러분이 알고 있는 구현 방법은 다음과 같은 방식으로 구체적인 구현일 수 있습니다.

정적 레이아웃
적응형 레이아웃
유동 레이아웃(백분율 레이아웃이라고도 함)
반응형 레이아웃: 미디어 쿼리
유연한 레이아웃(rem/em flex 레이아웃)

1. 기존 레이아웃 방법에서는 웹 페이지의 모든 크기가 px 단위이고 최소 너비가 설정됩니다. 너비가 이 너비보다 작으면 스크롤 막대가 나타납니다. 중앙에 배치되고 배경이 추가됩니다.

구현 방법:

PC:

중앙 레이아웃, 모든 스타일에 절대 너비/높이(px) 사용, 레이아웃 디자인, 화면 너비와 높이 조정 시 가로 및 세로 스크롤 막대를 사용하여 가려진 부분을 볼 수 있습니다. ;

모바일 장치:

또한 모바일 웹사이트를 만들고, 별도의 레이아웃을 디자인하고, wap이나 m과 같은 다른 도메인 이름을 사용하세요.

장점: 기존 CSS2 레이아웃 방식을 사용하여 레이아웃이 단순하고 호환성 문제가 없습니다.

단점: 휴대폰에서는 합리적으로 표시할 수 없습니다. PC 페이지는 휴대폰에서 사용할 수 없습니다. 표시하려면 다른 레이아웃을 작성해야 합니다.

실습 사례:

플로트 레이아웃

2 적응형 레이아웃

은 서로 다른 화면 아래에 여러 개의 정적 레이아웃으로 구성된 것으로 볼 수 있습니다.

적응형 레이아웃은 다양한 화면 해상도에 따라 다양한 레이아웃을 정의합니다. 화면 해상도를 변경하면 다양한 정적 레이아웃 간에 전환할 수 있지만(페이지 요소의 위치는 변경될 수 있음) 각 정적 레이아웃에서는 창 크기가 조정될 때 페이지 요소가 변경되지 않습니다. 적응형 레이아웃

페이지의 요소 위치가 변경되어 흐름 레이아웃에서 큰 화면 공간의 활용도가 낮다는 단점을 효과적으로 해결합니다. 화면 해상도가 변경되면 페이지의 요소 위치는 변경되지만 크기는 변경되지 않습니다.

실용 사례: Baidu 검색 홈페이지

(학습 동영상 공유:

css 동영상 튜토리얼

)

3. 유동 레이아웃

백분율을 사용하여 웹 페이지의 주요 분할 영역

크기

(최소) -*, max-* 속성이 사용됨) 화면 크기가 변경되면 다른 레이아웃이 나타납니다. 즉, 이 화면에서는 요소 블록이 이 위치에 있지만 해당 화면에 있습니다. , 요소 블록이 해당 위치에 다시 나타납니다. 레이아웃만 변경되고 요소는 변경되지 않습니다. 서로 다른 화면 아래에 여러 개의 정적 레이아웃으로 구성된 것으로 볼 수 있습니다. 유동적 레이아웃의 특징은 화면이 변경되더라도 페이지의 레이아웃이 크게 변경되지 않으며 적응형 레이아웃을 보완할 뿐입니다.

% 백분율을 사용하여 너비를 정의하며 높이는 대부분 px로 고정됩니다

시각적 영역(뷰포트) 및 상위 요소의 실시간 크기에 따라 조정되어 다양한 해상도에 최대한 적응할 수 있습니다. . max-width/min-width와 같은 속성은 크기 흐름 범위를 제어하여 너무 크거나 작아서 읽기에 영향을 미치는 것을 방지하는 데 자주 사용됩니다. 이 레이아웃 방법은 웹 프론트엔드 개발 초기에 다양한 크기의 PC 화면에 대응하기 위해 사용되었습니다(당시에는 화면 크기의 차이가 그리 크지 않았습니다). 현재에도 일반적으로 사용되는 레이아웃 방법입니다. 모바일 개발, 하지만 명백한 단점: 가장 큰 문제는 화면 크기 범위가 너무 크면 원래 디자인에 비해 너무 작거나 너무 큰 화면에서는 제대로 표시되지 않는다는 것입니다. 너비는 %를 사용하여 정의되지만 높이와 텍스트 크기는 대부분 px로 고정되어 있기 때문에 대형 화면 휴대폰의 표시 효과는 일부 페이지 요소의 너비가 매우 길게 늘어나지만 높이와 텍스트 크기는 여전히 원본과 동일합니다(즉, 이러한 항목은 "흐르게" 될 수 없습니다. 화면 해상도가 변경되면 페이지의 요소 크기는 변경되지만 레이아웃은 변경되지 않습니다.

메인 연습 사례:

왼쪽 고정 + 오른쪽 적응형

왼쪽 및 오른쪽 고정 너비 + 중간 적응형
성배 레이아웃
이중 비행 날개 레이아웃

4. 반응형 레이아웃

반응형 디자인을 통해 웹사이트는 휴대폰과 태블릿에서 더 나은 탐색 및 읽기 환경을 제공할 수 있습니다. 화면 크기가 다르면 사용자에게 표시되는 웹페이지 콘텐츠도 달라집니다. 미디어 쿼리를 사용하면 화면 크기(주로 너비 감지)를 감지하고 다양한 CSS 스타일을 설정하여 반응형 레이아웃을 얻을 수 있습니다. 주로 CSS 미디어 쿼리에 의존합니다.