Tại sao tỷ lệ phần trăm ký quỹ/tỷ lệ đệm trong CSS luôn được tính theo chiều rộng?

Question

Nếu bạn nhìn vào CSS box model spec, bạn sẽ quan sát như sau:

Các [lề] tỷ lệ phần trăm được tính đối với rộng của khối chứa các tạo hộp với. Lưu ý rằng điều này cũng đúng với 'lề trên cùng' và 'lề dưới cùng'. Nếu chiều rộng của khối chứa phụ thuộc vào phần tử này, thì bố cục kết quả là không xác định trong CSS 2.1. (nhấn mạnh mỏ)

Điều này thực sự đúng. Nhưng lý do tại sao? Điều gì trên trái đất sẽ buộc bất cứ ai thiết kế nó theo cách này? Thật dễ dàng để nghĩ về các tình huống mà bạn muốn, ví dụ: một điều nhất định luôn giảm 25% so với đầu trang, nhưng khó có thể đưa ra bất kỳ lý do nào khiến bạn muốn đệm dọc tương ứng với kích thước ngang của phụ huynh.

Dưới đây là một ví dụ về hiện tượng tôi đề cập đến:

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"> 
    This div is 200x800. 
    <div style="border: 1px solid blue; margin: 10% 0 0 10%;"> 
    This div has top-margin of 10% and left-margin of 10% with respect to its parent. 
    </div> 
</div> 

http://jsfiddle.net/8JDYD/

Answer 1

Chuyển nhận xét của tôi đến một câu trả lời, bởi vì nó làm cho tinh thần logic. Tuy nhiên, xin lưu ý rằng đây là phỏng đoán vô căn cứ. Lý do thực tế của lý do tại sao spec được viết theo cách này vẫn còn, về mặt kỹ thuật, chưa biết.

Chiều cao phần tử được xác định theo chiều cao của số trẻ em. Nếu phần tử có phần đệm: 10% (so với chiều cao của bố mẹ là ), điều đó sẽ ảnh hưởng đến chiều cao của phần tử gốc. Vì chiều cao của trẻ phụ thuộc vào chiều cao của phụ huynh và chiều cao của phụ huynh phụ thuộc vào chiều cao của trẻ, chúng tôi sẽ có chiều cao không chính xác hoặc vòng lặp vô hạn. Chắc chắn, điều này chỉ ảnh hưởng đến trường hợp cha mẹ bù đắp === cấp độ gốc, nhưng vẫn còn. Đó là một trường hợp lẻ khó giải quyết.

Cập nhật: Hai câu cuối cùng có thể không hoàn toàn chính xác. Chiều cao của phần tử lá (con không có con) có ảnh hưởng đến chiều cao của tất cả các phần tử trên nó, do đó, điều này ảnh hưởng đến nhiều tình huống khác nhau.

Answer 2

Đối với lề "n%" (và đệm) là cùng một cho lề trên/lề phải/lề dưới/lề trái, cả bốn phải tương ứng với cùng một cơ sở. Nếu trên cùng/dưới cùng sử dụng một cơ sở khác so với trái/phải ', sau đó "n%" lề (và đệm) sẽ không có nghĩa là cùng một điều trên tất cả bốn bên.

(cũng lưu ý có trên/dưới lề so với rộng phép một hack CSS lạ mà cho phép bạn chỉ định một hộp với một tỉ lệ không thay đổi ... ngay cả khi hộp được rescaled.)

Answer 3

Tôi bỏ phiếu cho câu trả lời từ @ChuckKollars sau khi chơi với số này JSFiddle (trên Chrome 46.0.2490.86) và đề cập đến this post (viết bằng tiếng Trung Quốc).

---

Một lý do quan trọng so với vô tính phỏng đoán là: sử dụng width phải đối mặt với cùng vô tính vấn đề.

Hãy xem JSFiddle này, màn hình parent là inline-block, đủ điều kiện để xác định lề/đệm trên đó. child có giá trị ký quỹ 20%. Nếu chúng ta làm theo các tính vô hạn phỏng đoán:

1. Chiều rộng của child phụ thuộc vào parent
2. Chiều rộng của parent phụ thuộc vào child

Nhưng kết quả là, Chrome dừng tính toán ở đâu đó, kết quả:

Nếu bạn cố gắng mở rộng bảng điều khiển "kết quả" theo chiều ngang trên JSFiddle, bạn sẽ thấy rằng chiều rộng của chúng sẽ không thay đổi. Xin lưu ý rằng nội dung trong số child được bao bọc thành hai dòng (không, nói một dòng), tại sao? Tôi đoán Chrome chỉ mã hóa nó ở đâu đó. Nếu bạn chỉnh sửa nội dung child để làm cho nó nhiều hơn (JSFiddle), bạn sẽ thấy rằng miễn là có thêm không gian theo chiều ngang, Chrome giữ nội dung hai dòng.

Vì vậy, chúng ta có thể thấy: có một số cách để ngăn tính toán vô hạn.

---

Tôi đồng ý với giả thiết rằng: thiết kế này chỉ để giữ bốn giá trị ký quỹ/đệm dựa trên cùng một thước đo.

this post (viết bằng tiếng Trung) cũng đề xuất một lý do khác là: đó là do định hướng đọc/sắp chữ. Chúng ta đọc từ trên xuống dưới, với chiều rộng cố định và chiều cao vô hạn (hầu như).

Answer 4

Tôi nhận ra OP là yêu cầu tại sao đặc tả CSS định nghĩa trên/dưới tỷ lệ phần trăm lợi nhuận theo% của chiều rộng (và không, như sẽ được giả định, chiều cao), nhưng tôi nghĩ rằng nó cũng có thể có ích để viết giải pháp tiềm năng.

Hầu hết các trình duyệt hiện đại đều hỗ trợ vw và vh bây giờ, cho phép bạn chỉ định số ký tự dựa trên chiều rộng khung nhìn và chiều cao khung nhìn.

100vw/100vh bằng 100% chiều rộng/100% chiều cao (tương ứng) nếu không có thanh cuộn; nếu có một thanh cuộn thì các số khung nhìn không tính đến điều này (trong khi số% làm). Rất may, gần như tất cả các trình duyệt đều sử dụng kích thước thanh cuộn 17px (see here), vì vậy bạn có thể sử dụng hàm calc css để giải thích cho điều này. Nếu bạn không biết thanh cuộn có xuất hiện hay không thì giải pháp này sẽ không hoạt động.

Ví dụ: Giả sử không có thanh cuộn ngang, lề trên cùng là 50% chiều cao, có thể được định nghĩa là "lề trên cùng: 50vh;". Với thanh cuộn ngang, điều này có thể được định nghĩa là "margin-top: calc (0.5 * (100vh - 17px)); "(hãy nhớ rằng các toán tử trừ và cộng trong calc yêu cầu khoảng trống ở cả hai bên!).