พอดแคสต์ CSS - 009: เลย์เอาต์
สมมติว่าคุณทำงานเป็นนักพัฒนาซอฟต์แวร์ และเพื่อนร่วมงานดีไซเนอร์ได้ ออกแบบเว็บไซต์ใหม่ให้คุณ การออกแบบมีเลย์เอาต์และองค์ประกอบที่น่าสนใจทุกประเภท: เลย์เอาต์ 2 มิติที่คำนึงถึงความกว้างและความสูงของวิวพอร์ต รวมถึงเลย์เอาต์ที่ต้องใช้งานได้ ลื่นไหลและยืดหยุ่น คุณจะตัดสินใจเลือกวิธีที่ดีที่สุดในการจัดรูปแบบด้วย CSS อย่างไร
CSS มอบวิธีที่หลากหลาย ในการแก้ปัญหาเลย์เอาต์ บนแกนแนวนอน แกนแนวตั้ง หรือทั้งคู่ การเลือกวิธีการจัดวางที่เหมาะสมกับบริบทอาจเป็นเรื่องยาก และบ่อยครั้งคุณอาจต้องใช้เลย์เอาต์มากกว่า 1 วิธีเพื่อแก้ปัญหา เพื่อเป็นการช่วยเหลือในเรื่องนี้ ในโมดูลต่อไปนี้ คุณจะได้เรียนรู้เกี่ยวกับฟีเจอร์เฉพาะของกลไกการออกแบบ CSS แต่ละแบบเพื่อประกอบการตัดสินใจ
เลย์เอาต์: ประวัติโดยย่อ
ในช่วงแรกๆ ที่เข้าสู่เว็บ
การออกแบบที่ซับซ้อนกว่าการจัดวางเอกสารธรรมดาด้วยองค์ประกอบ <table>
การแยก HTML ออกจากสไตล์ภาพทำได้ง่ายขึ้นเมื่อเบราว์เซอร์มีการใช้ CSS อย่างแพร่หลายในช่วงปลายยุค 90
CSS เปิดประตูสู่การที่นักพัฒนาซอฟต์แวร์สามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์อย่างสิ้นเชิงได้โดยไม่ต้องใช้ HTML เลย
ความสามารถใหม่นี้สร้างแรงบันดาลใจให้โครงการต่างๆ เช่น The CSS Zen Garden
ซึ่งสร้างขึ้นเพื่อแสดงให้เห็นถึงความสามารถของ CSS ในการกระตุ้นให้นักพัฒนาซอฟต์แวร์จำนวนมากขึ้นเรียนรู้
CSS ได้รับการพัฒนาเนื่องจากความต้องการของเราในการออกแบบเว็บและเทคโนโลยีเบราว์เซอร์ได้เปลี่ยนแปลงไป คุณอ่านได้ว่าเลย์เอาต์ CSS และแนวทางเลย์เอาต์ของเราพัฒนาไปอย่างไรในช่วงเวลาที่ผ่านมา บทความนี้โดย Rachel Andrew
เลย์เอาต์: ปัจจุบันและอนาคต
CSS สมัยใหม่มีเครื่องมือเลย์เอาต์ที่มีประสิทธิภาพเป็นพิเศษ เรามีระบบเฉพาะสำหรับการจัดวางและเราจะดูภาพรวมทุกอย่างที่เรามี ก่อนที่จะเจาะลึกรายละเอียดเพิ่มเติมของ Flexbox และ Grid ในโมดูลถัดไป
ทำความเข้าใจพร็อพเพอร์ตี้ display
พร็อพเพอร์ตี้ display มี 2 อย่าง
สิ่งแรกที่จะทำคือระบุว่าช่องจะถูกใช้ให้ทำหน้าที่เป็นอินไลน์หรือบล็อก
.my-element {
display: inline;
}
องค์ประกอบในบรรทัดมีลักษณะการทำงานเหมือนคำในประโยค
โดยนั่งเรียงติดกันโดยตลอดแนว
องค์ประกอบ เช่น <span> และ <strong>,
ซึ่งโดยทั่วไปแล้วจะใช้จัดรูปแบบข้อความภายในองค์ประกอบต่างๆ เช่น <p> (ย่อหน้า)
อยู่ในบรรทัดโดยค่าเริ่มต้น
และยังเก็บช่องว่างโดยรอบเอาไว้ด้วย