Thuộc tính block-size CSS

Khuyến nghị khóa học:

block-size Định nghĩa và cách sử dụng

Thuộc tính xác định kích thước của phần tử theo hướng khối.Lưu ý: Các thuộc tính CSS liên quan writing-mode block-size Định nghĩa hướng khối, điều này sẽ ảnh hưởng đến

Đối với trang tiếng Anh, hướng khối là xuống, hướng nội là từ trái qua phải. block-sizeinline-size Thuộc tính tương ứng với kết quả của CSS. widthheight Thuộc tính rất giống nhau, nhưng block-sizeinline-size Thuộc tính phụ thuộc vào hướng khối và hướng nội.

Mô hình

Ví dụ 1

Đặt kích thước của phần tử <div> theo hướng khối:

div {
  block-size: 200px;
}

Thử ngay

Ví dụ 2

Khi giá trị thuộc tính writing-mode của phần tử <div> được thiết lập là vertical-rl, hướng khối sẽ từ xuống đổi thành ngang, điều này sẽ thay đổi hướng tác dụng của thuộc tính block-size:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

Thử ngay

Cú pháp CSS

inset-block: auto|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Mặc định. Giá trị mặc định của block-size cho phần tử.
length Đặt block-size bằng px, pt, cm, v.v. Xem thêm:Đơn vị CSS.
% Đặt block-size bằng phần trăm so với kích thước của phần tử cha trên trục tương ứng.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: Không
Ch製 animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.blockSize="100px"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Trang liên quan

Giáo trình CSS:Chiều cao và chiều rộng CSS

Giáo trình CSS:Khung mô hình CSS

Tham khảo CSS:Thuộc tính height

Tham khảo CSS:Thuộc tính width

Tham khảo CSS:Thuộc tính writing-mode