1. รูปแบบหน้าเว็บแบบดั้งเดิมสามวิธี
สาระสำคัญของการจัดวางหน้าเว็บ: ใช้ CSS เพื่อวางกล่องและวางกล่องในตำแหน่งที่เกี่ยวข้อง
CSS มีวิธีการจัดวางแบบดั้งเดิมสามวิธี (พูดง่ายๆ ก็คือ วิธีจัดเรียงกล่อง)
(1) กระแสสามัญ (กระแสมาตรฐาน)
(2) ลอยตัว
(3) การวางตำแหน่ง
นี่หมายถึงเฉพาะเลย์เอาต์แบบดั้งเดิมเท่านั้น อันที่จริงมีวิธีการจัดวางแบบพิเศษและขั้นสูงบางอย่าง
2. สตรีมมาตรฐาน (สตรีมปกติ/สตรีมเอกสาร)
สิ่งที่เรียกว่าโฟลว์มาตรฐาน: แท็กจะถูกจัดเรียงตามค่าเริ่มต้นที่กำหนดไว้
(1) องค์ประกอบระดับบล็อกจะครอบครองเส้นพิเศษและจัดเรียงตามลำดับจากบนลงล่าง
(2) องค์ประกอบแบบอินไลน์จะถูกจัดเรียงตามลำดับจากซ้ายไปขวา และจะตัดโดยอัตโนมัติเมื่อกระทบกับขอบขององค์ประกอบหลัก
ข้างต้นคือเค้าโครงโฟลว์มาตรฐานทั้งหมด สิ่งที่เราศึกษาก่อนหน้านี้คือโฟลว์มาตรฐานเป็นวิธีเค้าโครงพื้นฐานที่สุด
วิธีการจัดวางทั้งสามวิธีนี้ใช้ในการวางกล่อง เมื่อวางกล่องในตำแหน่งที่เหมาะสม เค้าโครงจะเสร็จสมบูรณ์ตามธรรมชาติ
หมายเหตุ: ในการพัฒนาจริง โดยทั่วไปเพจจะมีวิธีการจัดวางทั้งสามวิธีเหล่านี้ (เทอร์มินัลมือถือจะเรียนรู้วิธีการจัดวางใหม่ในภายหลัง)
3. เหตุใดจึงต้องลอยน้ำ?
คำถาม: เราสามารถบรรลุผลต่อไปนี้ได้อย่างง่ายดายโดยใช้สตรีมมาตรฐานหรือไม่
1. จะจัดเรียงกล่องระดับบล็อก (div) หลายกล่องในแนวนอนได้อย่างไร?
แม้ว่าการแปลงเป็นองค์ประกอบบล็อกอินไลน์สามารถบรรลุแถวของการแสดงผลได้ จะมีช่องว่างขนาดใหญ่ระหว่างองค์ประกอบเหล่านั้น ซึ่งควบคุมได้ยาก
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< หัวเรื่อง>บล็อกแบบอินไลน์ มีช่องว่างระหว่าง</title><style>div{width:150px;height:200px;พื้นหลัง-สี:#d87093;display:inline-block;}</style></head><body><div> 1< /div><div>2</div><div>3</div></body></html>ผลการวิ่ง:
2. จะจัดสองกล่องไปทางซ้ายและขวาได้อย่างไร?
มีเอฟเฟกต์ โครงร่าง มากมาย ที่ไม่สามารถทำได้ตามโฟลว์มาตรฐาน ในขณะนี้ สามารถใช้แบบลอยเพื่อทำให้โครงร่างเสร็จสมบูรณ์ได้ เนื่องจากการลอยตัวสามารถเปลี่ยนการจัดเรียงเริ่มต้นของป้ายกำกับองค์ประกอบได้
การใช้งานแบบลอยตัวโดยทั่วไป: อนุญาตให้องค์ประกอบระดับบล็อกหลายรายการสามารถแสดงเป็นแถวได้
กฎข้อแรกของการจัดวางหน้าเว็บ: องค์ประกอบระดับบล็อกหลายรายการที่ถูกจัดเรียงในแนวตั้งจะมองหาโฟลว์มาตรฐาน องค์ประกอบระดับบล็อกหลายรายการที่จัดเรียงในแนวนอนจะมองหาโฟลว์!
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< หัวเรื่อง>มากมาย องค์ประกอบระดับบล็อกจะถูกจัดเรียงในแนวนอนและลอย</title><style>div{float:left;width:150px;height:200px;พื้นหลัง-สี:#d87093;}</style></head><body>< div >1</div><div>2</div><div>3</div></body></html>ผลการวิ่ง:
4. อะไรลอยอยู่?
คุณสมบัติ float ใช้เพื่อสร้างกล่องลอย โดยเลื่อนไปทางด้านข้างจนกระทั่งขอบซ้ายหรือขวาแตะขอบของบล็อกที่มีหรือกล่องลอยอื่น
ไวยากรณ์:
ตัวเลือก {float: ค่าแอตทริบิวต์;}ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width, Initial-scale=1.0><title>เอกสาร</title><style>/*ป้ายกำกับแบบลอยอยู่ชิดด้านบน*//*ลอย: จัดเรียงเป็นหนึ่งบรรทัด ความกว้างและความสูงมีผล - ป้ายกำกับแบบลอยมีลักษณะแบบอินไลน์ บล็อก*/.one{ความกว้าง:100px;ความสูง:100px;พื้นหลัง-colo r:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;พื้นหลัง-สี:skyblue;float:left;/*เนื่องจากมีทศนิยม จึงไม่สามารถมีผลได้ - กล่อง ไม่สามารถจัดกึ่งกลางแนวนอนได้* /margin:0auto; }.three{width:300px;height:300px;พื้นหลัง-สี:orange;}</style></head><body><div>หนึ่ง</div><div>สอง</div><div>สาม </div></body></html>ผลการวิ่ง:
