Inset-block-start - Thủ thuật CSS

inset-block-startlà một thuộc tính CSS logic đặt độ dài mà một phần tử được bù đắp theo hướng khối từ cạnh bắt đầu của nó. Đó là loại giống như tuyên bố toptrừ điểm bắt đầu của nó được xác định bởi các yếu tố của direction, text-orientationvà writing-mode, giống như tính logic khác.

Thuộc tính này là một phần của đặc tả Giá trị và Thuộc tính logic CSS Cấp độ 1 hiện đang ở trạng thái Bản nháp của Người biên tập. Điều đó có nghĩa là định nghĩa và thông tin về nó có thể thay đổi từ bây giờ đến khuyến nghị chính thức.

.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Vì vậy, ví dụ: nếu chế độ ghi được đặt thành horizontal-lrthuộc inset-block-starttính sẽ hoạt động giống như topvà đặt độ lệch của phần tử từ cạnh bắt đầu, là cạnh trên cùng. Bạn thậm chí cần chỉ định một positionphần tử rõ ràng trên cùng một phần tử để nó có hiệu lực, giống như topvà các thuộc tính bù trừ vật lý khác.

Nhưng thay đổi phần tử writing-modethành một cái gì đó giống như vậy vertical-rlvà cạnh bắt đầu được xoay theo hướng thẳng đứng, hoạt động giống thuộc lefttính hơn.

Cú pháp

inset-block-start: ;

Giá trị ban đầu: auto
Áp dụng cho: phần tử được định vị
Kế thừa: không
Phần trăm: đối với tài sản vật chất tương ứng
Trị giá tính toán: tương tự như tương ứng với toptài sản
Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

inset-block-startcó giá trị độ dài và hỗ trợ các từ khóa toàn cầu. Giá trị mặc định của nó là auto.

/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;