หน่วย CSS
CSS มีหน่วยที่แตกต่างกันมาใช้เพื่อเป็นตัวแทนของความยาว
โรงแรมบางแห่งมีการตั้งค่า CSS ความยาวความกว้างขอบ padding, font-size ชายแดนที่มีความกว้างและอื่น ๆ
ความยาวและหน่วยดิจิตอลเช่น 10px คือ 2em และอื่น ๆ
ไม่สามารถมีช่องว่างระหว่างตัวเลขและหน่วย ถ้าความยาวเป็น 0 หน่วยสามารถละเว้น
สำหรับคุณสมบัติบาง CSS, ความยาวสามารถเป็นค่าลบ
มีสองประเภทของหน่วยความยาว: ญาติและ Absolute
สนับสนุนเบราว์เซอร์
ตารางต่อไปนี้แสดงให้เห็นรุ่นเบราว์เซอร์ขั้นต่ำที่สนับสนุนหน่วยของความยาว
หน่วยของความยาว | |||||
---|---|---|---|---|---|
em, อดีต% PX, ซม., มมใน PT, PC | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
CH | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
REM | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
VH, VW | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0 * | 19.0 | 6.0 | 20.0 |
VMax | 26.0 | ไม่สนับสนุน | 19.0 | ไม่สนับสนุน | 20.0 |
หมายเหตุ: Internet Explorer 9 โดยที่ไม่ได้มาตรฐานชื่อ VM สนับสนุน vmin
ความยาวของญาติ
หน่วยความยาวญาติระบุความยาวเมื่อเทียบกับความยาวของทรัพย์สินของผู้อื่น ทั้งนี้ขึ้นอยู่กับอุปกรณ์ความยาวที่เหมาะสมกว่า
หน่วย | ลักษณะ | ตัวอย่างออนไลน์ |
---|---|---|
em | มันอธิบายเกี่ยวกับการประยุกต์ใช้ขนาดตัวอักษรขององค์ประกอบปัจจุบันก็ยังเป็นหน่วยความยาวญาติ โดยปกติเบราว์เซอร์ขนาดตัวอักษรเริ่มต้นคือ 16px แล้ว 2em == 32px; | ความพยายาม |
อดีต | ภาพภาษาอังกฤษขึ้นอยู่กับความสูงของ X ขนาดเล็ก | ความพยายาม |
CH | ความกว้างของจำนวน 0 | |
REM | องค์ประกอบราก (HTML) แบบอักษรขนาด | |
VW | ความกว้างของมุมมอง, ความกว้างของหน้าต่าง 1vw = 1% ของความกว้างของหน้าต่าง | ความพยายาม |
VH | มุมมองความสูงความสูงหน้าต่าง 1vh = ความสูงหน้าต่าง 1% | ความพยายาม |
vmin | VW และเป็นหนึ่ง VH ขนาดเล็ก | ความพยายาม |
VMax | VW และเป็นหนึ่ง VH ขนาดใหญ่ | ความพยายาม |
% |
เคล็ดลับ: em REMและสิ่งที่แตกต่างกันไม่ได้หรือไม่ ยกเว้นว่า REM องค์ประกอบที่กำหนดขนาดตัวอักษรยังค่อนข้างขนาด แต่เพียงองค์ประกอบราก HTML ตรงข้าม |
ความยาวของแอบโซลูท
หน่วยความยาวแอบโซลูทเป็นค่าคงที่มันสะท้อนให้เห็นขนาดทางกายภาพจริง หน่วยความยาวของ Absolute สูงขึ้นอยู่กับขนาดกลางที่ส่งออกก็ไม่ได้ขึ้นอยู่กับสภาพแวดล้อม (จอแสดงผลความละเอียดระบบปฏิบัติการอื่น ๆ )
หน่วย | ลักษณะ | ตัวอย่างออนไลน์ |
---|---|---|
ซม. | ซม. | ความพยายาม |
มิลลิเมตร | มิลลิเมตร | ความพยายาม |
ใน | นิ้ว (1in = 96 พิกเซล = 2.54cm) | ความพยายาม |
px * | พิกเซล (1px = 1/96 1in) | ความพยายาม |
จุด | จุดประมาณ 1/72 ของนิ้ว (1pt = 1 / 72in) | ความพยายาม |
พีซี | Pica ประมาณ 6PT 1/6 Yingcun (1pc = 12 pt) | ความพยายาม |
บางทีพิกเซลถือว่าเป็นสิ่งที่ดีที่สุด "พิกเซลอุปกรณ์" และระยะเวลาในพิกเซลนี้และคุณจะเห็นข้อความบนพิกเซลหน้าจอแสดงผลที่ไม่เกี่ยวข้อง px เป็นจริงตัวชี้วัดของหน่วยมุม