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
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 div
lồng nhau, là 3 ô vuông có các đặc điểm sau
- Div ông bà ngoài cùng có màu xám nhạt với kích thước 4x4
- Div gốc có màu xám đậm hơn với kích thước 2x2
- Và div con màu đỏ mà tôi đã chỉ định kích thước 50%
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ó position: absolute
, tương ứng với position: relative
tôi đã đặt trong div ông bà
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 position
của chính phần tử đó. Bạn có thể đọc thêm trên MDN
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ản
width
/height
Khá đơ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 width
của nó, thì width
của khối chứa được lấy làm nguồn tham chiếu. Tương tự như vậy, height
của phần tử đề cập đến height
của khối chứa
position: absolute
0
Đối với position: absolute
0, chiều dọc [position: absolute
2/position: absolute
3] hoặc chiều ngang [position: absolute
4/position: absolute
5] đề cập đến width
của khối chứa
Thí dụ
Trong ví dụ này,
- Div cha có kích thước 6x4
- Div con có kích thước bằng 0, nhưng với
position: absolute
2 vàposition: absolute
4 được cho 50%
Kết quả là con có kích thước tương đương 1/2 width
của bố mẹ, đó là hình vuông 3x3
position: relative
0
Tương tự như position: absolute
0, tỷ lệ phần trăm của position: relative
0 [cả chiều dọc và chiều ngang] đề cập đến width
của khối chứa
Thí dụ
Trong ví dụ này,
- Div cha có kích thước 6x4
- Div con với
position: relative
4 vàposition: relative
5 được chia 50%
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 width
của phần tử gốc]
position: relative
7/position: relative
8/______29/position
0
Đối với các thuộc tính này [thường đi kèm với position
], các thuộc tính dọc [position: relative
7/position: relative
8] đề cập đến height
và các thuộc tính nằm ngang [position: relative
9/position
0] đề cập đến width
của khối chứa
Thí dụ
Trong ví dụ này,
- Div cha có kích thước 6x4
- Div con có
position: absolute
vớiposition: relative
7 vàposition: relative
9 được cho 50%
Kết quả là div con được đặt cách cạnh trên của cha mẹ 2 đơn vị [1/2 height
của cha mẹ] và được đặt cách cạnh trái của cha mẹ 3 đơn vị [1/2 width
của cha mẹ]
width
3
Một thuộc tính đáng kinh ngạc cho hoạt ảnh/chuyển tiếp, nó cũng hỗ trợ giá trị phần trăm. Tuy nhiên, cái này không đề cập đến khối chứa nó, mà thay vào đó đề cập đến chính nó
Thí dụ
Trong ví dụ này,
- Div cha có kích thước 6x4
- Div con có kích thước 2x1 với
width
4
Kết quả là div con được đặt ở vị trí 0. 5 đơn vị cách xa cạnh trên của phần tử gốc [1/2 height
của chính nó] và được đặt cách cạnh trái của phần tử gốc 1 đơn vị [1/2 width
của chính nó]
width
7
Thuộc tính width
7 nâng độ phức tạp của đơn vị phần trăm lên một cấp độ mới 😄
Giá trị phần trăm của thuộc tính này hiện đề cập đến vùng định vị nền mà tôi hiểu là tương tự như vùng chứa .
- Chặn chỉ với nội dung [
width
9] - Chặn có nội dung và phần đệm [
height
0] - Chặn có nội dung, phần đệm và đường viền [
height
1]
3 yếu tố được đưa ra bởi thuộc tính height
2. Bạn có thể đọc thêm trên MDN
Thí dụ
Trong ví dụ này,
- Div cha có kích thước 6x4
- Div con có kích thước 3x2, không có
position: absolute
0, không cóheight
4 - Tôi đã sử dụng logo DEV [với tỷ lệ 1 ô vuông. 1] dưới dạng
height
5 cho div con, với thuộc tínhwidth
7 được đặt thành 50% 50%
Kết quả là hình nền đã được kéo dài để có kích thước 1. 5x1, tương ứng với 1/2 size của trẻ
height
7
Tương tự như width
7, tỷ lệ thuộc tính của height
7 cũng dựa vào khu vực định vị nền
Thí dụ
Trong ví dụ này, cùng một hình ảnh và bố cục đã được sử dụng như trước đó. Khi chúng tôi thay đổi giá trị của height
7, chúng tôi có thể thấy một số quan sát
- Không có bất kỳ giá trị nào [theo mặc định, giá trị là
width
1], hình nền được đặt ở góc trên cùng bên trái - Với
width
2, hình nền được đặt ở giữa bên trái - Với
width
3, hình nền được đặt ở giữa - Với
width
4, hình nền được đặt dưới cùng bên phải
Ghi chú.
width
2 tương đương với
width
6width
7
Rõ ràng, có một số phép tính đằng sau tỷ lệ phần trăm của thuộc tính này, thay vì chỉ khoảng cách giữa cạnh trên và cạnh trái của hình ảnh với cạnh của đứa trẻ. Qua một số nghiên cứu và thử nghiệm, có vẻ như thuộc tính height
7 dựa vào phép tính sau đây trước khi mang lại giá trị thực tế
offset X = [chiều rộng của vùng chứa - chiều rộng của hình ảnh] * vị trí nền-x
offset Y = [chiều cao của vùng chứa - chiều cao của hình ảnh] * vị trí nền-y
Trong trường hợp này, với
- container là div con
- chiều rộng/chiều cao của hình ảnh là kích thước kết quả của
width
7
width
0
Đối với width
0, giá trị phần trăm chỉ đề cập đến khối gốc trực tiếp của nó
Thí dụ
Trong ví dụ này, tôi sử dụng bố cục giống như ví dụ đầu tiên, với width
0 được chỉ định như bên dưới
- 13px cho ông bà
- 26px cho cha mẹ
- 50% cho trẻ em
Kết quả là chúng ta có thể thấy rõ rằng width
0 của đứa trẻ bây giờ tương đương với ông bà và bằng 1/2 của cha mẹ, bỏ qua thực tế là position: relative
được gán cho ông bà chứ không phải cha mẹ.
width
5
Mặc dù có thể không phổ biến nhưng tôi cũng đề cập đến thuộc tính này vì nó cũng hỗ trợ tỷ lệ phần trăm. Giá trị phần trăm của width
5 phụ thuộc vào width
0 của chính nó
Thí dụ
Trong ví dụ này,
- Đoạn văn có 11 dòng
width
0 được đặt 20pxwidth
5 được đặt 150%
height
thực tế của toàn bộ khối là ~329px,
width
5 trong trường hợp này là. 20 * 150% = 30px- Sau đó,
height
là. 30 * 11 = 330px, gần đúng vớiheight
thực tế
mang đi
Hy vọng bài viết đã làm sáng tỏ phần nào hiểu biết của bạn về giá trị phần trăm trong CSS thay vì làm mọi thứ trở nên tồi tệ hơn 😅
Tôi cũng đã tweet một cheatsheet để tóm tắt những gì được viết cho đến nay, có thể nó sẽ hữu ích để nhớ ý nghĩa lúc đầu