집 > 기사 > 웹 프론트엔드 > CSS 웹 페이지 정렬 불량을 처리하는 방법

CSS 웹 페이지 정렬 불량을 처리하는 방법

php中世界最好的语言원래의: 2017-11-25 11:30:262928검색

웹페이지를 만들 때 웹페이지를 아름답고 매끄럽게 만들기 위해서는 몇 가지 사항에 주의해야 합니다. 그러면 CSS 웹페이지가 잘못 정렬되어 있으면 어떻게 해야 할까요? 다음으로 웹 페이지 정렬 불량을 처리하는 방법과 이를 방지하는 방법을 소개하겠습니다.

너비를 계산하는 이유

웹 페이지의 픽셀 너비를 계산하는 것은 CSS 웹 페이지 레이아웃의 깔끔함과 호환성을 위한 것입니다. 웹 페이지를 왼쪽과 오른쪽 구조로 배치하거나 padding 및 margin을 사용할 때 전체 페이지의 너비를 계산하는 경우가 많습니다. 너비를 계산하지 않으면 너비가 너무 크면 정렬 오류가 발생합니다. 크거나 너무 작습니다.

CSS 너비 계산 방법

예 1: 왼쪽 및 오른쪽 구조의 레이아웃 스타일을 계산합니다.

총 너비가 400픽셀인 경우 왼쪽과 오른쪽의 합은 400픽셀 미만이어야 합니다. 그러면 왼쪽이 300픽셀, 오른쪽이 100픽셀이 될 수 있습니다.

올바른 코드:

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

웹 페이지 정렬 불량에 대한 CSS 너비 계산

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

오류:

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

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

DIV CSS 레이아웃 불일치 진단

전체 너비가 20px 정도이므로 왼쪽과 오른쪽 구조가 플러시되지 않고 오른쪽이 떨어집니다. 아래에.

이런 식으로 오정렬 호환성 문제가 발생합니다. 일반적으로 실제로는 계산 부주의로 인해 차이가 작은 경우 일반적으로 1px-2px이므로 오정렬을 제거합니다. 호환성을 고려하면 너비 계산부터 시작할 수 있습니다.

예제 2: 왼쪽 및 오른쪽 구조에 1px 테두리가 있는 예가 있습니다

일반적으로 왼쪽 및 오른쪽 구조에 1px 테두리가 있으며, 왼쪽 및 오른쪽 구조를 설정할 때 일부 테두리가 추가됩니다. 테두리의 너비와 왼쪽 및 오른쪽 구조의 너비를 함께 계산해야 합니다.

올바른 예:

CSS 및 html 코드는 다음과 같습니다.

 <!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>左右结构宽度计算</title> 
<style type="text/css"> 
.yangshi{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="yangshi"> 
<div class="zuo">左边300px</div> 
<div class="you">右边100px</div> 
</div> 
</body> 
</html>

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

DIV+CSS 설정 백분율 너비 계산

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

CSS 너비를 계산할 때 요약에 주의하세요.

왼쪽 또는 오른쪽 구조, 다중 열 레이아웃 또는 단일 DIV 너비의 레이아웃 설정에 관계없이 모두 파악에 주의해야 합니다. 너비 계산, 특히 패딩, 여백, 테두리 및 기타 CSS 속성을 사용할 때 이때 설정한 너비를 계산해야 하며, 동일한 행의 너비의 합이 다음보다 작다는 것을 확실히 파악해야 합니다. 전체 너비와 동일합니다. 전체 너비보다 크면 정렬 불량 호환성 문제가 발생합니다. 따라서 일반적인 정렬 불량이 있는 경우 너비를 계산하는 것부터 시작할 수 있습니다. 물론 정렬 불량의 원인은 여러 가지가 있습니다. 이 역시 정렬 불량 호환성 문제를 해결하는 방법 중 하나입니다.

처리 방법이 너무 많기 때문에 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!