CSSสูงและความกว้างขนาด

การตั้งค่าสูงและความกว้าง

height และ width คุณสมบัติที่ใช้ในการตั้งค่าความสูงและความกว้างขององค์ประกอบ

height และ width สามารถตั้งค่าให้อัตโนมัติ (นี่เป็นค่าเริ่มต้น. หมายความว่าเบราว์เซอร์คำนวณความสูงและความกว้าง) หรือจะระบุไว้ในค่าความยาวเช่น px, cm ฯลฯ หรือร้อยละ (%) ของบล็อกที่มี .

หมายเหตุ: height และ width คุณสมบัติไม่รวม padding เส้นขอบหรืออัตรากำไรขั้นต้น; พวกเขาตั้งความสูง / ความกว้างของพื้นที่ภายใน padding ชายแดนและอัตรากำไรขั้นต้นขององค์ประกอบ!

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง <div> องค์ประกอบที่มีความสูง 100 พิกเซลและความกว้าง 500 พิกเซล:

การตั้งค่าความกว้างสูงสุด

max-width ทรัพย์สินที่ใช้ในการกำหนดความกว้างสูงสุดขององค์ประกอบ

max-width สามารถระบุได้ในค่าความยาวเช่น px, cm ฯลฯ หรือร้อยละ (%) ของบล็อกที่มีหรือตั้งใคร (นี่เป็นค่าเริ่มต้น. หมายความว่าไม่มีความกว้างสูงสุด)

ปัญหาเกี่ยวกับการ <div> ดังกล่าวเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์ที่มีขนาดเล็กกว่าความกว้างขององค์ประกอบ (500px) เบราว์เซอร์แล้วเพิ่มแถบเลื่อนแนวนอนไปยังหน้า

การใช้ max-width แทนในสถานการณ์เช่นนี้จะปรับปรุงการจัดการเบราว์เซอร์ของหน้าต่างขนาดเล็ก

เคล็ดลับ: ลากหน้าต่างเบราว์เซอร์ที่จะมีขนาดเล็กกว่า 500px กว้างเพื่อที่จะเห็นความแตกต่างระหว่างสอง divs!

หมายเหตุ: ค่าของ max-width แทนที่คุณสมบัติ width

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง <div> องค์ประกอบที่มีความสูง 100 พิกเซลและความกว้างสูงสุด 500 พิกเซล:

ลองตัวเอง - ตัวอย่าง

ตั้งค่าความสูงและความกว้างขององค์ประกอบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าความสูงและความกว้างขององค์ประกอบที่แตกต่างกัน

ตั้งค่าความสูงและความกว้างของภาพโดยใช้ร้อยละ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าความสูงและความกว้างของภาพโดยใช้ค่าร้อยละ

ตั้งนาทีความกว้างและความกว้างสูงสุดขององค์ประกอบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าความกว้างต่ำสุดและความกว้างสูงสุดขององค์ประกอบในการใช้ค่าพิกเซล

ชุดนาทีความสูงและแม็กซ์ความสูงขององค์ประกอบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าความสูงขั้นต่ำและมีความสูงสูงสุดขององค์ประกอบการใช้ค่าพิกเซล

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 »

คุณสมบัติทั้งหมด CSS มิติ