คุณสมบัติขนาด CSS หมายถึงคุณสมบัติความกว้างและความสูงขององค์ประกอบ แม้ว่าจะง่ายมาก แต่ก็เป็นทักษะที่ต้องเชี่ยวชาญ CSS จัดเตรียมแอตทริบิวต์ต่างๆ เช่น width, height, max-width, min-width, max-height และ min-height เพื่อกำหนดความกว้างและความสูงขององค์ประกอบเหล่านี้ เรามาแนะนำสั้นๆ กันที่ด้านล่างนี้
1.ความสูง
(1) ตั้งค่าความสูงขององค์ประกอบ: คุณลักษณะความสูง
ความสูง: คุณสมบัติระบุความสูงขององค์ประกอบ
1 ขอบเขตและวัตถุประสงค์ของการใช้งาน: พื้นที่เนื้อหาเริ่มต้น
วัตถุที่ใช้งานได้: องค์ประกอบทั้งหมด
องค์ประกอบอินไลน์ที่ไม่ถูกแทนที่ คอลัมน์ตาราง กลุ่มคอลัมน์
ขอบเขตการใช้งาน: ตามค่าเริ่มต้น คุณลักษณะนี้จะกำหนดความสูงของพื้นที่เนื้อหา
② เปลี่ยนขอบเขตการใช้งาน:
หากขนาดกล่องถูกตั้งค่าเป็น border-box คุณสมบัตินี้จะกำหนดความสูงของพื้นที่เส้นขอบ
3. ไม่สามารถใช้ได้
องค์ประกอบที่ไม่ได้ถูกแทนที่แบบอินไลน์: คุณลักษณะนี้จะถูกละเว้น
องค์ประกอบอินไลน์: ไม่สามารถกำหนดความสูงได้
④ แทนที่ค่าแอตทริบิวต์
คุณสมบัติ min-height และ max-height จะแทนที่ความสูง
(2) ไวยากรณ์ระดับสูง
ความสูง: อัตโนมัติ | ความยาว |% | สืบทอด;
มีค่าแอตทริบิวต์ทดลอง: [ <length> |. <percentage> ] && [ border-box |
/*ค่าคำหลักKeywordvalue*/height:auto;/*Length value<length>values*/height:120px;height:10em;/*Percentage value<percentage>value*/height:75%;/*Global keyword ValueGlobalvalues*/ ความสูง: สืบทอด; ความสูง: เริ่มต้น; ความสูง: ไม่ได้ตั้งค่า;
2.ความกว้าง
(1) ตั้งค่าความกว้างขององค์ประกอบ: คุณลักษณะ width
1 บริเวณที่ใช้บังคับ
พื้นที่เนื้อหา: ตามค่าเริ่มต้น จะกำหนดความกว้างของพื้นที่เนื้อหา
ไม่รวม: คุณสามารถเพิ่มช่องว่างภายใน เส้นขอบ และระยะขอบนอกพื้นที่เนื้อหาได้
แก้ไขพื้นที่ที่เกี่ยวข้อง: แต่ถ้า box-sizing ถูกตั้งค่าเป็น border-box มันจะกำหนดความกว้างของพื้นที่เส้นขอบ
2 องค์ประกอบที่ใช้งานได้
องค์ประกอบทั้งหมดยกเว้นองค์ประกอบต่อไปนี้
องค์ประกอบที่ไม่เกี่ยวข้อง: องค์ประกอบอินไลน์ที่ไม่ถูกแทนที่ แถวของตาราง และกลุ่มแถว
องค์ประกอบที่ไม่ได้ถูกแทนที่ในบรรทัดจะไม่สนใจแอตทริบิวต์นี้
๓. ปก
คุณสมบัติความกว้างขั้นต่ำและความกว้างสูงสุดอาจแทนที่ความกว้าง
(2) ไวยากรณ์ของความกว้าง
ความกว้าง: อัตโนมัติ | .ความยาว | .
มีค่าแอตทริบิวต์ทดลอง: [ <length> |. <percentage> ] && [ border-box | .
/*ค่าความยาว<ความยาว>ค่า*/ความกว้าง:300px;ความกว้าง:25em;/*ค่าเปอร์เซ็นต์<เปอร์เซ็นต์>ค่า*/ความกว้าง:75%;/*ค่าคำหลัก ค่าคำหลัก*/ความกว้าง:25emborder-box;ความกว้าง:75 % เนื้อหากล่อง ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*ค่าส่วนกลางGlobalvalues*/width:inherit;width:initial;width:unset;
3. ความกว้างสูงสุดและความสูงสูงสุด
คุณลักษณะ max-width และ max-height ใช้เพื่อกำหนดความกว้างสูงสุดและความสูงสูงสุดของพื้นที่เนื้อหาขององค์ประกอบตามลำดับ เมื่อกำหนดคุณสมบัติความกว้างสูงสุดและความสูงสูงสุด ค่าที่แท้จริงของคุณสมบัติความกว้างและความสูงจะน้อยกว่าหรือเท่ากับค่าของคุณสมบัติความกว้างสูงสุดและความสูงสูงสุด โดยไม่คำนึงถึงค่าจริง ค่าคุณสมบัติความกว้างหรือความสูง ค่าตัวเลือกสำหรับคุณสมบัติความกว้างสูงสุดและความสูงสูงสุดมีดังนี้:
ใช้แอตทริบิวต์ความกว้างสูงสุดเป็นตัวอย่าง: (ลักษณะของแอตทริบิวต์ความสูงสูงสุดจะคล้ายกัน)
(1) เมื่อค่าของแอตทริบิวต์ความกว้างสูงสุดน้อยกว่าแอตทริบิวต์ความกว้าง ค่าของแอตทริบิวต์ความกว้างจะถูกกำหนดใหม่ให้เป็นค่าเดียวกันกับแอตทริบิวต์ความกว้างสูงสุด
(2) เมื่อค่าของแอตทริบิวต์ความกว้างสูงสุดมากกว่าความกว้าง คุณลักษณะความกว้างสูงสุดจะถูกละเว้น
(3) เมื่อค่าของแอตทริบิวต์ความกว้างสูงสุดน้อยกว่าความกว้างขั้นต่ำ คุณลักษณะความกว้างสูงสุดจะถูกละเว้น
4.ความกว้างขั้นต่ำและความสูงขั้นต่ำ
แอตทริบิวต์ min-width และ min-height ใช้เพื่อกำหนดความกว้างขั้นต่ำและความสูงขั้นต่ำของพื้นที่เนื้อหาขององค์ประกอบ เมื่อมีการกำหนดแอตทริบิวต์ min-width และ min-height โดยไม่คำนึงถึงค่าที่แท้จริงของแอตทริบิวต์ width หรือ height คุณลักษณะความกว้างและความสูง ค่าจริงจะมากกว่าหรือเท่ากับค่าของคุณสมบัติ min-width และ min-height ค่าทางเลือกสำหรับคุณสมบัติ min-width และ min-height มีดังนี้:
ใช้แอตทริบิวต์ min-width เป็นตัวอย่าง: (แอตทริบิวต์ min-height มีลักษณะคล้ายกัน)
(1) เมื่อค่าของแอตทริบิวต์ min-width น้อยกว่าความกว้าง คุณลักษณะ min-width จะถูกละเว้น
(2) เมื่อค่าของแอตทริบิวต์ min-width มากกว่าความกว้าง ค่าของแอตทริบิวต์ min-width จะถูกกำหนดใหม่ให้เป็นค่าเดียวกันกับแอตทริบิวต์ min-width
(3) เมื่อค่าของแอตทริบิวต์ min-width มากกว่าความกว้างสูงสุด คุณลักษณะความกว้างสูงสุดจะถูกละเว้น