ความแตกต่างระหว่างความกว้างอัตโนมัติและความกว้าง 100 เปอร์เซ็นต์

ก่อนหน้านี้ข้อสันนิษฐานของฉันwidth: autoคือความกว้างถูกตั้งค่าเป็นของเนื้อหา ตอนนี้ผมเห็นว่าพาเรนต์เต็มความกว้าง

ใครช่วยอธิบายความแตกต่างระหว่างสิ่งเหล่านี้ได้ไหม

ความกว้างอัตโนมัติ

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

ความกว้าง 100%

ในทางกลับกันหากคุณระบุความกว้าง: 100% ความกว้างทั้งหมดขององค์ประกอบจะเท่ากับ 100% ของบล็อกที่มีอยู่บวกระยะขอบแนวนอนช่องว่างภายในและเส้นขอบ (เว้นแต่คุณจะใช้ box-sizing: border-box ซึ่งในกรณีนี้ เพิ่มเฉพาะระยะขอบใน 100% เพื่อเปลี่ยนวิธีคำนวณความกว้างทั้งหมด) นี่อาจเป็นสิ่งที่คุณต้องการ แต่ส่วนใหญ่จะไม่ใช่

หากต้องการเห็นภาพความแตกต่างให้ดูภาพนี้:

ที่มา

• width: auto; จะพยายามอย่างเต็มที่เพื่อให้องค์ประกอบมีความกว้างเท่ากับคอนเทนเนอร์หลักเมื่อมีการเพิ่มพื้นที่เพิ่มเติมจากระยะขอบช่องว่างภายในหรือเส้นขอบ

• width: 100%;จะทำให้องค์ประกอบกว้างเท่ากับคอนเทนเนอร์หลัก ระยะห่างเพิ่มเติมจะถูกเพิ่มเข้าไปในขนาดขององค์ประกอบโดยไม่คำนึงถึงระดับบนสุด สิ่งนี้มักทำให้เกิดปัญหา

มันเกี่ยวกับระยะขอบและเส้นขอบ ถ้าคุณใช้width: autoแล้วเพิ่มเส้นขอบ div ของคุณจะไม่ใหญ่กว่าคอนเทนเนอร์ ในทางกลับกันหากคุณใช้width: 100%และขอบบางส่วนความกว้างขององค์ประกอบจะเท่ากับ 100% +เส้นขอบหรือระยะขอบ สำหรับข้อมูลเพิ่มเติมโปรดดูที่นี้

ตราบเท่าที่ค่าของความกว้างเป็นแบบอัตโนมัติองค์ประกอบสามารถมีระยะขอบแนวนอนช่องว่างภายในและเส้นขอบได้โดยไม่ต้องกว้างกว่าคอนเทนเนอร์ (เว้นแต่ผลรวมของขอบซ้าย + ขอบซ้าย - ความกว้าง + ช่องว่างด้านซ้าย + ช่องว่างด้านขวา + border-right-width + margin-right มีขนาดใหญ่กว่าคอนเทนเนอร์) ความกว้างของกล่องเนื้อหาจะเป็นเท่าใดก็ได้เมื่อลบระยะขอบช่องว่างภายในและเส้นขอบออกจากความกว้างของคอนเทนเนอร์แล้ว

ในทางกลับกันหากคุณระบุความกว้าง: 100% ความกว้างทั้งหมดขององค์ประกอบจะเท่ากับ 100% ของบล็อกที่มีอยู่บวกระยะขอบแนวนอนช่องว่างภายในและเส้นขอบ (เว้นแต่คุณจะใช้ box-sizing: border-box ซึ่งในกรณีนี้ เพิ่มเฉพาะระยะขอบใน 100% เพื่อเปลี่ยนวิธีคำนวณความกว้างทั้งหมด) นี่อาจเป็นสิ่งที่คุณต้องการ แต่ส่วนใหญ่จะไม่ใช่

ที่มา:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

ความกว้าง 100%: จะทำให้เนื้อหา 100% ขอบขอบช่องว่างภายในจะถูกเพิ่มเข้าไปในความกว้างนี้และองค์ประกอบจะล้นหากมีการเพิ่มสิ่งเหล่านี้

ความกว้างอัตโนมัติ: จะพอดีกับองค์ประกอบในพื้นที่ว่างรวมถึงระยะขอบขอบและช่องว่างภายใน พื้นที่ที่เหลือหลังจากปรับระยะขอบ + ช่องว่าง + ขอบจะมีความกว้าง / ความสูง

ความกว้าง 100% + ขนาดกล่อง: กล่องขอบ: มันจะพอดีกับองค์ประกอบในพื้นที่ว่างรวมถึงเส้นขอบช่องว่างภายใน (ระยะขอบจะทำให้ล้นภาชนะ)

ความกว้างเริ่มต้นขององค์ประกอบระดับบล็อกเช่น div หรือ p คืออัตโนมัติ

ใช้ความกว้าง: อัตโนมัติเพื่อยกเลิกความกว้างที่ระบุไว้อย่างชัดเจน

หากคุณระบุความกว้าง: 100% ความกว้างทั้งหมดขององค์ประกอบจะเท่ากับ 100% ของบล็อกที่มีอยู่บวกขอบแนวนอนช่องว่างภายในและเส้นขอบ

ดังนั้นในครั้งต่อไปที่คุณพบว่าตัวเองตั้งค่าความกว้างขององค์ประกอบระดับบล็อกเป็น 100% เพื่อให้ใช้ความกว้างทั้งหมดที่มีอยู่ให้พิจารณาว่าสิ่งที่คุณต้องการจริงๆคือการตั้งค่าเป็นอัตโนมัติหรือไม่

ใช้ความกว้าง: อัตโนมัติ; + display: อินไลน์บล็อก; ใน css ให้เอฟเฟกต์ที่ยอดเยี่ยม

width : auto;
display: inline-block;

เมื่อเราพูดว่า

width:auto;

ความกว้างจะไม่เกินความกว้างทั้งหมดขององค์ประกอบหลัก ความกว้างสูงสุดคือความกว้างหลัก แม้ว่าเราจะเพิ่มเส้นขอบช่องว่างภายในและระยะขอบเนื้อหาขององค์ประกอบเองก็จะเล็กลงเพื่อให้มีพื้นที่สำหรับเส้นขอบช่องว่างภายในและระยะขอบ ในกรณีที่ช่องว่างที่ต้องใช้สำหรับ border + padding + margin มากกว่าความกว้างทั้งหมดขององค์ประกอบหลักความกว้างของเนื้อหาจะกลายเป็นศูนย์

เมื่อเราพูดว่า

width:100%;

ความกว้างของเนื้อหาขององค์ประกอบจะกลายเป็น 100% ขององค์ประกอบหลักและจากนี้ไปหากเราเพิ่มเส้นขอบช่องว่างภายในหรือระยะขอบจะทำให้องค์ประกอบลูกเกินความกว้างขององค์ประกอบหลักและจะเริ่มล้นออกจากองค์ประกอบหลัก