CSS 웹 페이지 레이아웃 정렬 불량: CSS 너비 계산-HTML 튜토리얼-php.cn

CSS 웹 페이지 레이아웃 정렬 불량: CSS 너비 계산

WBOY

풀어 주다： 2016-10-15 10:32:05

원래의

1237명이 탐색했습니다.

너비를 계산하는 이유
웹페이지의 픽셀 너비를 계산하는 것은 CSS웹페이지 레이아웃을 깔끔하고 호환하기 위한 것입니다. 너비를 계산하지 않으면 너비가 너무 크거나 작거나 관계없이 왼쪽 및 오른쪽 구조의 웹 페이지를 레이아웃하거나 패딩 및 여백 레이아웃을 사용할 때 전체 페이지의 너비를 계산하는 것이 일반적입니다. 문제가 발생합니다.

CSS 너비 계산 방법
예제 1: 왼쪽 및 오른쪽 구조의 레이아웃 스타일을 계산합니다.
전체 너비가 400픽셀인 경우 왼쪽과 오른쪽의 합은 400픽셀 미만이어야 하며 왼쪽은 300픽셀, 오른쪽은 100픽셀이 될 수 있습니다.
정확한 코드:

왼쪽 및 오른쪽 구조 너비 계산 www.webjx.com

;

왼쪽 300px

오른쪽 100px

위는 왼쪽과 오른쪽 구조의 정확한 전체 너비로, 정확히 400px입니다

오류:
전체 너비를 변경하지 않고 왼쪽이 300픽셀이고 오른쪽이 120픽셀이면 전체 너비가 20픽셀을 초과하면 DIV+CSS 코드가 어떤 문제가 발생하는지 살펴보겠습니다. 다음은:

왼쪽 및 오른쪽 구조 너비 계산 www.webjx.com

;

왼쪽 300px

오른쪽 100px

위 사진을 보면 전체 너비가 20px 정도 되기 때문에 왼쪽과 오른쪽 구조물이 플러시되지 않고 오른쪽이 아래로 떨어지는 것을 볼 수 있습니다.
이런 식으로 오정렬 호환성 문제가 발생합니다. 일반적으로 실제로 계산 부주의로 인해 차이가 작은 경우 일반적으로 차이가 1px-2px이므로 오정렬을 제거합니다. 호환성을 고려하면 너비 계산부터 시작할 수 있습니다.

예시 2: 왼쪽과 오른쪽 구조에 1px 테두리가 있습니다
일반적으로 왼쪽과 오른쪽 구조에 1px 테두리가 있는데, 왼쪽과 오른쪽 구조를 설정하면 테두리가 일부 추가됩니다. 우리는 테두리 너비와 왼쪽 및 오른쪽 구조의 너비를 함께 계산해야 합니다.
올바른 예:
CSS와 html 코드는 다음과 같습니다.

왼쪽 및 오른쪽 구조 너비 계산 www.webjx.com

왼쪽 300px

오른쪽 100px

왼쪽과 오른쪽 구조 모두 너비가 1픽셀이므로 왼쪽과 오른쪽 테두리 너비에서 각각 2픽셀을 빼야 합니다. 따라서 왼쪽은 너비가 298px이고 오른쪽은 너비가 2픽셀이 됩니다. 98픽셀

테두리를 빼지 않으면 다음과 같은 효과가 발생합니다.

DIV+CSS백분율 너비 계산 설정
때때로 너비를 계산하기 위해 백분율을 사용해야 할 때도 있습니다. 일반적으로 전체 백분율 너비이기도 하며 100%를 초과할 수 없습니다.

CSS 너비 계산 시 요약에 주의하세요:
좌우 구조든, 다중 열 레이아웃이든, 단일 DIV 너비 레이아웃 설정이든, 너비 파악과 계산에 주의해야 합니다. 특히 패딩, 여백, 테두리 등을 사용할 때 CSS 속성 이때 우리 모두는 자신이 설정한 점유 너비를 계산하고 너비의 합이 무엇인지 확실히 파악해야 합니다. 같은 행의 너비가 총 너비보다 작거나 같을 때, 총 너비보다 크면 위치가 잘못된 호환성 문제가 나타납니다. 따라서 일반적인 오정렬이 있는 경우 너비를 계산하는 것부터 시작할 수 있습니다. 물론 오정렬의 원인은 다양합니다. 이 역시 오정렬 호환성 문제를 해결하는 방법 중 하나입니다.