Mục tiêu của chúng tôi là cung cấp một giá trị từ 0%
đến 100%
và có phần tử được định vị hoàn hảo, e. g. dính vào đầu cho 0%
, dính vào đáy cho 100%
, hoặc hoàn toàn tập trung cho 50%
. Thoạt nhìn điều này có vẻ tầm thường. position: absolute
& top: 50%
và chúng ta đã sẵn sàng để bắt đầu. Tuy nhiên, điều đó để lại cho chúng tôi một vài vấn đề
.element {
0 đẩy hoàn toàn phần tử ra khỏi khung nhìn
position: absolute;
top: X%;
transform: translateY[-X%];
}top: 50%
không căn giữa phần tử một cách hoàn hảo, nó chỉ căn chỉnh nó vào giữa
Chuyển đổi để giải cứu
Bạn có thể đã biết thủ thuật CSS
.element {
position: absolute;
top: X%;
transform: translateY[-X%];
}
2 để căn giữa các phần tử tùy ý theo chiều ngang hoặc chiều dọc.element {
position: absolute;
top: 50%;
transform: translateY[-50%];
}
Và hóa ra chúng ta có thể giải quyết vấn đề ban đầu của mình bằng những cơ chế đó khá dễ dàng. Đối với bất kỳ vị trí
.element {
position: absolute;
top: X%;
transform: translateY[-X%];
}
3 nào giữa 0%
và 100%
, bạn hoàn toàn có thể đặt phần tử của mình ở vị trí thẳng đứng này.element {
position: absolute;
top: X%;
transform: translateY[-X%];
}
định vị dọcTương tự bạn có thể làm tương tự cho trục hoành
.element {
position: absolute;
left: X%;
transform: translateX[-X%];
}
định vị ngangĐộng lực
Tất nhiên, có thể giải các ví dụ trên theo nhiều cách khác nhau, e. g.
.element {
position: absolute;
top: X%;
transform: translateY[-X%];
}
6 cho 0%
, .element {
position: absolute;
top: X%;
transform: translateY[-X%];
}
8 cho 100%
và một phương pháp định tâm theo chiều dọc thay thế cho 50%
. Nhưng tôi cần một giải pháp phù hợp với mọi giá trị trong khoảng từ 0%
đến 100%
và có thể dễ dàng tạo ra một tập lệnh. Về mặt tích cực, điều này cũng cho phép chúng tôi chạy hoạt ảnh 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 hình 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 thực tế là đứa trẻ có position: absolute
, tương ứng với position: relative
mà tôi đã đặt trong div ông bà
Do đó, để nhận biết đâ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 về
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, theo 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ả theo 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à đứa trẻ được đặt cách 3 đơn vị so với trên cùng và lề trái của cha mẹ [1/2 _______ của cha mẹ]
position: relative
7/position: relative
8/position: relative
9/position
0
Đối với các thuộc tính này [thường đi kèm với position
], thuộc tính dọc [position: relative
7/______25_______8] đề cập đến height
và thuộc tính nằm ngang [position: relative
9/position
0] liên quan đế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 chia 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 mép trên của cấp độ gốc [1/2 height
của chính nó] và đặt cách mép trái của cấp độ gốc 1 đơn vị [1/2 width
của chính nó]
width
7
Thuộc tính width
7 đưa độ phức tạp của đơn vị phần trăm lên một tầm cao mới 😄
Giá trị phần trăm của thuộc tính này hiện đề cập đến khu vực định vị nền, mà tôi hiểu là tương tự như khối chứa, nhưng có thêm 3 yếu tố này
- 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 tài sản 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ệ phần trăm của thuộc tính height
7 cũng phụ thuộc 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 _____27_______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 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ới thực tếheight
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