จัดระเบียบบันทึกการศึกษารายวันในรูปแบบการออกแบบ HTML

ไม่มีโครงการทำในสัปดาห์นี้และฉันได้ศึกษารูปแบบการออกแบบ HTML ฉันจะจัดระเบียบและแบ่งปันผลการเรียนรู้ของฉันในสัปดาห์นี้สำหรับการอ้างอิงของคุณ

บันทึกการเรียนรู้รูปแบบการออกแบบ HTML

สัปดาห์นี้ฉันได้เรียนรู้รูปแบบการออกแบบ HTML เป็นหลักและตอนนี้ฉันจะสรุปเนื้อหาการเรียนรู้ของฉันดังนี้:

หนึ่ง. การเรียนรู้โมเดลกล่อง

มีรูปแบบการออกแบบพื้นฐานใน CSS ที่เรียกว่าโมเดลกล่องซึ่งกำหนดวิธีการแยกวิเคราะห์องค์ประกอบเป็นกล่อง ฉันได้เรียนรู้โมเดลกล่องหกประเภทคือโมเดลกล่องแบบอินไลน์โมเดลกล่องแบบอินไลน์บล็อกโมเดลกล่องบล็อกโมเดลกล่องตารางโมเดลกล่องสัมบูรณ์และโมเดลกล่องวางตำแหน่งลอยตัว

รูปแบบการออกแบบโมเดลกล่องถูกสร้างขึ้นใน CSS ซึ่งกำหนดความสัมพันธ์ระหว่างคุณสมบัติต่อไปนี้: ขอบเขต, เส้นขอบ, การเติมและเนื้อหา แต่ละแอตทริบิวต์ประกอบด้วยสี่ส่วน: บนขวาล่างและซ้าย; สี่ส่วนเหล่านี้สามารถตั้งค่าในเวลาเดียวกันหรือแยกกัน; เส้นขอบสามารถแบ่งออกเป็นขนาดและสี เราสามารถเข้าใจได้ว่ามันเป็นความหนาของกล่องที่เห็นในชีวิตและสีอะไรที่ทำจากกล่อง ขอบเขตคือวิธีที่กล่องควรเก็บไว้จากสิ่งอื่น ๆ เนื้อหาคือสิ่งที่มีอยู่ในกล่องและวัสดุที่กรอกไว้ในชิ้นส่วนอะไหล่ในกล่องไส้

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