Phần trăm css còn lại

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 {
    position: absolute;
    top: X%;
    transform: translateY(-X%);
  }

  0 đẩy hoàn toàn phần tử ra khỏi khung nhìn
• 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ọc

Tươ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: absolute0

Đối với position: absolute0, theo chiều dọc (position: absolute2/position: absolute3) hoặc chiều ngang (position: absolute4/position: absolute5) đề 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: absolute2 và position: absolute4 đượ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: relative0

Tương tự như position: absolute0, tỷ lệ phần trăm của position: relative0 (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: relative4 và position: relative5 đượ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: relative7/position: relative8/position: relative9/position0

Đố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: relative7/______25_______8) đề cập đến height và thuộc tính nằm ngang (position: relative9/position0) 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ới position: relative7 và position: relative9 đượ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ẹ)

width3

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 width4

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ó)

width7

Thuộc tính width7 đư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 (width9)
• Chặn có nội dung và phần đệm (height0)
• Chặn có nội dung, phần đệm và đường viền (height1)

3 yếu tố được đưa ra bởi tài sản height2. 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: absolute0, không có height4
• Tôi đã sử dụng logo DEV (với tỷ lệ 1 ô vuông. 1) dưới dạng height5 cho div con, với thuộc tính width7 đượ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ẻ

height7

Tương tự như width7, tỷ lệ phần trăm của thuộc tính height7 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 height7, 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à width1), hình nền được đặt ở góc trên cùng bên trái
• Với width2, hình nền được đặt ở giữa bên trái
• Với width3, hình nền được đặt ở giữa
• Với width4, hình nền được đặt dưới cùng bên phải

Ghi chú. width2 tương đương với

• width6
• width7

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 height7 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 width7

width0

Đối với width0, 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 width0 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ẹ.

width5

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 width5 phụ thuộc vào width0 của chính nó

Thí dụ

Trong ví dụ này,

• Đoạn văn có 11 dòng
• width0 được đặt 20px
• width5 được đặt 150%

height thực tế của toàn bộ khối là ~329px,

• width5 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

Làm cách nào để sử dụng tỷ lệ phần trăm trong CSS?

0 CSS còn lại là gì?

Công dụng của cái ..... là gì. còn lại trong CSS?

Đâu là sự khác biệt giữa leftvà margin