การทำความเข้าใจคุณสมบัติการแสดง CSS

Feb 4, 2026
วิธีการ

มันเที่ยงคืนและอันนั้น Div ในเว็บไซต์ของคุณยังคงดูเหมือนหน้าอกของเล่นของเด็ก องค์ประกอบทั้งหมดเป็นสิ่งที่ยุ่งเหยิงและทุกครั้งที่คุณเล่นด้วย css 's แสดง ทรัพย์สินพวกเขาจัดเรียงตัวเองให้กลายเป็นเรื่องไร้สาระที่แตกต่างกันอย่างสิ้นเชิง

หากคุณเป็นเหมือนฉันคุณอาจจะแก้ปัญหานี้ได้ด้วยการพึมพำภายใต้ลมหายใจของคุณและก้าวร้าวอย่างต่อเนื่องกับแป้นพิมพ์ของคุณ และถึงแม้ว่ากลยุทธ์นั้นจะทำงานให้ฉันก่อนหน้านี้ฉันเพิ่งออกเดินทางเพื่อหาวิธีที่ดีกว่าในการทำความเข้าใจ แสดง คุณสมบัติ.

มันกลายเป็นพื้นฐานของ แสดง ง่ายกว่าที่ฉันคิดไว้มาก ในความเป็นจริงพวกเขาใช้หลักการเดียวกันกับการบรรจุกระเป๋าเดินทาง ฉันจะปกปิด จอแสดงผล: บล็อก , บล็อกแบบอินไลน์ และ แบบอินไลน์ . หากคุณได้จัดกระเป๋าเดินทางด้วยวิธีที่เป็นระเบียบก่อนคุณจะเห็นขนานกัน หากคุณเป็นคนประเภทที่แรมส์เสื้อผ้าของคุณทั้งหมดในลักษณะจับจด - ดีมีเพียงมากที่ฉันสามารถทำเพื่อคุณได้

กระเป๋าเดินทางของเราจะมีเสื้อผ้าสามประเภท:

  • DELICATES เช่นเสื้อคอปก
  • เสื้อยืดที่สามารถม้วนขึ้น
  • ถุงเท้าหรือชุดชั้นในที่สามารถยัดเข้าไปในช่องว่าง

สำหรับการอ้างอิงหากเราสร้างแบบจำลองกระเป๋าเดินทางใน HTML มันจะมีลักษณะเช่นนี้: 

 & lt; div class = 'กระเป๋าเดินทาง' & gt;
    & lt; div class = 'ละเอียดอ่อน' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'ถุงเท้า' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
    & lt; div class = 'เสื้อยืด' & gt; & lt; / div & gt;
& lt; / div & gt;

รายการที่ละเอียดอ่อนด้านบน

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer

เสื้อคอปกที่ตั้งอยู่บนกองเสื้อผ้าที่อยู่ข้างใต้ มันเป็นรายการเดียวที่ใช้เลเยอร์ของตัวเอง

จอแสดงผล: บล็อก เป็นค่าเริ่มต้นสำหรับองค์ประกอบ HTML ส่วนใหญ่ นั่นหมายความว่าองค์ประกอบมีพื้นที่แนวนอนทั้งหมดภายในคอนเทนเนอร์ของมัน Div . หากอยู่ติดกับองค์ประกอบพี่น้องอื่น ๆ มันจะเริ่มต้นบรรทัดใหม่และไม่อนุญาตให้มีองค์ประกอบอื่น ๆ ในบรรทัด มันคล้ายกับรายการที่ละเอียดอ่อนที่คุณใส่ที่ด้านบนของกระเป๋าเดินทางของคุณ สิ่งเหล่านี้เป็นบทความที่ละเอียดอ่อนหรือสมาร์ทเช่นเสื้อคอปก คุณไม่ต้องการให้พวกเขามีรอยย่นดังนั้นคุณจึงต้องแน่ใจว่าพวกเขาไม่ได้ผลักเสื้อผ้าชิ้นอื่น ๆ

สิ่งนี้นำเสนอหนึ่งในส่วนที่ยากที่สุดของ จอแสดงผล: บล็อก . สังเกตุว่าเสื้อคอลลารีไม่ได้ครอบครองความกว้างทั้งหมดของกระเป๋าเดินทางหรือไม่? นั่นไม่ได้หมายความว่ารายการอื่นจะกระโดดขึ้นไปที่ระดับของมัน สมมติว่าเสื้อตัวนี้คือ 60 เปอร์เซ็นต์ของความกว้างของกระเป๋าเดินทาง มันจะยังคงบล็อกองค์ประกอบอื่น ๆ จากการเข้าร่วมในระดับบนสุด

นั่นคือเหตุผลที่มีเส้นขอบสีส้มในภาพ จอแสดงผล: บล็อก องค์ประกอบจะเพิ่มระยะขอบโดยอัตโนมัติหากไม่ได้ครอบครองพื้นที่แนวนอนทั้งหมด

เสื้อยืดบรรจุอย่างเรียบร้อย

Here we can see the top and bottom rows of T-shirts, with four shirts in each

ที่นี่เราสามารถเห็นเสื้อยืดด้านบนและด้านล่างของเสื้อยืดมีสี่เสื้อในแต่ละคน

กระเป๋าเดินทางส่วนใหญ่ของคุณอาจเต็มไปด้วยเสื้อผ้าที่เหลือสำหรับการเดินทางของคุณ เพื่อความเรียบง่ายเราจะตัดนี้ลงไปเพียงแค่เสื้อยืด มีการอภิปรายครั้งใหญ่บนอินเทอร์เน็ตว่าการพับหรือการกลิ้งมีประสิทธิภาพมากขึ้น ฉันเป็นคนที่พับได้

อย่างไรก็ตามเพื่อให้พอดีกับรายการส่วนใหญ่คุณจัดเรียงเสื้อยืดของคุณเคียงข้างกัน นี่คือสิ่งที่แน่นอน จอแสดงผล: บล็อกแบบอินไลน์ มีไว้สำหรับ องค์ประกอบเหล่านี้สามารถนั่งถัดจากอีกอันหนึ่งในบรรทัดเดียวกันเช่นเดียวกับถัดไป จอแสดงผล: อินไลน์ องค์ประกอบ

ไม่เหมือน จอแสดงผล: อินไลน์ องค์ประกอบ, บล็อกแบบอินไลน์ องค์ประกอบจะย้ายไปยังบรรทัดถัดไปหากไม่พอดีกับที่มี Div ข้างอื่น ๆ บล็อกแบบอินไลน์ องค์ประกอบ ในการที่จะมีเสื้อยืดรั่วไหลเข้าสู่แถวถัดไปคุณจะต้องตัดครึ่งและใช้ครึ่งที่เหลือเพื่อเริ่มแถวใหม่ บล็อกแบบอินไลน์ องค์ประกอบไม่ได้รับอนุญาตให้แบ่งครึ่งหากพวกเขาไม่พอดีกับเส้น

ถุงเท้าที่เติมช่องว่าง

The socks are inline elements, which means they will fill the gaps around the T-shirts

ถุงเท้าเป็นองค์ประกอบแบบอินไลน์ซึ่งหมายความว่าพวกเขาจะเติมช่องว่างรอบ ๆ เสื้อยืด

กลับไปที่ HTML ดั้งเดิมแล้วคุณจะทราบว่ามีหนึ่งถุงเท้า & lt; div & gt; ระหว่างแปดเสื้อยืด แต่ดูที่มุมมองแนวนอนของกระเป๋าเดินทางทางด้านขวา หากมีถุงเท้าเดียว & lt; div & gt; มันจะจบแถวกลางและเริ่มแถวล่างได้อย่างไร นี่คือจุดประสงค์ของ จอแสดงผล: อินไลน์ !

แบบอินไลน์ องค์ประกอบจะหกไปยังบรรทัดถัดไปหากเกินความกว้างของ Div (ด้วยวิธีนี้มันแตกต่างจาก บล็อกแบบอินไลน์ หรือ บล็อก . ตั้งแต่ถุงเท้าของเรา Div เต็มไปด้วยถุงเท้าที่ถูกอัดแน่นไปด้วยช่องว่างมันสามารถเริ่มเติมช่องว่างทางด้านขวาของแถวกลางและรั่วไหลเพื่อเริ่มต้นแถวล่าง

ไม่มีถุงเท้าจะต้องถูกตัดครึ่งเพื่อให้สิ่งนี้เกิดขึ้น นี่คือเหตุผลที่พวกเขาสามารถเป็นได้ แบบอินไลน์ ในขณะที่เสื้อยืดสามารถเป็นได้เท่านั้น บล็อกแบบอินไลน์ . หากเสื้อยืดที่แถวกลางใช้เวลาเพียง 60 เปอร์เซ็นต์ของความกว้างถุงเท้า & lt; div & gt; จะเลื่อนขึ้นเพื่อเติมเต็มพื้นที่ทั้งหมดในส่วนที่เหลือของแถว

เดินทางปลอดภัย

นี่คือ CSS สุดท้ายสำหรับกระเป๋าเดินทางของเรา: 

 .delicate {
    จอแสดงผล: บล็อก;
    ความกว้าง: 60%;
}

.tshirt {
    จอแสดงผล: บล็อกแบบอินไลน์;
    ความกว้าง: 20%;
}

.ถุงเท้า{
    จอแสดงผล: อินไลน์;
}

นี่คือสถานการณ์ที่สลับกันสองครั้งเพื่อแสดงให้เห็นถึงการใช้งานที่แตกต่างกันของการแสดงผล หาก Delicates อยู่ด้านบนมี จอแสดงผล: บล็อกแบบอินไลน์ พวกเขาจะพอดีกับเสื้อยืด เสื้อยืดบางส่วนจะเลื่อนขึ้นไปที่สายด้านบนและส่วนที่เหลือจะปรับให้เหมาะสม จะไม่มีบัฟเฟอร์ที่สะดวกสบายไปทางซ้ายและขวาของเสื้อคอปก

หากเสื้อยืดแต่ละคนมี จอแสดงผลบล็อก คุณจะมีเสื้อยืดขนาดใหญ่ที่อยู่ด้านบนของกันและกันหนึ่งต่อบรรทัด ถ้าถุงเท้ามี จอแสดงผล: บล็อกแบบอินไลน์ พวกเขาทุกคนจะนั่งที่แถวล่างแทนที่จะไหลระหว่างสองแถว เสื้อยืดบางคนจะถูกผลักดันไปยังอีกแถวหนึ่งสร้างเส้นที่สี่ จะมีช่องว่างทางด้านขวาของเสื้อยืดแถวกลาง

ด้วยวิธีการที่ฉันได้อธิบายไว้ที่นี่เราจะจบลงด้วยกระเป๋าเดินทางที่บรรจุอย่างเรียบร้อยที่ใช้ประโยชน์จากพื้นที่ว่างได้ดีที่สุด

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 289; ซื้อที่นี่ !

บทความที่เกี่ยวข้อง:

  • 5 ของแหล่งข้อมูลที่ดีที่สุดสำหรับการเรียนรู้ HTML และ CSS
  • สร้างเลย์เอาต์ที่ซับซ้อนด้วย Postcss-Flexbox
  • 28 ตัวอย่างที่โดดเด่นของ CSS

วิธีการ - บทความยอดนิยม

วิธีเปลี่ยนการถ่ายภาพเป็นภาพประกอบ

วิธีการ Feb 4, 2026

(เครดิตภาพ: ซินดี้คัง) การทำความเข้าใจวิธี�..

สีศิลปะแนวตั้งแสดงออกด้วย Artrage 5

วิธีการ Feb 4, 2026

Artrage เป็นเครื่องมือศิลปะดิจิทัลยอดนิยม (เพิ่มเ�..

วิธีการวาดสะท้อนเมทัลลิค

วิธีการ Feb 4, 2026

เมื่อแสงโจมตีวัตถุโลหะมันสามารถสะท้อนกลับไป..

วิธีจัดการคลาส CSS ด้วย JavaScript

วิธีการ Feb 4, 2026

เมื่อพัฒนาโครงการเว็บอย่างง่ายที่เกี่ยวข้อง..

วิธีสร้างเส้นผมในโรงภาพยนตร์ 4D

วิธีการ Feb 4, 2026

แรงบันดาลใจจากตัวละครที่ยอดเยี่ยมของ Carlos Ortega Elizal..

สร้างโปสเตอร์จากเทมเพลตใน Photoshop

วิธีการ Feb 4, 2026

Adobe กำลังเปิดตัวชุดวิดีโอชุดใหม่วันนี้เรียกว่าตอนนี้ซึ่งมีวัตถุปร�..

สร้างแปรงสติกเกอร์ที่กำหนดเองใน Artrage

วิธีการ Feb 4, 2026

ฉันใช้สเปรย์สติ๊กเกอร์ Artrage - เครื่องมือศิ�..

กายวิภาคศาสตร์ของภาพล้อเลียน: 15 เคล็ดลับยอดนิยม

วิธีการ Feb 4, 2026

ในฐานะนักแปลอิสระเต็มเวลาฉันคุ้นเคยกับการทำ..

หมวดหมู่