การสตรีมเอกสาร CSS, องค์ประกอบระดับบล็อก (บล็อก), องค์ประกอบอินไลน์ (อินไลน์) คู่มือผู้มีอำนาจของ Reilly ของ Reilly> พบว่าแนวคิดของการไหลของเอกสารที่กล่าวถึงทำให้ฉันอ่อนไหวมาก แนวคิดนี้มีความสำคัญมาก หากมีข้อผิดพลาดใด ๆ มันเป็นเรื่องปกติอย่างหมดจด การไหลของเอกสารแบ่งแบบฟอร์มจากบนลงล่างเป็นแถวและองค์ประกอบปลดปล่อยในแต่ละแถวตามลำดับจากซ้ายไปขวาซึ่งเป็นการไหลของเอกสาร มีคำถามอีกสองสามข้อที่ฉันไม่เข้าใจ 1. เป็นองค์ประกอบอินไลน์หนึ่งในสามองค์ประกอบพื้นฐานความแตกต่างหลักระหว่างองค์ประกอบระดับบล็อกคืออะไร? องค์ประกอบอินไลน์หมายถึงอะไร? องค์ประกอบระดับบล็อกคืออะไร ข้อความภาษาจีนของ "คู่มือการอนุญาต CSS" แสดงให้เห็นว่าองค์ประกอบที่มองเห็นได้ซึ่งไม่ใช่องค์ประกอบระดับบล็อกเป็นองค์ประกอบแบบอินไลน์ ลักษณะของการแสดงออกของมันคือรูปแบบของ "เค้าโครงแถว" ตัวอย่างเช่นเมื่อเราตั้งค่าขอบด้านล่างขององค์ประกอบอินไลน์: 1px solid #000;, ซ้ำในแต่ละบรรทัดและจะมีเส้นสีดำบาง ๆ ด้านล่างแต่ละบรรทัด หากเป็นองค์ประกอบระดับบล็อกเส้นสีดำที่แสดงจะปรากฏขึ้นด้านล่างบล็อกเท่านั้น ให้ฉันยกตัวอย่างที่ใช้งานได้ง่าย: ตัวอย่างเช่น <div> ฉันรัก CSS - 52CSS.com </div> องค์ประกอบอินไลน์โดยทั่วไปจะขึ้นอยู่กับองค์ประกอบพื้นฐานความหมาย องค์ประกอบอินไลน์สามารถรองรับข้อความหรือองค์ประกอบอินไลน์อื่น ๆ เท่านั้นและองค์ประกอบอินไลน์ทั่วไป "A" บล็อกองค์ประกอบ องค์ประกอบอินไลน์ องค์ประกอบตัวแปรตัวแปรองค์ประกอบคือองค์ประกอบบล็อกหรือองค์ประกอบอินไลน์ตามบริบท
องค์ประกอบระดับบล็อกที่ไม่ลอยอยู่แต่ละแถวจะอยู่ที่หนึ่งแถวและองค์ประกอบลอยตัวลอยอยู่ที่ปลายด้านหนึ่งของแถวตามกฎระเบียบ
องค์ประกอบอินไลน์ยังไม่ได้ครอบครองแถวเดียว
มีสามสถานการณ์ที่จะทำให้องค์ประกอบมีอยู่จากสตรีมเอกสารคือการลอยตัวการวางตำแหน่งสัมบูรณ์และการวางตำแหน่งคงที่ .
องค์ประกอบลอยตัวไม่ได้ใช้พื้นที่ไหลของเอกสารปกติใด ๆ และการวางตำแหน่งขององค์ประกอบที่ลอยอยู่นั้นขึ้นอยู่กับการไหลของเอกสารปกติจากนั้นแยกออกจากการไหลของเอกสารและย้ายไปทางซ้ายหรือขวาเท่าที่จะทำได้ เนื้อหาข้อความจะล้อมรอบองค์ประกอบลอยตัว เมื่อองค์ประกอบถูกสกัดจากสตรีมเอกสารปกติองค์ประกอบอื่น ๆ ที่ยังคงอยู่ในสตรีมเอกสารจะไม่สนใจองค์ประกอบและเติมพื้นที่เดิม
สาเหตุที่แท้จริงของแนวคิดลอยคือการตีความของเบราว์เซอร์ของทฤษฎี ฉันสามารถพูดได้ว่าหลายคนใช้ IE เป็นมาตรฐาน แต่ไม่ใช่
จากการไหลของเอกสารเราสามารถเข้าใจรูปแบบการวางตำแหน่งต่อไปนี้ได้อย่างง่ายดาย:
การวางตำแหน่งสัมพัทธ์นั่นคือออฟเซ็ตสัมพันธ์กับตำแหน่งขององค์ประกอบในสตรีมเอกสาร
การวางตำแหน่งสัมบูรณ์หมายถึงการแยกออกจากสตรีมเอกสารอย่างสมบูรณ์และถูกชดเชยและการวางตำแหน่งคงที่เทียบกับองค์ประกอบหลักที่ใกล้ที่สุดของแอตทริบิวต์ตำแหน่งที่ไม่คงที่นั่นคือแยกออกจากสตรีมเอกสารอย่างสมบูรณ์และชดเชยเมื่อเทียบกับวิวพอร์ต
2. จะเข้าใจได้อย่างไรเมื่อแอตทริบิวต์ที่ชัดเจนใช้ค่าที่เหมาะสม?
องค์ประกอบเช่น P, H1 หรือ DIV มักเรียกว่าองค์ประกอบระดับบล็อกและองค์ประกอบเหล่านี้จะแสดงเป็นชิ้นส่วนของเนื้อหา นั่นคือ "กล่องอินไลน์" (คุณสามารถใช้ display = block เพื่อแปลงองค์ประกอบในแถวเป็นองค์ประกอบบล็อก display = none หมายความว่าองค์ประกอบที่สร้างขึ้นไม่มีกล่องเลยและไม่มีการแสดงองค์ประกอบหรือใช้พื้นที่ในเอกสาร)
ตอบ: บรรทัดเป็นองค์ประกอบภายในบรรทัดและสามารถวางไว้ในบรรทัดเท่านั้น
B: เพื่อให้มันตรงไปตรงมาองค์ประกอบในบรรทัดเป็นเหมือนคำ; องค์ประกอบระดับบล็อกเป็นเหมือนย่อหน้า
C: องค์ประกอบระดับบล็อกทั่วไปเช่นย่อหน้า <p>, ชื่อเรื่อง <h1> <h2> …, รายการ, <ul> <ol> <li>, ตาราง <dable>, รูปแบบ <form>, div <div> และ องค์ประกอบของร่างกายเช่น <body> องค์ประกอบแบบอินไลน์เป็นเช่น: องค์ประกอบของรูปแบบ <put>, ไฮเปอร์ลิงก์ <a>, image <img>, <span> .....
D: คุณลักษณะที่โดดเด่นของการล่องหนในระดับบล็อกคือองค์ประกอบระดับบล็อกแต่ละรายการจะแสดงจากบรรทัดใหม่และการล่องหนที่ตามมาจะต้องแสดงจากบรรทัดอื่น
E: <span> เป็นขององค์ประกอบอินไลน์ในนิยาม CSS ในขณะที่ <div> เป็นองค์ประกอบระดับบล็อก
สำหรับผู้ที่ศึกษา CSS คุณสามารถเข้าใจได้ในตอนแรก แต่มันไม่ใช่เรื่องง่ายสำหรับสามเณรที่จะเข้าใจดังนั้นฉันจึงอธิบายให้สามเณรคุ้นเคยมากขึ้น!
การใช้คำว่าคอนเทนเนอร์จะทำให้การดำรงอยู่และวัตถุประสงค์ของพวกเขาง่ายขึ้น ภาชนะขนาดเล็ก <span> เป็นภาชนะขนาดเล็ก แต่ฉันควรทำอย่างไรถ้าฉันต้องการใส่หมึกไว้บ้าง? มันง่ายมาก
ฉันต้องการใช้ CSS เพื่อกำหนดรูปแบบของตัวอักษร C ดังนั้นเราจึงสามารถใช้ <pan>
<div> ฉันรัก CSS - <Span> 52CSS.com </span> มาตรฐาน W3C </div>
โดยทั่วไปแล้วองค์ประกอบบล็อกขององค์ประกอบอื่น ๆ จะเริ่มต้นด้วยบรรทัดใหม่ . มันสามารถใช้เพื่อเก็บองค์ประกอบบล็อกอื่น ๆ เท่านั้น
หากไม่มีผลกระทบของ CSS องค์ประกอบบล็อกจะถูกจัดเรียงตามลำดับทุกครั้ง ด้วย CSS เราสามารถเปลี่ยนโหมดเค้าโครงเริ่มต้นของ HTML นี้และวางองค์ประกอบบล็อกไว้ในตำแหน่งที่คุณต้องการ แทนที่จะเริ่มสายอื่นอย่างโง่เขลาทุกครั้ง ควรชี้ให้เห็นว่าแท็กตารางยังเป็นประเภทขององค์ประกอบบล็อก ความเร็ว อย่างไรก็ตามหากผู้ใช้ทั่วไปคลิกปุ่มซอร์สโค้ดหน้ามุมมองโดยไม่ตั้งใจความแตกต่างระหว่างทั้งสองจะมีขนาดใหญ่มาก ซอร์สโค้ดของหน้าเค้าโครง CSS ที่ออกแบบมาจากแนวคิดของการสร้างใหม่ที่ดีอย่างน้อยสามารถอนุญาตให้ผู้ใช้ทั่วไปที่ไม่มีการพัฒนาเว็บเพื่อทำความเข้าใจเนื้อหาได้อย่างรวดเร็ว จากมุมมองนี้รหัสเค้าโครง CSS ควรมีประสบการณ์ด้านความงามที่ดีขึ้น
คุณสามารถจินตนาการถึงองค์ประกอบคอนเทนเนอร์บล็อกเป็นกล่องหรือถ้าคุณเล่นกับบทความคลิปบนมันจะเข้าใจได้ง่ายขึ้น ก่อนอื่นเราตัดบทความที่เราต้องการจากหนังสือพิมพ์และนิตยสารต่างๆ การตัดแต่ละชิ้นเป็นบล็อก จากนั้นเราก็ติดกระดาษเหล่านี้ลงบนกระดาษใหม่ที่ว่างเปล่าตามความตั้งใจเค้าโครงของเราเอง นี่จะเป็นข่าวย่อยที่เป็นเอกลักษณ์ของคุณเอง ในฐานะที่เป็นส่วนขยายของเทคโนโลยีการออกแบบเค้าโครงเว็บเป็นไปตามรูปแบบเดียวกัน -
องค์ประกอบบล็อกและองค์ประกอบอินไลน์เป็นแนวคิดในข้อกำหนด HTML ความแตกต่างพื้นฐานระหว่างองค์ประกอบบล็อกและองค์ประกอบอินไลน์คือองค์ประกอบบล็อกโดยทั่วไปเริ่มต้นด้วยบรรทัดใหม่ อย่างไรก็ตามเมื่อมีการเพิ่มการควบคุม CSS ความแตกต่างของแอตทริบิวต์ระหว่างองค์ประกอบบล็อกและองค์ประกอบอินไลน์จะไม่กลายเป็นความแตกต่าง ตัวอย่างเช่นเราสามารถเพิ่มองค์ประกอบแบบอินไลน์อ้างอิงลงในจอแสดงผล: แอตทริบิวต์บล็อกเพื่อให้สามารถมีคุณลักษณะที่เริ่มต้นจากบรรทัดใหม่ทุกครั้ง
แนวคิดพื้นฐานขององค์ประกอบตัวแปรคือจำเป็นต้องพิจารณาว่าองค์ประกอบเป็นองค์ประกอบบล็อกหรือองค์ประกอบอินไลน์ตามความสัมพันธ์ตามบริบท องค์ประกอบตัวแปรยังคงเป็นของสององค์ประกอบข้างต้น ดูข้อความเต็มสำหรับการจำแนกองค์ประกอบทั่วไป
เกี่ยวกับชื่อภาษาจีนขององค์ประกอบอินไลน์มีองค์ประกอบอินไลน์มากมายองค์ประกอบที่ฝังตัวองค์ประกอบอินไลน์และองค์ประกอบโดยตรงอินพุต โดยทั่วไปไม่มีการแปลแบบรวมเพียงเรียกมันว่าสิ่งที่คุณต้องการ นอกจากนี้เมื่อพูดถึงองค์ประกอบแบบอินไลน์เราจะคิดว่ามีแอตทริบิวต์การแสดงผลที่แสดง: อินไลน์;
* ที่อยู่ - ที่อยู่ * blockquote - การอ้างอิงบล็อก * ศูนย์ - การจัดตำแหน่งบล็อกในการยก * DIR - รายการไดเรกทอรี * DIV - ระดับบล็อกที่ใช้กันทั่วไปเป็นเรื่องง่ายและยังเป็นแท็กหลักของเค้าโครง CSS * DL - รายการคำจำกัดความ * กลุ่ม* แบบฟอร์ม - แบบฟอร์มการโต้ตอบ* H1 - ชื่อขนาดใหญ่* H2 - คำบรรยาย* H3 - ระดับ 3 ชื่อเรื่อง* H4 - ระดับ 4 ชื่อ* H5 - ระดับ 5 ชื่อ* H6 - ระดับ 6 ชื่อ* HR - ตัวหารแนวนอน* ISINDEX
* เมนู - รายการเมนู * noframes - เฟรมเนื้อหาที่เป็นตัวเลือก (แสดงเนื้อหาบล็อกนี้สำหรับเบราว์เซอร์ที่ไม่รองรับเฟรม * noscript - เนื้อหาสคริปต์เสริม (แสดงเนื้อหานี้สำหรับเบราว์เซอร์ที่ไม่รองรับสคริปต์)
* OL - Sort Form * P - ย่อหน้า * Pre - Format Text * Table - Table * UL - รายการที่ไม่ได้เรียงลำดับ
* A - จุดยึด * ABBR - ตัวย่อ * ตัวย่อ - คำแรก * B - BOLD (ไม่แนะนำ)
* BDO - Bidi แทนที่
* Big - Font ขนาดใหญ่ * BR - LINE BREAK * CITE - QUOTE * CODE - รหัสคอมพิวเตอร์ (จำเป็นเมื่ออ้างอิงซอร์สโค้ด)
* DFN - กำหนดฟิลด์ * em - เน้น * ตัวอักษร - การตั้งค่าตัวอักษร (ไม่แนะนำ)
* i - italic * img - รูปภาพ * อินพุต - กล่องอินพุต * kbd - กำหนดข้อความแป้นพิมพ์ * ฉลาก - ฉลากตาราง * Q - การอ้างอิงสั้น ๆ * S - เครื่องหมายกลาง (ไม่แนะนำ)
* SAMP - กำหนดตัวอย่างรหัสคอมพิวเตอร์ * เลือก - การเลือกโครงการ * ขนาดเล็ก - ข้อความตัวอักษรขนาดเล็ก * Span - ที่ใช้กันทั่วไปในคอนเทนเนอร์อินไลน์, กำหนดบล็อกภายในข้อความ * Strike - คะแนนปานกลาง * Strong - Bold เน้น * ย่อย - ตัวห้อย * sup - superscript * Textarea - กล่องป้อนข้อความหลายบรรทัด * TT - Teletext * U - Underscore * VAR - กำหนดตัวแปร
* Applet - Java Applet
* ปุ่ม - ปุ่ม * del - ลบข้อความ * iframe - อินไลน์เฟรม
* ins - ข้อความแทรก* แผนที่ - บล็อกรูปภาพ (แผนที่)
* วัตถุ - วัตถุวัตถุ* สคริปต์ - สคริปต์ไคลเอนต์