CSS - Inset: Hướng dẫn cuối cùng về việc định vị các yếu tố

Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của thuộc tính inset. Là giáo viên máy tính ở khu phố của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ định vị các yếu tố một cách chuyên nghiệp!

what là thuộc tính CSS Inset?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu với những điều cơ bản. Thuộc tính inset giống như một cây kéo đa năng để định vị các yếu tố trong CSS. Đây là một thuộc tính viết tắt giúp đặt tất cả bốn cạnh vị trí của một yếu tố cùng một lúc. Hãy tưởng tượng nó như một枝 c魔法 có thể đặt yếu tố của bạn chính xác nơi bạn muốn trên trang.

Các giá trị khả thi và cú pháp

Hãy phân tích các giá trị và cú pháp khả thi cho thuộc tính inset. Đừng lo lắng nếu nó trông có vẻ đáng sợ ban đầu - chúng ta sẽ đi qua từng bước một!

Giá trị	Mô tả
auto	Trình duyệt tính toán độ lõm
length	Chỉ định độ lõm theo px, pt, cm, v.v.
%	Chỉ định độ lõm theo % của yếu tố chứa
inherit	Kế thừa giá trị từ yếu tố cha
initial	Đặt thuộc tính về giá trị mặc định
unset	Đặt lại thuộc tính về giá trị tự nhiên

Cú pháp cơ bản cho thuộc tính inset trông như thế này:

selector {
inset: value;
}

Bây giờ, hãy khám phá các cách khác nhau để sử dụng thuộc tính mạnh mẽ này!

CSS Inset - Bốn giá trị độ dài

Khi bạn cung cấp bốn giá trị cho thuộc tính inset, bạn đang đặt vị trí trên, phải, dưỡi và trái của yếu tố cùng một lúc. Điều này giống như đang cho yếu tố của bạn một cái ôm từ tất cả các bên!

.box {
position: absolute;
inset: 10px 20px 30px 40px;
}

Trong ví dụ này, chúng ta đang nói với yếu tố .box của mình rằng nó nên ngồi cách trên 10px, cách phải 20px, cách dưỡi 30px và cách trái 40px so với yếu tố chứa của nó. Điều này giống như đang đưa ra các hướng dẫn cụ thể cho yếu tố của bạn về nơi nó nên đứng!

CSS Inset - Ba giá trị độ dài

Khi chúng ta chỉ sử dụng ba giá trị thì sao? CSS trở nên thông minh! Nó giả định rằng giá trị trái nên bằng giá trị phải.

.box {
position: absolute;
inset: 10px 20px 30px;
}

Điều này tương đương với inset: 10px 20px 30px 20px. Yếu tố của chúng ta bây giờ cách trên 10px, cách phải và trái 20px, và cách dưỡi 30px. Điều này giống như đang bảo yếu tố của bạn "nén lại một chút ở hai bên!"

CSS Inset - Hai giá trị độ dài

Với hai giá trị, CSS trở nên thông minh hơn nữa. Giá trị đầu tiên áp dụng cho cả trên và dưỡi, trong khi giá trị thứ hai áp dụng cho cả trái và phải.

.box {
position: absolute;
inset: 10px 20px;
}

Điều này tương đương với inset: 10px 20px 10px 20px. Yếu tố của chúng ta bây giờ cách trên và dưỡi 10px, và cách trái và phải 20px. Điều này giống như đang cho yếu tố của bạn một khung đối xứng!

CSS Inset - Một giá trị độ dài

Khi bạn chỉ sử dụng một giá trị, nó áp dụng cho tất cả bốn cạnh. Điều này giống như quấn yếu tố của bạn trong một tấm chăn đồng đều không gian!

.box {
position: absolute;
inset: 10px;
}

Điều này tương đương với inset: 10px 10px 10px 10px. Yếu tố của chúng ta bây giờ có một khoảng cách 10px trên tất cả các bên từ yếu tố chứa của nó.

CSS Inset - Giá trị phần trăm

Phần trăm rất hữu ích khi bạn muốn bố cục của mình trở nên linh hoạt. Phần trăm được tính dựa trên kích thước của yếu tố chứa.

.box {
position: absolute;
inset: 10%;
}

Trong trường hợp này, yếu tố của chúng ta sẽ được định vị cách 10% từ tất cả các bên của容器 của nó. Nếu container tăng hoặc giảm kích thước, vị trí sẽ điều chỉnh tương ứng. Điều này giống như cho yếu tố của bạn một bong bóng không gian dựa trên phần trăm!

CSS Inset - Giá trị hỗn hợp

Niềm vui thực sự bắt đầu khi chúng ta bắt đầu trộn các đơn vị khác nhau. Bạn có thể sử dụng sự kết hợp của phần trăm, pixel và thậm chí là từ khóa auto.

.box {
position: absolute;
inset: 10% 20px auto 5em;
}

Ở đây, yếu tố của chúng ta cách trên 10%, cách phải 20px, tự động định vị từ dưới (thường có nghĩa là nó sẽ chiếm bất kỳ không gian còn lại nào) và cách trái 5em. Điều này giống như cho yếu tố của bạn một dấu vết vị trí duy nhất!

CSS Inset - Giá trị Auto

Giá trị auto đặc biệt hữu ích khi bạn muốn trình duyệt tính toán độ lõm tự động.

.box {
position: absolute;
inset: auto 20px 10px;
}

Trong ví dụ này, phần trên sẽ được tính toán tự động, trong khi phần phải và trái được đặt là 20px, và phần dưỡi là 10px. Điều này giống như bảo yếu tố của bạn "tự giải quyết phần trên, nhưng tuân theo các quy tắc này cho các bên khác".

CSS Inset - Các thuộc tính liên quan

Mặc dù inset rất hữu ích, nhưng cũng tốt để biết các thành phần cá nhân của nó. Đó là top, right, bottom, và left. Bạn có thể sử dụng chúng khi cần kiểm soát chi tiết hơn.

.box {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}

Điều này đạt được cùng kết quả như inset: 10px 20px 30px 40px, nhưng cho phép bạn điều chỉnh từng bên một nếu cần.

Kết luận

Và đây bạn đã có nó, các bạn! Bạn vừa đi một chuyến du lịch lớn qua thuộc tính inset của CSS. Từ cú pháp cơ bản đến các trường hợp sử dụng khác nhau, bạn bây giờ có khả năng định vị các yếu tố với độ chính xác và linh hoạt.

Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy hãy tiếp tục, thử nghiệm với các ví dụ này, trộn lẫn và kết hợp các giá trị, và xem inset có thể biến đổi bố cục của bạn như thế nào. Trước khi bạn biết điều đó, bạn sẽ định vị các yếu tố trong giấc ngủ!

Chúc mừng coding, và hy vọng các yếu tố của bạn luôn được định vị hoàn hảo!

Credits: Image by storyset