Thuộc tính min-block-size CSS

Trang trước @media
Trang tiếp theo min-inline-size

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

min-block-size Thuộc tính xác định kích thước nhỏ nhất của yếu tố theo hướng khối.

Nếu kích thước nội dung trong hướng khối nhỏ hơn kích thước nhỏ nhất, thì sẽ áp dụng min-block-size Giá trị thuộc tính.

Nếu kích thước nội dung trong hướng khối lớn hơn kích thước nhỏ nhất, thì min-block-size Giá trị thuộc tính không hoạt động.

Lưu ý:Thuộc tính CSS liên quan writing-mode Định nghĩa hướng khối, điều này sẽ ảnh hưởng đến min-block-size Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là từ dưới lên, và hướng in là từ trái sang phải.

CSS min-block-size Thuộc tính tương ứng với thuộc tính CSS min-height và min-width Rất giống nhau, nhưng min-block-size Thuộc tính phụ thuộc vào hướng khối.

Mô hình

Ví dụ 1

Thiết lập kích thước nhỏ nhất theo hướng khối của phần tử <div> thành 200 pixel:

div {
  min-block-size: 200px;
}

Thử ngay

Ví dụ 2: Chế độ viết

Thiết lập <div> của phần tử writing-mode Khi thuộc tính được thiết lập thành vertical-rl, hướng khối từ dưới lên chuyển sang hướng ngang, điều này sẽ ảnh hưởng đến min-block-size Cách hoạt động của thuộc tính:

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

Thử ngay

Ví dụ 3: min-block-size và block-size

Quan sát một phần tử <div> (block-size tại 100px) và một phần tử <div> khác (min-block-size các phản ứng khác nhau khi kích thước nội dung thay đổi (tại 100px):

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Thử ngay

Ngữ pháp CSS

min-block-size: 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 min-block-size của phần tử.
length	Định nghĩa min-block-size, đơn vị là px, pt, cm, v.v. Xem thêm:Đơn vị CSS.
%	Định nghĩa kích thước theo phần trăm so với phần tử cha trên trục tương ứng của min-block-size.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thực hiện 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ế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngữ pháp JavaScript:	object.style.minBlockSize="10px"