CSS 너비의 소수점 자리가 존중됩니까?

CSS 너비의 소수점 자리가 존중됩니까?

CSS 디자인을 하면서 한동안 궁금했던 것.

CSS 너비의 소수점 자리가 존중됩니까?아니면 둥근 모양입니까?

.percentage {
  width: 49.5%;
}

아니면

.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 id="outer">
    <div id="first">&nbsp;</div>
    <div id="second">&nbsp;</div>
    <div id="third">&nbsp;</div>
</div>

Martin이 지적한 것처럼, 분수 픽셀에 도달하면 문제가 해결되지만, 백분율 값이 정수 픽셀 값을 산출하면(예: 200px의 50.5%) 현명하고 예상되는 동작을 얻을 수 있습니다.

편집: 나는 예시를 업데이트하여 분수 픽셀에 어떤 일이 일어나는지 보여줍니다. (Chrome에서는 값이 잘려서 50, 50.5, 50.6이 모두 같은 폭을 보여줍니다.)

#percentage {
    width: 200px;
    color: white;
}

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

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

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

#pixels {
    color: white;
}

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

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

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}

<div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>

페이지를 칠할 때 숫자가 반올림된 경우에도 전체 값이 메모리에 보존되어 이후 하위 계산에 사용됩니다.예를 들어 100.4999px의 상자가 100px로 칠해진 경우 너비가 50%인 하위 항목은 .5*100이 아닌 .5*100.4999로 계산됩니다.더 깊은 단계로 이어집니다.

부모 폭을 항목으로 하고 자녀를 백분율로 하는 심층 중첩 그리드 배치 시스템을 만들었고, 최대 소수점을 상류에 4개까지 포함하는 것이 눈에 띄게 영향을 미쳤습니다.

엣지 케이스는 물론입니다만, 명심해야 할 것이 있습니다

(@SkillDrick이 잘 보여주는 것처럼) 분수 픽셀이 개별 요소에서 반올림하는 것처럼 보일 수 있지만, 실제 상자 모델에서 분수 픽셀이 실제로 존중된다는 것을 알아야 합니다.

이는 요소가 서로 옆에(또는 위에) 쌓여 있을 때 가장 잘 알 수 있습니다. 즉, 400.5 픽셀 디브를 나란히 배치하면 단일 200 픽셀 디브와 같은 폭을 가질 수 있습니다.만약 그들이 실제로 모두 1px로 반올림했다면(개별 요소를 보면 알 수 있듯이), 우리는 200px div의 길이가 절반일 것으로 예상합니다.

이는 실행 가능한 코드 조각에서 확인할 수 있습니다.

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

너비는 정수 픽셀 수로 반올림됩니다.

모든 브라우저가 같은 방식으로 라운드할지는 모르겠지만요.하위 픽셀 백분율을 반올림할 때 모두 다른 전략을 사용하는 것으로 보입니다.서로 다른 브라우저의 서브픽셀 라운딩에 대한 자세한 내용에 관심이 있다면, ElastiCSS에 대한 훌륭한 기사가 있습니다.

edit: 호기심을 위해 일부 브라우저에서 @Skilldrick의 데모를 테스트했습니다.일부 픽셀 값을 사용할 경우(%가 아닌) IE9p7과 FF4b7은 가장 가까운 픽셀로 둥근 것처럼 보이고, 오페라 11b, 크롬 9.0.587.0 및 사파리 5.0.3은 소수점 자리를 잘라냅니다.그들에게 공통점이 있기를 바랐던 건 아니구요.

값을 가장 가까운 정수로 반올림하는 것처럼 보이지만 크롬, 사파리, 파이어폭스에서 불일치가 보입니다.

예를 들어 33.3%가 420.945px로 변환하는 경우

크롬과 firexfox는 421px로 보여주고 사파리는 420px로 보여줍니다.

이것은 크롬과 파이어폭스가 바닥과 천장 논리를 따르는 반면 사파리는 그렇지 않은 것 같습니다.이 페이지에서는 동일한 문제에 대해 논의하는 것 같습니다.

http://ejohn.org/blog/sub-pixel-problems-in-css/

요소는 정수 개의 픽셀로 그림을 그려야 하며, 다른 답들이 다루어졌듯이, 백분율은 실제로 존중됩니다.

중요한 점은 이 경우의 픽셀은 스크린 픽셀이 아닌 CSS 픽셀을 의미하므로 50.7499%의 자식이 있는 200px 컨테이너는 101px cs 픽셀로 반올림한 다음 400 * .507499 ~= 203px가 아닌 망막 스크린의 202px로 렌더링됩니다.

이 계산에서는 화면 밀도가 무시되며 특정 망막 서브픽셀 크기에 요소를* 칠할 방법이 없습니다.Sandy Gifford가 보여준 것처럼 실제 요소의 크기가 1 css 픽셀보다 작을 수 있지만 요소의 배경이나 테두리를 1 cs 픽셀보다 작게 렌더링할 수는 없습니다.

[*] 0.5 오프셋 박스-섀도 등의 몇 가지 기법을 사용할 수 있지만 실제 박스 모델 특성은 전체 CSS 픽셀로 칠합니다.

언급URL : https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected