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

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

高洛峰

풀어 주다： 2016-10-13 14:13:40

원래의

1483명이 탐색했습니다.

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

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

로그인 후 복사

위는 올바른 왼쪽 및 오른쪽 전체 구조입니다. 너비는 정확히 400px입니다

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

로그인 후 복사

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

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

로그인 후 복사

왼쪽 및 오른쪽 구조의 너비가 1px이므로 왼쪽 및 오른쪽 테두리 너비인 2를 빼야 합니다. 각각 픽셀이므로 왼쪽은 298px, 오른쪽 너비는 98px이 됩니다.

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

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

CSS 너비를 계산할 때 요약에 주의하세요.
좌우 구조든, 다중 열 레이아웃이든, 단일 DIV 너비 레이아웃 설정이든, 특히 패딩, 여백, 테두리와 같은 CSS 속성을 사용할 때 너비를 파악하고 계산해야 합니다. 이번에는 그들이 설정한 너비를 계산해야 합니다. 동일한 행의 너비의 합이 전체 너비보다 작거나 같다면 잘못 정렬된 호환성 문제가 발생합니다. 따라서 일반적인 오정렬이 있는 경우 너비를 계산하는 것부터 시작할 수 있습니다. 물론 오정렬의 원인은 다양합니다. 이 역시 오정렬 호환성 문제를 해결하는 방법 중 하나입니다.