การไหลของเอกสาร CSS และองค์ประกอบระดับบล็อก (บล็อก) และองค์ประกอบแบบอินไลน์ (อินไลน์) ฉันเคยอ่านหนังสือหลายเล่มและอ่านบทความมากมายมาก่อน สิ่งที่ฉันได้เห็นคือความรู้พื้นฐานที่ไม่เป็นชิ้นเป็นอันเกี่ยวกับเค้าโครง CSS ซึ่งค่อนข้างผิวเผิน ' The Definitive Guide to CSS' ของ Reilly ฉันพบว่าแนวคิดเรื่องการไหลของเอกสารที่กล่าวถึงทำให้ฉันละเอียดอ่อนมาก น่าเสียดายที่หนังสือเล่มนี้ไม่ได้อธิบายว่าการไหลของเอกสารคืออะไร แต่ฉันคิดว่าแนวคิดนี้สำคัญมาก หลังจากที่เข้าใจแล้ว ทฤษฎีเค้าโครง CSS หลายอย่างก็เข้าใจได้ง่าย และฉันก็ตระหนักถึงเหตุผลของการออกแบบ CSS จากการคาดเดาและการทดลองของฉัน มีข้อผิดพลาดเกิดขึ้นเป็นเรื่องปกติ
Document Flow แบ่งแบบฟอร์มออกเป็นแถวจากบนลงล่างและจัดเรียงองค์ประกอบในแต่ละแถวจากซ้ายไปขวาซึ่งเป็นการไหลของเอกสาร
องค์ประกอบระดับบล็อกที่ไม่ลอยแต่ละตัวจะครอบครองบรรทัดของตัวเอง และองค์ประกอบแบบลอยจะลอยอยู่ที่ปลายด้านหนึ่งของบรรทัดตามต้องการ หากบรรทัดปัจจุบันไม่พอดี ก็จะลอยอยู่บนบรรทัดใหม่
องค์ประกอบแบบอินไลน์จะไม่ครอบครองแถว องค์ประกอบเกือบทั้งหมด (รวมถึงองค์ประกอบระดับบล็อก, อินไลน์ และรายการ) สามารถสร้างแถวย่อยสำหรับการวางองค์ประกอบย่อย
มีสามสถานการณ์ที่จะทำให้องค์ประกอบมีอยู่นอกโฟลว์เอกสาร ได้แก่ ลอยตำแหน่งที่แน่นอนและตำแหน่งคงที่ แต่ใน IE องค์ประกอบลอยก็มีอยู่ในโฟลว์เอกสารด้วย (ซึ่งทำให้ฉันคิดว่านี่สมเหตุสมผล><)
องค์ประกอบแบบลอยไม่ได้ใช้พื้นที่การไหลของเอกสารตามปกติ และการวางตำแหน่งขององค์ประกอบแบบลอยยังคงขึ้นอยู่กับการไหลของเอกสารปกติ จากนั้นจึงแยกออกจากการไหลของเอกสารและย้ายไปทางซ้ายหรือขวาให้ไกลที่สุด เนื้อหาข้อความจะถูกพันรอบองค์ประกอบแบบลอย เมื่อองค์ประกอบถูกแยกออกจากโฟลว์เอกสารปกติ องค์ประกอบอื่นๆ ที่ยังคงอยู่ในโฟลว์เอกสารจะไม่สนใจองค์ประกอบนั้นและเติมเต็มพื้นที่เดิม
แนวคิดที่น่าสับสนของการลอยตัวนั้นเกิดจากการตีความทฤษฎีของเบราว์เซอร์ พูดได้แค่ว่าหลายคนใช้ IE เป็นมาตรฐาน แต่จริงๆ แล้วไม่ใช่เลย
จากการไหลของเอกสาร เราสามารถเข้าใจรูปแบบการวางตำแหน่งต่อไปนี้ได้อย่างง่ายดาย:
การวางตำแหน่งสัมพัทธ์ กล่าวคือ ออฟเซ็ตสัมพันธ์กับตำแหน่งขององค์ประกอบในโฟลว์เอกสาร แต่คงตัวยึดตำแหน่งเดิมไว้
การวางตำแหน่งที่แน่นอน ซึ่งก็คือ อยู่นอกการไหลของเอกสารโดยสิ้นเชิง การวางตำแหน่งออฟเซ็ตและคงที่สัมพันธ์กับองค์ประกอบพาเรนต์ที่ใกล้ที่สุดด้วยค่าที่ไม่คงที่ของแอตทริบิวต์ตำแหน่ง นั่นคือ การวางตำแหน่งที่อยู่นอกการไหลของเอกสารโดยสมบูรณ์ ออฟเซ็ตสัมพันธ์กับ วิวพอร์ต
ยังมีคำถามสองสามข้อที่ฉันต้องจัดการ ฉันไม่เข้าใจ
1. อะไรคือความแตกต่างที่สำคัญระหว่างองค์ประกอบแบบอินไลน์และองค์ประกอบระดับบล็อก
ที่
แอตทริบิวต์ Clear ใช้ค่าที่ถูกต้อง ดูเหมือนว่าสถานการณ์การทดลองจะไม่สอดคล้องกับทฤษฎีเสมอไป
องค์ประกอบระดับบล็อกคืออะไร
ข้อความภาษาจีน "CSS Definitive Guide" แสดงให้เห็นว่า: องค์ประกอบใดๆ ที่มองเห็นได้ซึ่งไม่ใช่องค์ประกอบระดับบล็อกจะเป็นองค์ประกอบในบรรทัด ลักษณะของประสิทธิภาพคือรูปแบบของ "เค้าโครงแถว" ในที่นี้หมายความว่ารูปแบบการแสดงออกจะแสดงเป็นแถวเสมอ ตัวอย่างเช่น เมื่อเราตั้งค่าองค์ประกอบแบบอินไลน์ border-bottom:1px solid #000; องค์ประกอบดังกล่าวจะถูกทำซ้ำในแต่ละแถว และจะมีเส้นสีดำบางๆ อยู่ใต้แต่ละแถว หากเป็นองค์ประกอบระดับบล็อก เส้นสีดำที่แสดงจะปรากฏใต้บล็อกเท่านั้น
องค์ประกอบเช่น p, h1 หรือ div มักเรียกว่าองค์ประกอบระดับบล็อก และองค์ประกอบเหล่านี้จะแสดงเป็นบล็อกของเนื้อหา องค์ประกอบเช่น Strong และ span เรียกว่าองค์ประกอบแบบอินไลน์ และเนื้อหาจะแสดงในบรรทัด กล่าวคือ , "กล่องอินไลน์" (คุณสามารถใช้ display=block เพื่อแปลงองค์ประกอบแบบอินไลน์เป็นองค์ประกอบบล็อกได้ display=none หมายความว่าองค์ประกอบที่สร้างขึ้นไม่มีกรอบเลย ไม่แสดงองค์ประกอบหรือใช้พื้นที่ในเอกสาร)
ตอบ: องค์ประกอบแบบอินไลน์เป็นองค์ประกอบภายในแถวและสามารถวางได้ภายในบรรทัดเท่านั้น องค์ประกอบระดับบล็อกเป็นเพียงกล่องสี่เหลี่ยมจัตุรัสและสามารถวางไว้ที่ใดก็ได้บนหน้า
B: หากพูดตรงๆ องค์ประกอบแบบอินไลน์ก็เหมือนกับคำ ส่วนองค์ประกอบระดับบล็อกก็เหมือนกับย่อหน้า หากไม่ได้กำหนดไว้เป็นอย่างอื่น องค์ประกอบนั้นจะปรากฏในบรรทัดของมันเอง
C: องค์ประกอบระดับบล็อกทั่วไป เช่น ย่อหน้า <p>, ชื่อ <h1><h2>..., รายการ, <ul><ol><li>, ตาราง <table>, แบบฟอร์ม <form>, DIV<div > และ BODY <body> และองค์ประกอบอื่นๆ องค์ประกอบแบบอินไลน์ได้แก่: องค์ประกอบรูปแบบ <input>, ไฮเปอร์ลิงก์ <a>, รูปภาพ <img>, <span>…..
D: คุณลักษณะเด่นขององค์ประกอบระดับบล็อกคือแต่ละองค์ประกอบระดับบล็อกเริ่มแสดงในบรรทัดใหม่และองค์ประกอบที่ตามมาจะต้องแสดงบนบรรทัดใหม่ด้วย
E: <span> เป็นองค์ประกอบแบบอินไลน์ในคำจำกัดความ CSS ในขณะที่ <div> เป็นองค์ประกอบระดับบล็อก
สำหรับผู้ที่เรียน CSS ก็สามารถเข้าใจได้ทันที แต่มันไม่ง่ายสำหรับมือใหม่ที่จะเข้าใจ ดังนั้นฉันอยากจะทำให้มือใหม่คุ้นเคยมากขึ้นเป็นหลัก!
การใช้คำว่า คอนเทนเนอร์ จะทำให้เข้าใจการมีอยู่และจุดประสงค์ได้ง่ายขึ้น <span>เป็นภาชนะขนาดเล็ก วิธีนี้ คุณอาจมีความรู้สึกเบื้องต้นในใจ หากเราต้องการใส่น้ำลงในภาชนะขนาดใหญ่ แต่ถ้าฉันต้องการใส่หมึกลงไปด้วยล่ะ? ง่ายมาก เรานำภาชนะขนาดเล็กออกมาเติมหมึกแล้วใส่ลงในน้ำสะอาดในภาชนะขนาดใหญ่
ผมขอยกตัวอย่างง่ายๆ ที่นำไปใช้ได้จริง: ตัวอย่างเช่น <div>ฉันชอบ CSS - 52CSS.com</div>
ฉันต้องการจัดสไตล์ตัวอักษร c โดยใช้ CSS เพื่อให้เราสามารถใช้ <span> ได้
<div>ฉันชอบ CSS - <span>52CSS.com</span> มาตรฐาน W3C</div>
องค์ประกอบบล็อกโดยทั่วไปเป็นองค์ประกอบคอนเทนเนอร์สำหรับองค์ประกอบอื่น ๆ โดยทั่วไปองค์ประกอบบล็อกจะเริ่มต้นในบรรทัดใหม่ มันสามารถรองรับองค์ประกอบแบบอินไลน์และองค์ประกอบบล็อกอื่น ๆ ได้ องค์ประกอบบล็อกทั่วไปคือแท็กย่อหน้า 'P' องค์ประกอบบล็อกคือ ค่อนข้างพิเศษ สามารถใช้เพื่อเก็บองค์ประกอบบล็อกอื่น ๆ เท่านั้น
หากไม่ได้รับความช่วยเหลือจาก CSS องค์ประกอบบล็อกจะถูกจัดเรียงทีละแถว ด้วย CSS เราสามารถเปลี่ยนโหมดเค้าโครงเริ่มต้นของ HTML นี้ และวางองค์ประกอบบล็อกในตำแหน่งที่คุณต้องการ แทนที่จะขึ้นบรรทัดใหม่อย่างโง่เขลาทุกครั้ง ควรชี้ให้เห็นว่าแท็กตารางยังเป็นองค์ประกอบประเภทบล็อกอีกด้วย ความเร็วในการโหลดหน้าเว็บไม่มีความแตกต่างอื่นใด อย่างไรก็ตาม หากผู้ใช้ทั่วไปคลิกปุ่มดูซอร์สโค้ดของหน้าโดยไม่ตั้งใจ ความแตกต่างระหว่างทั้งสองจะมีขนาดใหญ่มาก ซอร์สโค้ดหน้าโครงร่าง CSS ได้รับการออกแบบตามแนวคิดการสร้างใหม่ที่ดี อย่างน้อยก็ช่วยให้ผู้ใช้ทั่วไปที่ไม่มีประสบการณ์ในการพัฒนาเว็บสามารถเข้าใจเนื้อหาได้อย่างรวดเร็ว จากมุมมองนี้ โค้ดเค้าโครง CSS ควรมีประสบการณ์ด้านสุนทรียภาพที่ดีกว่า
คุณสามารถนึกถึง div องค์ประกอบคอนเทนเนอร์ของบล็อกเป็นกล่อง หรือถ้าคุณเล่นโดยใช้การตัดก็จะเข้าใจง่ายกว่า ก่อนอื่นเราตัดบทความที่จำเป็นออกจากหนังสือพิมพ์และนิตยสารต่างๆ เนื้อหาที่ตัดแต่ละชิ้นเป็นบล็อก จากนั้นเราก็ติดกระดาษเหล่านี้ลงบนกระดาษเปล่าแผ่นใหม่ตามความตั้งใจในการจัดวางของเรา สิ่งนี้จะสร้างนามธรรมที่เป็นเอกลักษณ์ของคุณเอง เนื่องจากเป็นส่วนขยายของเทคโนโลยี การออกแบบเลย์เอาต์ของเว็บจึงมีรูปแบบเดียวกัน
อินไลน์
จะขึ้นอยู่กับองค์ประกอบพื้นฐานในระดับความหมาย องค์ประกอบอินไลน์สามารถเก็บข้อความหรือองค์ประกอบอินไลน์อื่นๆ เท่านั้น และองค์ประกอบอินไลน์ทั่วไป "a" คือ
องค์ประกอบบล็อก (องค์ประกอบบล็อก) และองค์ประกอบแบบอินไลน์ (องค์ประกอบอินไลน์) เป็นแนวคิดในข้อกำหนด HTML ความแตกต่างพื้นฐานระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์คือองค์ประกอบบล็อกโดยทั่วไปจะเริ่มต้นด้วยบรรทัดใหม่ เมื่อเพิ่มการควบคุม CSS ความแตกต่างของแอตทริบิวต์ระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์จะไม่แตกต่างกันอีกต่อไป ตัวอย่างเช่น เราสามารถเพิ่มแอตทริบิวต์ เช่น display:block ให้กับการอ้างอิงองค์ประกอบแบบอินไลน์ เพื่อให้มีแอตทริบิวต์เริ่มต้นจากบรรทัดใหม่ทุกครั้ง
แนวคิดพื้นฐานขององค์ประกอบที่ไม่แน่นอนคือต้องพิจารณาว่าองค์ประกอบนั้นเป็นองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ตามบริบท องค์ประกอบตัวแปรยังคงเป็นขององค์ประกอบสองหมวดหมู่ข้างต้น เมื่อบริบทกำหนดหมวดหมู่แล้ว จะต้องเป็นไปตามกฎขององค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ ดูข้อความฉบับเต็มสำหรับการจำแนกองค์ประกอบคร่าวๆ
เกี่ยวกับชื่อภาษาจีนขององค์ประกอบอินไลน์ มีองค์ประกอบอินไลน์ องค์ประกอบอินไลน์ องค์ประกอบอินไลน์ และองค์ประกอบอินไลน์หลายประเภท โดยพื้นฐานแล้วไม่มีการแปลแบบครบวงจร เพียงแค่เรียกมันตามที่คุณต้องการ นอกจากนี้ เมื่อพูดถึงองค์ประกอบแบบอินไลน์ เราจะนึกถึงแอตทริบิวต์การแสดงผลที่เรียกว่า display:inline คุณลักษณะนี้สามารถแก้ไขปัญหาขอบลอยคู่ของ IE ที่มีชื่อเสียงได้
องค์ประกอบบล็อก
* ที่อยู่ - ที่อยู่ * blockquote - การอ้างอิงบล็อก * กึ่งกลาง - บล็อกการจัดตำแหน่ง * dir - รายการไดเร็กทอรี * div - ระดับบล็อกที่ใช้กันทั่วไปและยังเป็นป้ายกำกับหลักของเค้าโครง CSS * dl - รายการคำจำกัดความ * fieldset - กลุ่มควบคุมแบบฟอร์ม * แบบฟอร์ม - แบบฟอร์มการโต้ตอบ * h1 - ส่วนหัว * h2 - คำบรรยาย * h3 - ส่วนหัวระดับ 3 * h4 - ส่วนหัวระดับ 4 * h5 - ส่วนหัวระดับ 5 * h6 - ส่วนหัวระดับ 6 * hr - เส้นแบ่งแนวนอน * isindex - พรอมต์อินพุต
* เมนู - รายการเมนู * noframes - เฟรมเนื้อหาเสริม (เนื้อหาบล็อกนี้จะแสดงสำหรับเบราว์เซอร์ที่ไม่รองรับเฟรม) * noscript - เนื้อหาสคริปต์เสริม (เนื้อหานี้จะแสดงสำหรับเบราว์เซอร์ที่ไม่รองรับสคริปต์)
* ol - แบบฟอร์มที่เรียงลำดับ * p - ย่อหน้า * ข้อความที่จัดรูปแบบล่วงหน้า * ตาราง - ตาราง * ul - องค์ประกอบอินไลน์รายการที่ไม่เรียงลำดับ
(องค์ประกอบอินไลน์)
* a - จุดยึด * abbr - ตัวย่อ * ตัวย่อ - คำแรก * b - ตัวหนา (ไม่แนะนำ)
* bdo - แทนที่ bidi
* ใหญ่ - แบบอักษรขนาดใหญ่ * br - ตัวแบ่งบรรทัด * อ้างอิง - เครื่องหมายคำพูด * รหัส - รหัสคอมพิวเตอร์ (จำเป็นเมื่ออ้างถึงซอร์สโค้ด)
* dfn - กำหนดฟิลด์ * em - เน้น * แบบอักษร - การตั้งค่าแบบอักษร (ไม่แนะนำ)
* i - ตัวเอียง * img - รูปภาพ * อินพุต - กล่องอินพุต * kbd - กำหนดข้อความแป้นพิมพ์ * ป้ายกำกับ - ป้ายกำกับตาราง * q - เครื่องหมายคำพูดสั้น * s - ขีดเส้นใต้ (ไม่แนะนำ)
* samp - กำหนดรหัสคอมพิวเตอร์ตัวอย่าง * เลือก - การเลือกรายการ * ขนาดเล็ก - ข้อความแบบอักษรขนาดเล็ก * span - คอนเทนเนอร์แบบอินไลน์ที่ใช้กันทั่วไปกำหนดบล็อกภายในข้อความ * ขีดฆ่า - ขีดเส้นใต้ * แข็งแกร่ง - เน้นตัวหนา * ย่อย - ตัวห้อย * sup - ตัวยก * textarea - กล่องป้อนข้อความหลายบรรทัด * tt - ข้อความโทรพิมพ์ * u - ขีดเส้นใต้ * var - กำหนดตัวแปร องค์ประกอบ
ตัวแปร องค์ประกอบตัวแปรกำหนดว่าองค์ประกอบนั้นเป็นองค์ประกอบบล็อกหรือองค์ประกอบอินไลน์ตามบริบท
* แอปเพล็ต - แอปเพล็ต Java
ปุ่ม * - ปุ่ม * del - ลบข้อความ * iframe - เฟรมอินไลน์
* ins - ข้อความที่แทรก * แผนที่ - บล็อกรูปภาพ (แผนที่)
* วัตถุ - วัตถุวัตถุ * สคริปต์ - สคริปต์ไคลเอนต์