การไหลของเอกสาร CSS องค์ประกอบระดับบล็อก (บล็อก) และองค์ประกอบแบบอินไลน์ (อินไลน์) ฉันเคยอ่านหนังสือหลายเล่มและอ่านบทความมากมายมาก่อน สิ่งที่ฉันได้เห็นคือความรู้พื้นฐานที่ไม่เป็นชิ้นเป็นอันเกี่ยวกับเค้าโครง CSS ซึ่งค่อนข้างผิวเผิน โอ ไรลีย์ ฉันพบว่าแนวคิดเรื่องการไหลของเอกสารที่กล่าวถึงในนั้นทำให้ฉันละเอียดอ่อนมาก น่าเสียดายที่หนังสือเล่มนี้ไม่ได้อธิบายว่าผังเอกสารคืออะไร มันสำคัญมาก หลังจากที่เข้าใจแล้ว ทฤษฎีเค้าโครง CSS มากมายก็เข้าใจได้ง่าย และฉันก็ตระหนักถึงเหตุผลของการออกแบบ CSS ดังนั้นฉันจึงใช้การคาดเดาและการทดลองเพื่อหาคำอธิบาย หากมีข้อผิดพลาดใดๆ ก็เป็นเรื่องปกติ .
การไหลของเอกสาร
แบ่งแบบฟอร์มออกเป็นแถวจากบนลงล่าง และจัดเรียงองค์ประกอบในแต่ละแถวจากซ้ายไปขวา ซึ่งเป็นการไหลของเอกสาร
องค์ประกอบระดับบล็อกที่ไม่ลอยแต่ละตัวจะครอบครองบรรทัดของตัวเอง และองค์ประกอบแบบลอยจะลอยอยู่ที่ปลายด้านหนึ่งของบรรทัดตามต้องการ หากบรรทัดปัจจุบันไม่พอดี ก็จะลอยอยู่บนบรรทัดใหม่
องค์ประกอบแบบอินไลน์จะไม่ครอบครองแถว องค์ประกอบเกือบทั้งหมด (รวมถึงองค์ประกอบระดับบล็อก, อินไลน์ และรายการ) สามารถสร้างแถวย่อยสำหรับการวางองค์ประกอบย่อย
มีสามสถานการณ์ที่จะทำให้องค์ประกอบมีอยู่นอกโฟลว์เอกสาร ได้แก่ ลอยตำแหน่งที่แน่นอนและตำแหน่งคงที่ แต่ใน IE องค์ประกอบลอยก็มีอยู่ในโฟลว์เอกสารด้วย (ซึ่งทำให้ฉันคิดว่านี่สมเหตุสมผล><)
องค์ประกอบแบบลอยไม่ได้ใช้พื้นที่การไหลของเอกสารตามปกติ และการวางตำแหน่งขององค์ประกอบแบบลอยยังคงขึ้นอยู่กับการไหลของเอกสารปกติ จากนั้นจึงแยกออกจากการไหลของเอกสารและย้ายไปทางซ้ายหรือขวาให้ไกลที่สุด เนื้อหาข้อความจะถูกพันรอบองค์ประกอบแบบลอย เมื่อองค์ประกอบถูกแยกออกจากโฟลว์เอกสารปกติ องค์ประกอบอื่นๆ ที่ยังคงอยู่ในโฟลว์เอกสารจะไม่สนใจองค์ประกอบนั้นและเติมเต็มพื้นที่เดิม
แนวคิดที่น่าสับสนของการลอยตัวนั้นเกิดจากการตีความทฤษฎีของเบราว์เซอร์ พูดได้แค่ว่าหลายคนใช้ IE เป็นมาตรฐาน แต่จริงๆ แล้วไม่ใช่เลย
จากการไหลของเอกสาร เราสามารถเข้าใจรูปแบบการวางตำแหน่งต่อไปนี้ได้อย่างง่ายดาย:
ตำแหน่งสัมพัทธ์
นั่นคือองค์ประกอบจะถูกชดเชยโดยสัมพันธ์กับตำแหน่งในโฟลว์เอกสาร แต่ตัวยึดตำแหน่งเดิมจะยังคงอยู่
ตำแหน่งที่แน่นอน
นั่นคือ มันถูกแยกออกจากโฟลว์เอกสารโดยสิ้นเชิง และออฟเซ็ตสัมพันธ์กับองค์ประกอบพาเรนต์ที่ใกล้ที่สุดด้วยค่าที่ไม่คงที่ของแอตทริบิวต์ตำแหน่ง
ตำแหน่งคงที่
นั่นคือมันถูกแยกออกจากโฟลว์เอกสารและออฟเซ็ตโดยสมบูรณ์โดยสัมพันธ์กับวิวพอร์ต
มีคำถามอีกสองสามข้อที่ฉันไม่สามารถเข้าใจได้
ในฐานะที่เป็นหนึ่งในสามองค์ประกอบพื้นฐาน อะไรคือความแตกต่างที่สำคัญระหว่างองค์ประกอบแบบอินไลน์และองค์ประกอบระดับบล็อก?
คุณจะเข้าใจได้อย่างไรเมื่อคุณสมบัติ Clear ใช้ค่าที่ถูกต้อง ดูเหมือนว่าสถานการณ์การทดลองจะไม่สอดคล้องกับทฤษฎีเสมอไป