ความสูง ความกว้าง และล้น - กฎ CSS สำหรับการอธิบายพื้นที่เนื้อหาในรูปแบบบล็อก การควบคุมการล้นขององค์ประกอบบล็อก

คำอธิบาย

ตั้งค่าความกว้างขององค์ประกอบระดับบล็อกหรือองค์ประกอบที่เปลี่ยนได้ (เช่น tag - ความกว้างไม่รวมความหนาของเส้นขอบรอบองค์ประกอบ ระยะห่างจากขอบ หรือค่าระยะขอบ

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

ไวยากรณ์

ความกว้าง: ค่า | ดอกเบี้ย | อัตโนมัติ | สืบทอด

ค่านิยม

หน่วยความยาวใด ๆ ที่ยอมรับใน CSS จะได้รับการยอมรับเป็นค่า - ตัวอย่างเช่นพิกเซล (px), นิ้ว (นิ้ว), จุด (pt) เป็นต้น เมื่อใช้สัญลักษณ์เปอร์เซ็นต์ ความกว้างขององค์ประกอบจะถูกคำนวณขึ้นอยู่กับความกว้างของ องค์ประกอบหลัก

หากไม่ได้ระบุพาเรนต์ไว้อย่างชัดเจน หน้าต่างเบราว์เซอร์จะทำหน้าที่ดังกล่าว

อัตโนมัติ ตั้งค่าความกว้างตามประเภทองค์ประกอบและเนื้อหา

ความกว้าง Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.ผลลัพธ์

ตัวอย่างนี้

วิธีการแสดงในเบราว์เซอร์ Safari จะแสดงในรูป 1.

ข้าว. 1. ความกว้างของบล็อก

แบบจำลองวัตถุ

Internet Explorer 6 กำหนดความกว้างเป็นความกว้างขั้นต่ำอย่างไม่ถูกต้อง ในโหมดเล่นโวหาร Internet Explorer เวอร์ชันสูงสุดและรวม 8.0 คำนวณความกว้างขององค์ประกอบอย่างไม่ถูกต้องโดยไม่ต้องเพิ่มค่าช่องว่างภายใน ระยะขอบ หรือเส้นขอบ

Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอด

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

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

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

สำหรับย่อหน้านี้เราจะกำหนดเฉพาะความกว้างและความสูงเท่านั้น

ย่อหน้านี้ยังมีช่องว่างภายใน เส้นขอบ และช่องว่างด้านนอก นอกเหนือจากความกว้างและความสูง

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

นั่นคือ 180x130 พิกเซล

องค์ประกอบล้น

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

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

สวัสดีผู้อ่านที่รักของบล็อกไซต์ วันนี้เราจะพูดถึงวิธีที่คุณสามารถกำหนดขนาดสำหรับพื้นที่เนื้อหาโดยใช้ความสูงและความกว้างและวิธีกำหนดค่าการแสดงเนื้อหานี้ในกรณีที่มีเนื้อหามากกว่าที่จะพอดีกับพื้นที่ที่จัดสรรไว้ (กฎ css overflow ที่ซ่อนไว้ , เลื่อน, อัตโนมัติ)

ข้อความย่อหน้าแรก

ข้อความที่สอง

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

ตอนนี้เรามาทำการเปลี่ยนแปลงครั้งแรกและฮาร์ดโค้ดความกว้างของย่อหน้าแรก (กว้าง: 50px):

ข้อความอันแรก

ข้อความที่สอง

โดยทั่วไป สิ่งที่คาดหวังเกิดขึ้น - ขนาดแนวนอนลดลงเป็นค่าที่ระบุใน width:50px และความสูงของย่อหน้ายังคงเกิดขึ้นเนื่องจากความสูง:อัตโนมัติ (ค่าเริ่มต้น) เป็นผลให้สามารถบรรจุข้อความทั้งหมดได้

แต่ตอนนี้เรามาจำกัดความสูงของคอนเทนเนอร์โดยใช้ height:15px

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

ล้นหมายถึง "ล้น" หรืออีกนัยหนึ่ง "เนื้อหาล้น" โดยพูดถึงสิ่งที่จะเกิดขึ้นกับเนื้อหาหากไม่พอดีกับพื้นที่ (คอนเทนเนอร์) ที่ได้รับการจัดสรร

Overflow มีค่าที่ถูกต้องหลายค่า แต่ค่าเริ่มต้นคือ มองเห็นได้ (แสดง):

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

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

แต่การใช้ค่าดังกล่าวจะสมเหตุสมผลมากกว่ามาก อัตโนมัติสำหรับ Overflow หากคุณต้องการสร้างแถบเลื่อน ในกรณีนี้เบราว์เซอร์จะคำนวณว่าจะแสดงเมื่อใดและแกนใด

ตัวอย่างเช่น หากเราใช้ overflow:auto เราจะสามารถเลื่อนได้เฉพาะแกนที่เนื้อหาไม่พอดีกับขอบเขตของคอนเทนเนอร์:

ข้อความอันแรก

ข้อความที่สอง

โดยสรุปเราสามารถพูดได้ว่า Overflow อนุญาตค่อนข้างมาก กำหนดค่าตัวเลือกการแสดงเนื้อหาได้อย่างยืดหยุ่นในกรณีที่มันปีนออกจากภาชนะ คุณจะมีโอกาสแสดงเนื้อหาที่ทิ้งไว้ (มองเห็นได้) ไม่แสดง (ตัดออก-ซ่อน) หรือบังคับให้เลื่อน (เลื่อน) หรือเลื่อนตามความจำเป็น (อัตโนมัติ)

นอกจากนี้ยังมีการเขียนกฎนี้หลายรูปแบบที่เกี่ยวข้องกับ CSS3 แต่เบราว์เซอร์ทั้งหมดรองรับ ซึ่งหมายความว่าสามารถใช้งานได้อย่างปลอดภัย ฉันกำลังพูดถึงตัวเลือก overflow-x และ overflow-y ซึ่งช่วยให้คุณสามารถตั้งค่าหรือไม่ตั้งค่าการเลื่อนในแต่ละแกนได้ (x - แนวนอน, y - แนวตั้ง)

ตัวอย่างเช่น หากคุณต้องการตรวจสอบให้แน่ใจว่าการเลื่อนแนวนอนจะไม่ปรากฏขึ้นเลย และการเลื่อนแนวตั้งจะปรากฏขึ้นเมื่อจำเป็นเท่านั้น (หากเนื้อหาไม่พอดี) ดังนั้นสำหรับองค์ประกอบ Html คุณจะต้องระบุ overflow-x:hidden และ overflow- ย:อัตโนมัติ เพียงเท่านี้ปัญหาก็จะได้รับการแก้ไขเพราะเบราว์เซอร์ทั้งหมดรองรับเคล็ดลับหูนี้

ความสูงและความกว้างเป็นเปอร์เซ็นต์ - เหตุใดคุณจึงต้องมีประเภทเอกสาร

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

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

ในอดีต หลังจากที่มาตรฐานถูกนำมาใช้แล้ว ยังคงเหมือนเดิม จำนวนมากเอกสารที่สร้างขึ้นตามกฎเกณฑ์เก่าของบริสุทธิ์ ภาษา HTMLและต้องทำอะไรบางอย่างกับพวกเขา ในเวลาเดียวกัน ก็มีการพัฒนาเช่นกัน (มีภาษามาร์กอัปรูปแบบเกิดขึ้น และแท็กและคุณลักษณะบางอย่างล้าสมัย) ดังนั้นจึงจำเป็นต้องแสดงเบราว์เซอร์ตามมาตรฐานใดที่จำเป็นในการแยกวิเคราะห์โค้ดนี้

เพื่อแยกเอกสารใหม่ (ซึ่งคำนึงถึงมาตรฐานที่เกิดขึ้นใหม่ทั้งหมด) และเอกสารเก่า (ซึ่งมักไม่ได้คำนึงถึงสิ่งอื่นใดนอกจาก Html ล้วนๆ) Melkosoft แนะนำให้ใช้คุณสมบัติเล็กๆ จากภาษา XML ที่เพิ่งปรากฏในเวลานั้น . คุณลักษณะนี้เคยเป็นคุณลักษณะของบริการ และตอนนี้เรียกว่าการประกาศประเภทเอกสาร

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

ดังนั้นเบราว์เซอร์จึงได้รับเครื่องหมายว่าควรใช้มาตรฐานใดในการแยกวิเคราะห์เอกสาร หากมีการประกาศประเภทเอกสาร ก็จะเข้าสู่โหมดมาตรฐาน หากเบราว์เซอร์ไม่พบประเภทเอกสารในบรรทัดแรกของรหัสเอกสาร (หรือเขียนไม่ถูกต้องซึ่งเหมือนกับไม่มีอยู่) จากนั้นเบราว์เซอร์จะไปที่สิ่งที่เรียกว่า โหมดเคล็ดลับ(โหมดนิสัยแปลกๆ)

เอกสารที่ไม่มีประเภทเอกสารจะปรากฏในเบราว์เซอร์ราวกับว่าเอกสารนั้นเก่ามาก (โบราณ) หากคุณเพิ่มการประกาศลงในเอกสารเดียวกันเบราว์เซอร์จะกำจัดโบราณวัตถุและเริ่มทำงานกับรหัสเอกสารตามมาตรฐานที่ยอมรับในปัจจุบันทั้งหมด

แต่แนวคิดเรื่องสมัยโบราณนั้นแตกต่างกันมาก ตัวอย่างเช่น คอลัมนิสต์ยอดนิยมในปัจจุบันสามารถมีโบราณวัตถุประเภทใดได้บ้าง? กูเกิลโครมซึ่งปรากฏเฉพาะในปี 2551? แน่นอนว่า IE มีประวัติค่อนข้างยาวนาน ดังนั้นเบราว์เซอร์ทุกเวอร์ชันจะแสดงเอกสารโดยไม่มีการประกาศ (ในโหมดแปลก ๆ หรือลูกเล่น) ในลักษณะเดียวกับเบราว์เซอร์รุ่นเก่า เนื่องจากนี่คือเวอร์ชันที่ถือเป็นเวอร์ชันพื้นฐาน

ทำไมฉันถึงพูดถึงโหมดการแสดงผลของเบราว์เซอร์มานานมาก? แต่เนื่องจากสำหรับทั้งสองโหมดนี้ การระบุความสูงของพื้นที่เนื้อหาเป็นเปอร์เซ็นต์จะแตกต่างกันมากเมื่อเทียบกับการคำนวณความสูงนี้

การตั้งค่าความสูง (เป็นเปอร์เซ็นต์) ของพื้นที่ที่มีเนื้อหาในโหมดมาตรฐาน (เมื่อระบุประเภทเอกสารที่ถูกต้องที่จุดเริ่มต้นของเอกสาร) จะไม่สามารถทำได้เลย เว้นแต่ความสูงของคอนเทนเนอร์ที่เนื้อหานี้ล้อมรอบอยู่ (ระบุโดย คุณเป็นเปอร์เซ็นต์ส่วนสูงจะถูกละเว้น)

หากเราลบการประกาศประเภทเอกสารออกจากรหัสเอกสาร เราจะเห็นภาพต่อไปนี้:

สำหรับโหมดของมาตรฐานต่อไปนี้ (การประกาศเขียนไว้ที่จุดเริ่มต้นของเอกสาร) คุณต้องตั้งค่าความสูงของคอนเทนเนอร์ก่อน (ในกรณีของเราสำหรับ Div คอนเทนเนอร์จะเป็นแท็ก Body) จากนั้นจึงตั้งค่าเบราว์เซอร์เท่านั้น จะจัดการความสูงได้อย่างถูกต้อง:100%:

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

หากคุณตั้งค่าความสูงและความกว้างสำหรับพื้นที่เนื้อหาสำหรับองค์ประกอบ Html ใดๆ และยังระบุช่องว่างภายในและความกว้างของเส้นขอบสำหรับแท็กนี้ด้วย ให้อยู่ในโหมด Quirks (โดยไม่มีการประกาศเป็นลายลักษณ์อักษร) ใน เบราว์เซอร์ที่แตกต่างกันทั้งหมดนี้สามารถตีความได้หลายวิธี

ในเบราว์เซอร์ IE 5.5 รุ่นเก่า ช่องว่างภายในและความกว้างของเฟรมจะนับเข้าด้านในจากขนาดที่ระบุผ่านความสูงและความกว้าง เหล่านั้น. ขนาดโดยรวมขององค์ประกอบจะสอดคล้องกับสิ่งที่ระบุไว้ในสิ่งเหล่านี้ คุณสมบัติซีเอสเอส(นี่เป็นรูปแบบที่ล้าสมัยซึ่งไม่ได้ใช้งานอีกต่อไป)

ในส่วนที่เหลือ เบราว์เซอร์ที่ทันสมัยช่องว่างภายในและความกว้างของเส้นขอบจะถูกเพิ่มในมิติที่ระบุในความสูงและความกว้าง เหล่านั้น. ในกรณีนี้ (โหมดหลอกลวงที่ไม่มีประเภทเอกสาร) ขนาดที่ระบุเริ่มต้นของพื้นที่เนื้อหาจะถูกขยายตามจำนวนช่องว่างภายในและเส้นขอบ

ถ้าคุณเขียนคำสั่งในเอกสารแล้วในเบราว์เซอร์สมัยใหม่และเก่าทั้งหมดปัญหาเหล่านี้เกี่ยวกับความเป็นคู่ของแนวทางสามารถหลีกเลี่ยงได้อย่างง่ายดาย ในกรณีนี้ และใน IE 5.5 ระยะห่างจากขอบและความกว้างของเส้นขอบจะบวกเข้ากับขนาดพื้นที่เนื้อหา ตามที่มาตรฐาน CSS สมัยใหม่กำหนด ดังนั้นเพื่อหลีกเลี่ยง ใช้ประเภทเอกสารเสมอ.

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

ตำแหน่ง (สัมบูรณ์ สัมพัทธ์ และคงที่) - วิธีการกำหนดตำแหน่ง องค์ประกอบ HTMLใน CSS (กฎซ้าย, ขวา, บนและล่าง)
ลอยและชัดเจนใน CSS - เครื่องมือเค้าโครงบล็อก
Padding, Margin และ Border - ตั้งค่าช่องว่างภายในและภายนอกใน CSS รวมถึงเส้นขอบสำหรับทุกด้าน (บน, ล่าง, ซ้าย, ขวา)
การจัดตำแหน่งโดยใช้กฎ Z-index และ CSS Cursor เพื่อเปลี่ยนเคอร์เซอร์ของเมาส์
CSS มีไว้ทำอะไร วิธีเชื่อมต่อสไตล์ชีทแบบเรียงซ้อน เอกสาร HTMLและไวยากรณ์พื้นฐานของภาษานี้
แท็ก คลาส รหัส และตัวเลือกสากล รวมถึงตัวเลือกแอตทริบิวต์ใน CSS สมัยใหม่ การออกแบบที่แตกต่างกันสำหรับภายในและ ลิงค์ภายนอกผ่านทาง CSS
ลำดับความสำคัญใน Css และการเพิ่มขึ้นเนื่องจากความสำคัญ การผสมผสานและการจัดกลุ่มตัวเลือก สไตล์ผู้ใช้และผู้แต่ง
แสดงผล (บล็อก ไม่มี อินไลน์) ใน CSS - ตั้งค่าประเภทการแสดงผลขององค์ประกอบ Html บนหน้าเว็บ
หน่วยขนาด (พิกเซล, Em และ Ex) และกฎการสืบทอดใน CSS

คำอธิบาย

หากต้องการปรับขนาดรูปภาพโดยใช้ HTML จะต้องระบุแอตทริบิวต์ความสูงและความกว้าง คุณสามารถใช้ค่าเป็นพิกเซลหรือเปอร์เซ็นต์ได้ หากตั้งค่ารายการเป็นเปอร์เซ็นต์ ขนาดรูปภาพจะถูกคำนวณโดยสัมพันธ์กับองค์ประกอบหลัก - คอนเทนเนอร์ที่มีแท็กอยู่ - หากไม่มีคอนเทนเนอร์หลัก หน้าต่างเบราว์เซอร์จะทำหน้าที่ดังกล่าว กล่าวอีกนัยหนึ่ง width="100%" หมายความว่ารูปภาพจะถูกขยายให้เต็มความกว้างของหน้าเว็บ การเพิ่มแอตทริบิวต์ความกว้างหรือความสูงเพียงรายการเดียวจะรักษาสัดส่วนและอัตราส่วนภาพของรูปภาพไว้ เบราว์เซอร์จะรอจนกว่ารูปภาพจะโหลดจนเต็มเพื่อกำหนดความสูงและความกว้างดั้งเดิม

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

ความกว้างและความสูงของภาพสามารถเปลี่ยนให้เล็กลงหรือใหญ่ขึ้นได้

ไวยากรณ์

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

ค่านิยม

XHTML

จำนวนเต็มบวกใดๆ ในหน่วยพิกเซลหรือเปอร์เซ็นต์

ค่าเริ่มต้น

ความกว้างเดิมของภาพ

แท็ก IMG แอตทริบิวต์ความกว้างสวัสดี

ผู้อ่านที่รัก

นี่คือบทเรียนที่สิบเอ็ดในการเรียนรู้ CSS ในบทนี้เราจะดูคุณสมบัติที่เรียบง่ายแต่สำคัญสองประการเท่านั้น คุณสมบัติเหล่านี้ควบคุมความสูงและความกว้างของบล็อก

ก่อนที่จะศึกษาบทเรียนนี้ ให้ศึกษาบทเรียนก่อนหน้านี้:

ในบทเรียนสุดท้าย เราดูว่าโมเดลบล็อกคืออะไร ระยะขอบภายในและภายนอก ในที่นี้เราจะดูเพียงสองคุณสมบัติเท่านั้น: ความสูงและความกว้างของบล็อก ความสูงใน CSS กำหนดโดยที่พัก ความสูง และความกว้างเป็นคุณสมบัติ ความกว้าง - ลองมาดูโค้ดโดยใช้ตัวอย่างจริง (ลองมาดูตัวอย่างจากบทเรียนที่แล้ว):

และใน CSS สำหรับแต่ละบล็อก