Một cái gì đó tôi đã tự hỏi một lúc trong khi thiết kế CSS.
Các vị trí thập phân trong chiều rộng CSS có được tôn trọng không? Hay chúng được làm tròn?
.percentage {
width: 49.5%;
}hoặc là
.pixel {
width: 122.5px;
}Một cái gì đó tôi đã tự hỏi một lúc trong khi thiết kế CSS.
Các vị trí thập phân trong chiều rộng CSS có được tôn trọng không? Hay chúng được làm tròn?
.percentage {
width: 49.5%;
}hoặc là
.pixel {
width: 122.5px;
}Câu trả lời:
Nếu đó là chiều rộng phần trăm, thì có, nó được tôn trọng . Như Martin đã chỉ ra, mọi thứ sẽ bị phá vỡ khi bạn chuyển sang pixel phân đoạn, nhưng nếu giá trị phần trăm của bạn mang lại giá trị pixel nguyên (ví dụ: 50,5% của 200px trong ví dụ), bạn sẽ có hành vi được mong đợi, hợp lý.
Chỉnh sửa: Tôi đã cập nhật ví dụ để hiển thị những gì xảy ra với các pixel phân đoạn (trong Chrome, các giá trị được cắt bớt, vì vậy tất cả 50, 50,5 và 50,6 đều hiển thị cùng chiều rộng).
Ngay cả khi số được làm tròn khi trang được vẽ, toàn bộ giá trị vẫn được giữ trong bộ nhớ và được sử dụng để tính toán con tiếp theo. Ví dụ: nếu hộp 100.4999px của bạn vẽ thành 100px, thì con của nó có chiều rộng 50% sẽ được tính là .5 * 100.4999 thay vì .5 * 100. Và như vậy đến mức sâu hơn.
Tôi đã tạo ra các hệ thống bố trí lưới lồng nhau sâu trong đó chiều rộng của cha mẹ là con cái và con cái là phần trăm và bao gồm tối đa bốn điểm thập phân ngược dòng có tác động đáng chú ý.
Trường hợp cạnh, chắc chắn, nhưng một cái gì đó để ghi nhớ.
Mặc dù các pixel phân đoạn có thể xuất hiện để làm tròn trên các yếu tố riêng lẻ (như @SkillDrick thể hiện rất rõ) điều quan trọng cần biết là các pixel phân đoạn thực sự được tôn trọng trong mô hình hộp thực tế .
Điều này có thể được nhìn thấy tốt nhất khi các yếu tố được xếp cạnh nhau (hoặc trên đầu) của nhau; nói cách khác, nếu tôi đặt 400 div div cạnh nhau, chúng sẽ có cùng chiều rộng với một div 200 pixel. Nếu tất cả chúng thực sự được làm tròn lên tới 1px (khi nhìn vào các yếu tố riêng lẻ sẽ ngụ ý), chúng tôi hy vọng div 200px sẽ dài bằng một nửa.
Điều này có thể được nhìn thấy trong đoạn mã có thể chạy này:
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>:nth-child(even)hoặc :nth-child(odd), bạn nhận thấy rằng toàn bộ màu đó là màu cam hoặc toàn bộ là màu xanh lam - không phải là hỗn hợp của màu xanh lam và màu cam (sẽ là một màu sắc mơ hồ màu tím).
Chiều rộng sẽ được làm tròn thành số pixel nguyên .
Tôi không biết nếu mọi trình duyệt sẽ làm tròn nó theo cùng một cách. Tất cả họ dường như có một chiến lược khác nhau khi làm tròn tỷ lệ phần trăm pixel phụ. Nếu bạn quan tâm đến các chi tiết làm tròn pixel phụ trong các trình duyệt khác nhau, có một bài viết tuyệt vời về ElastiCSS .
chỉnh sửa : Tôi đã thử nghiệm bản demo của @ Skilldrick trong một số trình duyệt vì tò mò. Khi sử dụng các giá trị pixel phân đoạn (không phải là tỷ lệ phần trăm, chúng hoạt động như được đề xuất trong bài viết tôi đã liên kết) IE9p7 và FF4b7 dường như làm tròn đến pixel gần nhất, trong khi Opera 11b, Chrome 9.0.587.0 và Safari 5.0.3 cắt bớt các vị trí thập phân. Không phải là tôi hy vọng rằng họ có điểm chung sau tất cả ...
Họ dường như làm tròn các giá trị đến số nguyên gần nhất; nhưng tôi thấy sự không nhất quán trong chrome, safari và firefox.
Ví dụ: nếu 33,3% chuyển đổi thành 420,945px
chrome và firexfox hiển thị nó là 421px. trong khi safari hiển thị là 420px.
Điều này có vẻ như chrome và firefox tuân theo logic sàn và trần trong khi safari thì không. Trang này dường như thảo luận về cùng một vấn đề
Các yếu tố phải vẽ thành một số pixel pixel và như các câu trả lời khác được đề cập, tỷ lệ phần trăm thực sự được tôn trọng.
Một lưu ý quan trọng là các pixel trong trường hợp này có nghĩa là pixel css , không phải pixel màn hình, do đó, một thùng chứa 200px với con 50,7499% sẽ được làm tròn thành pixel pixel 101px , sau đó được hiển thị lên 202px trên màn hình võng mạc chứ không phải 400 *. 507499 ~ = 203px.
Mật độ màn hình bị bỏ qua trong tính toán này và không có cách nào để vẽ * một yếu tố cho kích thước pixel phụ võng mạc cụ thể. Bạn không thể có nền hoặc viền của các phần tử được hiển thị ở kích thước pixel dưới 1 css , mặc dù kích thước của phần tử thực tế có thể nhỏ hơn 1 css pixel như Sandy Gifford đã hiển thị.
[*] Bạn có thể sử dụng một số kỹ thuật như bóng hộp bù 0,5, v.v., nhưng các thuộc tính mô hình hộp thực tế sẽ vẽ thành một pixel CSS đầy đủ.