ข้อมูลบางส่วนเกี่ยวกับ display & floats css
display เป็นคุณสมบัติ CSS ที่ควบคุมวิธีการแสดงองค์ประกอบบนหน้าเว็บ มีค่าการแสดงผลหลายค่าใน CSS โดยแต่ละค่าจะมีชุดกฎของตัวเองสำหรับวิธีแสดงผลองค์ประกอบ นี่คือตัวอย่างบางส่วน
บล็อก: ค่านี้ทำให้องค์ประกอบใช้ความกว้างทั้งหมดของคอนเทนเนอร์หลักและสร้างบรรทัดใหม่หลังจากนั้น ตัวอย่างขององค์ประกอบระดับบล็อก ได้แก่ < div > และ < p >
อินไลน์: ค่านี้ทำให้องค์ประกอบใช้พื้นที่เพียงเท่าที่จำเป็น และอนุญาตให้องค์ประกอบอื่นๆ นั่งอยู่ข้างๆ ในบรรทัดเดียวกัน ตัวอย่างขององค์ประกอบระดับอินไลน์ ได้แก่ < span > และ < a >
inline-block: ค่านี้คล้ายกับ inline แต่ช่วยให้เราสามารถกำหนดความกว้างและความสูงขององค์ประกอบได้ ทำให้มีความหลากหลายมากขึ้น ตัวอย่างขององค์ประกอบอินไลน์บล็อก ได้แก่ < img > และ < button >
ไม่มี: ค่านี้จะซ่อนองค์ประกอบจากหน้าทั้งหมด
float เป็นอีกหนึ่งคุณสมบัติ CSS ที่ควบคุมเค้าโครงขององค์ประกอบ เมื่อองค์ประกอบถูกลอย องค์ประกอบจะถูกย้ายไปทางซ้ายหรือขวาของคอนเทนเนอร์หลัก และองค์ประกอบอื่นๆ จะได้รับอนุญาตให้ไหลไปรอบๆ องค์ประกอบนั้น นี่คือตัวอย่างวิธีใช้คุณสมบัติ float:
img {
float: left;
margin-right: 10px;
}
ในตัวอย่างนี้ เราได้เลือกองค์ประกอบ < img > ทั้งหมดแล้วลอยไปทางซ้ายของคอนเทนเนอร์หลัก นอกจากนี้เรายังได้เพิ่มระยะขอบ 10 พิกเซลทางด้านขวาของรูปภาพเพื่อสร้างช่องว่างระหว่างรูปภาพกับองค์ประกอบอื่นๆ
สิ่งสำคัญที่ควรทราบคือเมื่อองค์ประกอบลอยอยู่ คอนเทนเนอร์หลักอาจยุบลงหากไม่มีองค์ประกอบอื่นๆ ที่ไม่ลอยอยู่ ในการแก้ไขปัญหานี้ เราสามารถใช้คุณสมบัติ clear เพื่อบังคับให้คอนเทนเนอร์ขยายเพื่อรวมองค์ประกอบลูกทั้งหมดได้ นี่คือตัวอย่าง:
div {
clear: both;
}
ในตัวอย่างนี้ เราได้เลือกองค์ประกอบ
ทั้งหมดและเพิ่ม clear: Both; คุณสมบัติเพื่อบังคับให้คอนเทนเนอร์ล้างองค์ประกอบที่ลอยอยู่และขยายจนเต็มความสูง
โดยรวมแล้ว การแสดงผลและการลอยเป็นคุณสมบัติ CSS ที่สำคัญสำหรับการควบคุมเค้าโครงและตำแหน่งขององค์ประกอบบนหน้าเว็บ
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
