Tỷ lệ phần trăm có hoạt động trên CSS chiều cao không?
|
Bạn đã bao giờ không hiểu cách hoạt động của tỷ lệ phần trăm trong CSS chưa? . Đó là lý do tại sao tôi viết bài này để chia sẻ những hiểu biết của tôi thông qua các nghiên cứu và đọc của tôi với bạn Show
Tỷ lệ phần trăm của những gì?Theo tỷ lệ phần trăm, rõ ràng nên có một mục tiêu được lấy làm nguồn tham khảo. Hầu hết các câu trả lời cho điều này là khối cha của phần tử mà chúng tôi chỉ định tỷ lệ phần trăm. Điều này đúng, nhưng không hoàn toàn bao gồm tất cả các trường hợp. Câu trả lời đúng nhất phải là khối chứa, nghĩa là khối chứa phần tử của chúng ta và nó không nhất thiết phải là khối cha trực tiếp Hãy cùng xem ví dụ dưới đây Trong ví dụ này, tôi đã tạo 3
Nếu đơn vị phần trăm lấy cha mẹ làm nguồn, thì kích thước của đứa trẻ phải bằng 1/2 của nó, nhưng không, đứa trẻ thực sự có kích thước bằng với cha mẹ và 1/2 của ông bà như bạn có thể thấy. Lý do là div ông bà là khối chứa true của div con, do div con có Do đó, để xác định đâu là khối chứa thực sự của một phần tử, hoàn toàn dựa vào thuộc tính Tuy nhiên, đối với một số thuộc tính nhất định, nguồn tham chiếu cho đơn vị phần trăm không phải là khối gốc cũng như khối chứa, thay vào đó, chính nó là phần tử - self Tỷ lệ phần trăm theo tài sảnwidth/heightKhá đơn giản, như bạn đã thấy trong ví dụ trên, khi một phần tử được gán giá trị phần trăm cho position: absolute0Đối với Thí dụ Trong ví dụ này,
Kết quả là con có kích thước tương đương 1/2 position: relative0Tương tự như Thí dụ Trong ví dụ này,
Kết quả là phần tử con được đặt cách 3 đơn vị so với lề trên và lề trái của phần tử gốc (1/2 position: relative7/position: relative8/______29/position0Đối với các thuộc tính này (thường đi kèm với Thí dụ Trong ví dụ này,
Kết quả là div con được đặt cách cạnh trên của cha mẹ 2 đơn vị (1/2
|
