"The Definitive Guide to CSS" ในภาษาจีน: องค์ประกอบใดๆ ที่มองเห็นได้ซึ่งไม่ใช่องค์ประกอบระดับบล็อกจะเป็นองค์ประกอบแบบอินไลน์ ลักษณะของประสิทธิภาพคือรูปแบบของ "เค้าโครงแถว" ในที่นี้หมายความว่ารูปแบบการแสดงออกจะแสดงเป็นแถวเสมอ ตัวอย่างเช่น เมื่อเราตั้งค่าองค์ประกอบแบบอินไลน์ 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> เป็นองค์ประกอบระดับบล็อก
การใช้คำว่า คอนเทนเนอร์ จะทำให้เข้าใจการมีอยู่และจุดประสงค์ได้ง่ายขึ้น <span> เป็นคอนเทนเนอร์ขนาดเล็ก
องค์ประกอบบล็อกโดยทั่วไปเป็นองค์ประกอบคอนเทนเนอร์สำหรับองค์ประกอบอื่น ๆ โดยทั่วไปองค์ประกอบบล็อกจะเริ่มต้นในบรรทัดใหม่ สามารถรองรับองค์ประกอบแบบอินไลน์และองค์ประกอบบล็อกอื่น ๆ ได้ พิเศษสามารถใช้เพื่อบรรจุองค์ประกอบบล็อกอื่น ๆ เท่านั้น
หากไม่ได้รับความช่วยเหลือจาก CSS องค์ประกอบบล็อกจะถูกจัดเรียงทีละแถว ด้วย CSS เราสามารถเปลี่ยนโหมดเค้าโครงเริ่มต้นของ HTML นี้ และวางองค์ประกอบบล็อกในตำแหน่งที่คุณต้องการ แทนที่จะขึ้นบรรทัดใหม่อย่างโง่เขลาทุกครั้ง ควรชี้ให้เห็นว่าแท็กตารางยังเป็นองค์ประกอบประเภทบล็อกอีกด้วย ความเร็วในการโหลดหน้าเว็บไม่มีความแตกต่างอื่นใด อย่างไรก็ตาม หากผู้ใช้ทั่วไปคลิกปุ่มดูซอร์สโค้ดของหน้าโดยไม่ตั้งใจ ความแตกต่างระหว่างทั้งสองจะมีขนาดใหญ่มาก ซอร์สโค้ดหน้าโครงร่าง CSS ได้รับการออกแบบตามแนวคิดการสร้างใหม่ที่ดี อย่างน้อยก็ช่วยให้ผู้ใช้ทั่วไปที่ไม่มีประสบการณ์ในการพัฒนาเว็บสามารถเข้าใจเนื้อหาได้อย่างรวดเร็ว จากมุมมองนี้ โค้ดเค้าโครง CSS ควรมีประสบการณ์ด้านสุนทรียภาพที่ดีกว่า
คุณสามารถนึกถึง div องค์ประกอบคอนเทนเนอร์ของบล็อกเป็นกล่อง หรือถ้าคุณเล่นโดยใช้การตัดก็จะเข้าใจง่ายกว่า ก่อนอื่นเราตัดบทความที่จำเป็นออกจากหนังสือพิมพ์และนิตยสารต่างๆ เนื้อหาที่ตัดแต่ละชิ้นเป็นบล็อก จากนั้นเราก็ติดกระดาษเหล่านี้ลงบนกระดาษเปล่าแผ่นใหม่ตามความตั้งใจในการจัดวางของเรา สิ่งนี้จะสร้างนามธรรมที่เป็นเอกลักษณ์ของคุณเอง เนื่องจากเป็นส่วนขยายของเทคโนโลยี การออกแบบเลย์เอาต์ของเว็บจึงมีรูปแบบเดียวกัน
โดยทั่วไปองค์ประกอบอินไลน์จะขึ้นอยู่กับองค์ประกอบพื้นฐานในระดับความหมาย องค์ประกอบอินไลน์สามารถเก็บข้อความหรือองค์ประกอบอินไลน์อื่นๆ เท่านั้น และองค์ประกอบอินไลน์ทั่วไป "a" คือ
องค์ประกอบบล็อก (องค์ประกอบบล็อก) และองค์ประกอบแบบอินไลน์ (องค์ประกอบอินไลน์) เป็นแนวคิดในข้อกำหนด HTML ความแตกต่างพื้นฐานระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์คือองค์ประกอบบล็อกโดยทั่วไปจะเริ่มต้นด้วยบรรทัดใหม่ เมื่อเพิ่มการควบคุม CSS ความแตกต่างของแอตทริบิวต์ระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์จะไม่แตกต่างกันอีกต่อไป ตัวอย่างเช่น เราสามารถเพิ่มแอตทริบิวต์ เช่น display:block ให้กับการอ้างอิงองค์ประกอบแบบอินไลน์ เพื่อให้มีแอตทริบิวต์เริ่มต้นจากบรรทัดใหม่ทุกครั้ง
แนวคิดพื้นฐานขององค์ประกอบที่ไม่แน่นอนคือต้องพิจารณาว่าองค์ประกอบนั้นเป็นองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ตามบริบท องค์ประกอบตัวแปรยังคงเป็นขององค์ประกอบสองหมวดหมู่ข้างต้น เมื่อบริบทกำหนดหมวดหมู่แล้ว จะต้องเป็นไปตามกฎขององค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ ดูข้อความฉบับเต็มสำหรับการจำแนกองค์ประกอบคร่าวๆ
PS: เกี่ยวกับชื่อภาษาจีนขององค์ประกอบอินไลน์ มีองค์ประกอบอินไลน์ องค์ประกอบอินไลน์ องค์ประกอบอินไลน์ และองค์ประกอบอินไลน์หลายประเภท โดยพื้นฐานแล้วไม่มีการแปลแบบครบวงจร เพียงแค่เรียกมันตามที่คุณต้องการ นอกจากนี้ เมื่อพูดถึงองค์ประกอบแบบอินไลน์ เราจะนึกถึงแอตทริบิวต์การแสดงผลที่เรียกว่า 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 - ตัวแบ่งบรรทัด
*อ้างอิง - อ้างอิง
* code - รหัสคอมพิวเตอร์ (จำเป็นเมื่ออ้างถึงซอร์สโค้ด)
* dfn - กำหนดฟิลด์
*em - เน้น
* แบบอักษร - การตั้งค่าแบบอักษร (ไม่แนะนำ)
* ฉัน - ตัวเอียง
* img - รูปภาพ
* อินพุต - กล่องอินพุต
* kbd - กำหนดข้อความบนแป้นพิมพ์
* ป้ายกำกับ - ป้ายกำกับตาราง
*q - คำพูดสั้น ๆ
* s - ขีดกลาง (ไม่แนะนำ)
* samp - กำหนดโค้ดคอมพิวเตอร์ตัวอย่าง
* เลือก - การเลือกรายการ
* เล็ก - ข้อความตัวอักษรเล็ก
* span - คอนเทนเนอร์แบบอินไลน์ที่ใช้กันทั่วไปเพื่อกำหนดบล็อกภายในข้อความ
* ตี - เส้นกึ่งกลาง
*strong - เน้นตัวหนา
* ย่อย - ตัวห้อย
* sup - ตัวยก
* textarea - กล่องป้อนข้อความหลายบรรทัด
*tt - ข้อความเทเล็กซ์
* คุณ - ขีดเส้นใต้
* var - กำหนดองค์ประกอบตัวแปร - องค์ประกอบตัวแปรคือองค์ประกอบบล็อกหรือองค์ประกอบอินไลน์ขึ้นอยู่กับบริบท
* แอปเพล็ต - แอปเพล็ต Java
ปุ่ม * - ปุ่ม
* del - ลบข้อความ
* iframe - เฟรมอินไลน์
* ins - แทรกข้อความ
* แผนที่ - บล็อกรูปภาพ (แผนที่)
* วัตถุ - วัตถุวัตถุ
* สคริปต์ - สคริปต์ไคลเอนต์
ความนิยม: 26% [?]