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

Sep 14, 2025

วิธีการ

มันเที่ยงคืนและอันนั้น 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

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

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

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

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

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

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

Adobe XD: วิธีใช้คุณสมบัติ Auto-onmate

วิธีการวาดมุมมอง

วิธีการสร้างสิ่งมีชีวิตแฟนตาซีสุดสมจริง

10 กฎสำหรับการสร้างเว็บฟอร์มที่ใช้งานง่าย

4 เคล็ดลับในการปรับปรุงประสิทธิภาพของหน้า

วิธีการบรรลุแสงที่ดีขึ้นด้วย V-ray

11 เคล็ดลับในการสร้างภูมิทัศน์ที่มีน้ำในแบบ 3 มิติ

สร้างตัวละครที่มีความสมจริง stylized

หมวดหมู่