CSS 너비는 소수 자릿수(백분율 대 픽셀)를 존중합니까?

CSS 너비의 소수점 자리: 존중할 것인가 아니면 반올림할 것인가?

CSS 디자인을 만들 때 CSS 너비의 소수점 자리가 존중되는지 궁금할 수 있습니다. 또는 둥글게. 브라우저가 소수점 이하 자릿수를 존중하는지 무시하는지 여부는 백분율 또는 픽셀 값을 처리하는지에 따라 다릅니다.

백분율 너비

백분율 너비의 경우 소수 자릿수는 다음과 같습니다. 완전히 존경합니다. 49.5%의 너비는 사용 가능한 공간의 49.5%를 차지합니다. 예:

.percentage {
  width: 49.5%;
}

픽셀 너비

반면, 픽셀 너비의 소수점 자리는 준수되지 않습니다. 항상 가장 가까운 정수로 반올림됩니다. 너비가 122.5px이면 123px이 됩니다. 예:

.pixel {
  width: 122.5px;
}

차이점을 설명하기 위해 다음 예를 고려하십시오.

#outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

<div>

여기서 첫 번째 블록은 사용 가능한 공간의 50%입니다. 두 번째 블록은 사용 가능한 공간의 50.5%입니다. 그러나 픽셀 너비에는 소수점 이하 자릿수가 적용되지 않으므로 51px로 반올림됩니다. 세 번째 블록은 사용 가능한 공간의 51%로 102px가 됩니다.

위 내용은 CSS 너비는 소수 자릿수(백분율 대 픽셀)를 존중합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!