ฉันจำคำถามที่ถามโดยผู้สัมภาษณ์ในระหว่างการสัมภาษณ์งานก่อนหน้านี้: องค์ประกอบในอุตสาหกรรมคืออะไรและอะไรคือความแตกต่างระหว่างพวกเขากับองค์ประกอบระดับบล็อกคืออะไร? นี่เป็นคำถามสัมภาษณ์ขั้นพื้นฐาน แต่ผู้เริ่มต้นหลายคนมักจะมุ่งเน้นไปที่ความหมายของฉลากเท่านั้นและเพิกเฉยต่อลักษณะของป้ายกำกับภายในและระดับบล็อก ดังนั้นจึงเป็นไปได้มากที่คำถามข้างต้นไม่สามารถตอบหรือตอบได้อย่างไม่สมบูรณ์
องค์ประกอบในบรรทัดทั่วไปใน HTML คือ:<span>, <a>, <img>, <put>, <textarea>, <elect>, <darble>
นอกจากนี้ยังมีองค์ประกอบข้อความบางอย่างเช่น: <br>, <b>, <strong>, <up>, <bub>, <i>, <em>, <del>, <u>, ฯลฯ
หากคุณตอบเพียง <pan> และ <img> มันจะไม่มีเหตุผล
องค์ประกอบระดับบล็อกทั่วไปใน HTML คือ:<div>, <table>, <form>, <p>, <ul>,
<H1> ...... <H6>, <Hr>, <pre>, <dront>, <enter>, <Marquee>, <blockquote> ฯลฯ
หากคุณตอบเพียง <div> มันจะไม่มีเหตุผล
แล้วอะไรคือความแตกต่างระหว่างพวกเขา?องค์ประกอบระดับบล็อก
1. เริ่มต้นด้วยบรรทัดใหม่เสมอนั่นคือแต่ละองค์ประกอบระดับบล็อกจะใช้หนึ่งบรรทัดและจัดเรียงในแนวตั้งลงตามค่าเริ่มต้น;
2. ความสูงความกว้างขอบและช่องว่างภายในสามารถควบคุมได้ทั้งหมดพร้อมการตั้งค่าที่มีประสิทธิภาพและผลกระทบที่มีประสิทธิภาพ
3. เมื่อไม่ได้ตั้งค่าความกว้างค่าเริ่มต้นคือ 100%;
4. องค์ประกอบระดับบล็อกสามารถมีองค์ประกอบระดับบล็อกและองค์ประกอบในบรรทัด
·องค์ประกอบในบรรทัด
1. มันอยู่ในบรรทัดเดียวกับองค์ประกอบอื่น ๆ นั่นคือองค์ประกอบในบรรทัดและองค์ประกอบอื่น ๆ ในบรรทัดจะถูกจัดเรียงบนเส้นแนวนอน
2. ความสูงและความกว้างไม่สามารถควบคุมได้และการตั้งค่าไม่ถูกต้องและกำหนดโดยเนื้อหา
การตั้งค่ามาร์จิ้นมีประสิทธิภาพทางซ้ายและขวาโดยมีเอฟเฟกต์มาร์จิ้น
การตั้งค่ามาร์จิ้นจะรองรับพื้นที่ว่างขึ้นและลงจะไม่สร้างเอฟเฟกต์มาร์จิ้น (นั่นคืออัตรากำไรขั้นต้น/ด้านล่างมีค่าในโมเดลกล่อง แต่ไม่มีเอฟเฟกต์มาร์จิ้นบนหน้า)
การตั้งค่าช่องว่างภายในและขวามีประสิทธิภาพ การตั้งค่าการขยายขึ้นและลงจะทำให้พื้นที่มีขนาดใหญ่ขึ้น แต่จะไม่สร้างเอฟเฟกต์มาร์จิ้น (เช่นเดียวกับด้านบน)
เอฟเฟกต์ช่องว่างภายในแสดงดังนี้:
<! doctype html> <html> <head> <meta charset = utf-8> </head> <style> span {border: 1px สีแดงของแข็ง; องค์ประกอบ </div> </body> </html>3. ตามแนวคิดของความหมายของฉลากมันเป็นการดีที่สุดที่จะรวมองค์ประกอบในบรรทัดเท่านั้นและไม่ใช่องค์ประกอบระดับบล็อก
แปลงแน่นอนว่าลักษณะระหว่างองค์ประกอบระดับบล็อกและองค์ประกอบในบรรทัดสามารถแปลงให้กันและกันได้ HTML สามารถแบ่งองค์ประกอบออกเป็นสามประเภท: องค์ประกอบในแถวองค์ประกอบบล็อกและองค์ประกอบบล็อกในแถว
ใช้แอตทริบิวต์การแสดงผลเพื่อแปลงทั้งสามเป็นการแปลงโดยพลการ:
(1) แสดง: อินไลน์; แปลงเป็นองค์ประกอบแบบอินไลน์
(2) แสดง: บล็อก; แปลงเป็นบล็อกองค์ประกอบ;
(3) แสดง: Inline-Block; แปลงเป็นองค์ประกอบบล็อกอินไลน์
องค์ประกอบบล็อกในบรรทัดรวมคุณสมบัติขององค์ประกอบในบรรทัดและองค์ประกอบในบรรทัด:(1) หากการห่อเส้นไม่ได้ถูกห่อหุ้มโดยอัตโนมัติมันจะถูกจัดเรียงบนเส้นแนวนอนกับองค์ประกอบบรรทัดอื่น ๆ
(2) ความสูงความกว้างขอบและช่องว่างภายในสามารถควบคุมได้ทั้งหมดพร้อมการตั้งค่าที่มีประสิทธิภาพและผลกระทบที่มีประสิทธิภาพ
(3) การจัดเรียงเริ่มต้นมาจากซ้ายไปขวา
นี่คือจุดสิ้นสุดของบทความนี้เกี่ยวกับรายละเอียดของความแตกต่างระหว่างองค์ประกอบ HTML และองค์ประกอบระดับบล็อก สำหรับองค์ประกอบ HTML ที่เกี่ยวข้องเพิ่มเติมและองค์ประกอบระดับบล็อกโปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!