CSS นิยาย block-size

การรับรู้และการใช้งาน

block-size ตัวแปรกำหนดขนาดขององค์ประกอบในแนวบล็อค

แนะนำ:ตัวแปรที่เกี่ยวข้องกับ CSS writing-mode กำหนดแนวบล็อค ซึ่งจะมีผลต่อ block-size ตัวแปรมีบล็อคแนวลงไปและแนวรวมจากซ้ายไปขวาสำหรับหน้าที่อังกฤษ

CSS block-size และ inline-size ตัวแปรกับตัวแปรของ CSS width และ height ตัวแปรที่คล้ายกันมาก แต่ block-size และ inline-size ตัวแปรขึ้นอยู่กับแนวบล็อคและแนวรวม

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าขนาดขององค์ประกอบ <div> ในแนวบล็อค:

div {
  block-size: 200px;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เมื่อค่าของตัวแปร writing-mode ขององค์ประกอบ <div> ถูกตั้งเป็น vertical-rl แล้ว แนวบล็อคจะเปลี่ยนจากลงไปเป็นนอน ซึ่งจะเปลี่ยนแนวที่ตัวแปร block-size ทำงาน:

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

ทดลองด้วยตัวเอง

CSS การเขียน

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

ค่าตัวแปร

ค่า คำอธิบาย
auto ค่าเริ่มต้น
length กำหนด block-size ด้วยหน่วยเมตริก อย่างเช่น px, pt, cm และเพิ่มเติมหน่วยมาตรฐาน CSS。
% กำหนด block-size ในรูปแบบเป็นเปอร์เซ็นต์ของขนาดขององค์ประกอบบนรายในของตัวแปร
initial ตั้งค่าตัวแปรนี้เป็นค่าเริ่มต้นของมัน ค้นหา initial。
inherit จากตัวแปรขององค์ประกอบต้นของมัน ค้นหา inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: auto
การเชื่อมโยง: ไม่
การสร้างแอนิเมชัน： สนับสนุน。อ่านเพิ่มเติมที่:ตัวแปรที่เกี่ยวข้องกับอนุรักษ์。
版本： CSS3
JavaScript 语法： object.style.blockSize="100px"

การสนับสนุนเบราสเซอร์

ตัวเลขในตารางนี้แสดงถึงสูตรรุ่นของเบราสเซอร์ที่สนับสนุนอัตรานี้ในลักษณะที่เต็มที่

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

หน้าที่เกี่ยวข้อง

CSS แนะนำ:CSS ความสูงและความกว้าง

CSS แนะนำ:CSS โมเดลบอกเลข

CSS อ้างอิง:height thuộc tính

CSS อ้างอิง:width thuộc tính

CSS อ้างอิง:writing-mode thuộc tính