Khối chèn - Thủ thuật CSS

Mục lục:

Anonim

inset-blocklà một thuộc tính CSS logic viết tắt đặt độ dài mà một phần tử được bù đắp theo hướng khối kết hợp inset-block-startvà inset-block-end. Nó giống như khai báo topvà bottomngoại trừ điểm bắt đầu và kết thúc của nó được xác định bởi phần tử direction, text-orientationvà writing-modecũng giống như các thuộc 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: 50px 15%; 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-blocktính sẽ hoạt động giống như thiết lập topvà bottomvà thiết lập độ lệch của phần tử từ cạnh dưới. 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ư các thuộc tính bù trừ vật lý.

Nhưng thay đổi phần tử writing-modethành một cái gì đó giống như vertical-lrvà cạnh "dưới cùng" được xoay theo hướng thẳng đứng, hoạt động giống với thuộc tính leftvà hơn right.

Cú pháp

inset-block: ;
  • 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
  • Giá trị tính toán: giống như tương ứng topvà bottomthuộc tính
  • Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

inset-blockcó 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: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: unset;

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không Không 63+ Không Không Không
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
Không 79+ Không Không Không
Nguồn: caniuse

Bản giới thiệu

đọc thêm

  • Thuộc tính và giá trị logic CSS Đặc tả cấp độ 1 (Bản thảo của người biên tập)
  • Tài liệu MDN
  • Hiểu các thuộc tính và giá trị logic (Tạp chí Smashing)
  • Thuộc tính logic CSS (Adrian Roselli)
  • Quy tắc ngang hai chiều trong CSS (Hussein Al Hammad)