ตั้งค่าความกว้างเป็น 200 พิกเซล (px):

มาดูกันว่ามันมีลักษณะอย่างไรในเบราว์เซอร์

หมวดหมู่: . 2 ความคิดเห็น เผยแพร่: 09/02/2012

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

บล็อกความสูงและความกว้างใน CSS

ตอนนี้เรามาดูฟังก์ชั่นหลักที่จะช่วยเราจัดการกัน รูปร่างและตำแหน่งของบล็อกไซต์ และหลังจากนั้นเราจะต้องนำความรู้ทั้งหมดนี้ไปปฏิบัติจริง และเราจะสร้างเฟรมที่เรียบง่ายสำหรับไซต์

ความสูงของบล็อกใน CSS ถูกกำหนดโดยใช้คำสั่ง height: auto|<высота в единицах измерения>|สืบทอด และตามที่คุณเข้าใจแล้ว เราสามารถกำหนดความสูงของบล็อกได้โดยใช้คำสั่ง auto เราให้คำสั่งแก่เบราว์เซอร์ว่าสามารถกำหนดขนาดของบล็อกได้ ดังนั้นบล็อกจะมีขนาดเท่าที่ ลงตัวทุกองค์ประกอบและไม่มากไปกว่านี้

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

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

คำสั่งนี้จะบอกเบราว์เซอร์ว่าองค์ประกอบเฉพาะบนเพจควรตั้งค่าเป็นขนาดสิบเปอร์เซ็นต์ของขนาดของบล็อกหลัก

ความกว้างของบล็อกใน CSS ถูกตั้งค่าโดยใช้พารามิเตอร์ width: auto|<ширина>|สืบทอดพารามิเตอร์ทั้งหมดจะคล้ายกันทั้งความสูงและความกว้างของบล็อกและฉันคิดว่าไม่จำเป็นต้องทำซ้ำอีกครั้ง ฉันแค่อยากจะบอกว่าไม่จำเป็นต้องตั้งค่าทั้งความสูงและความกว้างของบล็อกโดยเฉพาะคุณสามารถตั้งค่าความกว้างและความสูงได้ขึ้นอยู่กับเนื้อหาซึ่งสะดวกมากถ้าคุณไม่ทำ รู้ว่าเนื้อหาใดบ้างที่จะอยู่ในหน้าใดหน้าหนึ่ง

ความกว้างของบล็อกขั้นต่ำและสูงสุด

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

การตั้งค่านี้ง่ายมาก เราจำเป็นต้องตั้งค่าพารามิเตอร์ต่อไปนี้เพื่อกำหนดความกว้างและความสูงขั้นต่ำ:

ความกว้างขั้นต่ำ:<ширина>

ความสูงขั้นต่ำ:<высота>

และจำเป็นต้องมีพารามิเตอร์สองตัวสูงสุด:

ความกว้างสูงสุด:<ширина>
ความสูงสูงสุด:<высота>

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

ตัวเลือกสำหรับการวางตำแหน่งลอยใน css

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

พารามิเตอร์ float สามารถรับค่าได้หลายค่า และตอนนี้เราจะทราบว่าพารามิเตอร์เหล่านี้คืออะไร:

ลอย: ซ้าย | ขวา | ไม่มี | สืบทอด

ตอนนี้เรามาดูแต่ละตัวอย่างแยกกัน

คำสั่ง float: left หมายความว่าบล็อกควรจัดชิดซ้าย และองค์ประกอบอื่นๆ ทั้งหมดจะไหลรอบๆ บล็อกไปทางขวา

float:right ตรงกันข้ามกับคำสั่งก่อนหน้า ดังนั้นบล็อกจะถูกจัดชิดขวาและองค์ประกอบทั้งหมดจะไหลรอบๆ บล็อกไปทางซ้าย

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

ล้างพารามิเตอร์ใน css

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

ชัดเจน: ซ้าย|ขวา|ทั้งสอง|ไม่มี|สืบทอด

คำสั่งมีพารามิเตอร์สี่ตัว และตอนนี้เราจะมาดูกันอย่างชัดเจนว่าแต่ละฟังก์ชันทำงานอย่างไร

คำสั่ง clear: left หมายความว่าองค์ประกอบนั้นอยู่ใต้องค์ประกอบทั้งหมดด้วยพารามิเตอร์ float: left

คำสั่ง clear:right วางบล็อกไว้ใต้องค์ประกอบทั้งหมดที่มี float: right

พารามิเตอร์ clear:both จะวางองค์ประกอบไว้ใต้บล็อกทั้งหมดโดยมีพารามิเตอร์ทั้ง float: left และ float: right

clear:none เป็นพฤติกรรมปกติสำหรับบล็อก ไม่ควรระบุพารามิเตอร์นี้หากเคยวางคอนเทนเนอร์แบบลอยมาก่อน

เราใช้ความรู้ทั้งหมดในทางปฏิบัติ

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

ดังที่เราเห็น สำหรับโครงร่าง เราจะต้องสร้างบล็อก DIV สี่บล็อก และสำหรับบล็อกเหล่านั้น เราจะต้องใช้ทั้งพารามิเตอร์ขนาดและพารามิเตอร์ตำแหน่ง

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

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

ส่วนหัว(กว้าง:500px; ความกว้างของบล็อก
ความสูง:100px; ความสูงของบล็อก
สีพื้นหลัง:#33CCFF;) สีบล็อก

เนื้อหา(กว้าง:400px; ความกว้างของบล็อก
ความสูง:400px; ความสูงของบล็อก
สีพื้นหลัง: #33FF33; สีบล็อก
float: left;) ตำแหน่งบล็อก

แถบด้านข้าง(กว้าง:100px; ความกว้างของบล็อก
ความสูง:400px; ความสูงของบล็อก
สีพื้นหลัง: #CCCCCC; สีบล็อก
float:left;) ตำแหน่งบล็อก

ส่วนท้าย (กว้าง: 500px; ความกว้างของบล็อก
ความสูง:100px; ความสูงของบล็อก
สีพื้นหลัง: #0000FF; สีบล็อก
clear:both;) ตำแหน่งบล็อกมาตรฐาน

และหลังจากที่เราเขียนคำสั่งทั้งหมดนี้แล้ว เราก็จะได้เฟรมเวิร์กดังกล่าวสำหรับไซต์

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

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

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

ลองดูตัวอย่างของบล็อก กองเรามาทำกันเถอะ HTMLเครื่องหมาย

พฤติกรรมความสูงของบล็อก

มองไม่เห็นบล็อกว่างบนหน้า และเพื่อให้มองเห็นได้ คุณต้องกำหนดความสูงหรือแทรกเนื้อหาไว้ข้างใน

ร่างกาย (
พื้นหลัง: #d5d5d5;
}

ดิวิชั่น (
พื้นหลัง: #d56287;
ความสูง: 100px;
}

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

พฤติกรรมของการบล็อกเนื้อหา

การถอดความสูง ความสูงและวางข้อความภายในบล็อก

ดิวิชั่น (
พื้นหลัง: #d56287;
}

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

ปิดกั้นลำดับความสำคัญ

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

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

การซ่อนเนื้อหาที่ไม่จำเป็นในบล็อก

ต้องเพิ่มเข้าไป ซีเอสเอสคุณสมบัติรหัส ล้น: ซ่อนเร้น

ดิวิชั่น (
พื้นหลัง: #d56287;
ความสูง: 100px;
ล้น: ซ่อนเร้น;
}

ทุกอย่างที่ไม่พอดีกับบล็อกจะถูกซ่อนไว้เราจะเห็นว่าข้อความถูกตัดออกไปน่าเกลียดแค่ไหน

หากคุณต้องการแสดงเนื้อหาทั้งหมดของบล็อก คุณสามารถใช้การเลื่อน จากนั้นคุณควรเขียนลงในบล็อกแทน ที่ซ่อนอยู่.

ล้น: เลื่อน;

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

พฤติกรรมความกว้างของบล็อก

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

ดิวิชั่น (
พื้นหลัง: #d56287;
ความสูง: 100px;
ความกว้าง: 200px;
}

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

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

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

จอแสดงผล: อินไลน์บล็อก;

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

Mine จะช่วยให้คุณเปลี่ยนจากทฤษฎีไปสู่การปฏิบัติและสร้างเว็บไซต์แรกของคุณ

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

วิธีแก้ปัญหาแต่ละข้อมีข้อดีและข้อเสียของตัวเอง ฉันต้องการมุ่งเน้นไปที่ minuses เนื่องจากโดยปกติแล้วจะสะท้อนถึงข้อเสียของการตัดสินใจเหล่านี้อย่างชัดเจนซึ่งเราต้องเลือกระหว่างความชั่วร้ายสองประการ

แก้ไขความกว้างของตารางเค้าโครง

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

ตารางเค้าโครง "ยาง" พาดผ่านความกว้างของหน้าต่าง

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

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

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

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

สร้างคอนเทนเนอร์เค้าโครง:
...


เราตกแต่งด้วยโค้ดสไตล์เรียบง่าย:
div.page-container ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 75%; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; )
อย่างไรก็ตาม วิธีแก้ปัญหานี้อาจดูไม่เพียงพอสำหรับบางคน เนื่องจากขนาดหน้าต่างแนวนอนที่ใหญ่มาก ปัญหาเกี่ยวกับความยาวของเส้นก็ปรากฏขึ้นอีกครั้ง สิ่งนี้สามารถแก้ไขได้ด้วยเทคนิคเพิ่มเติมง่ายๆ ไม่แพ้กัน: สร้างคอนเทนเนอร์ภายนอกเพิ่มเติมภายในคอนเทนเนอร์ที่อธิบายไว้แล้วและจำกัดความกว้างสูงสุดให้เป็นค่าคงที่ (สำหรับฉันแล้วดูเหมือนว่าค่าในช่วง 1,400-1600 พิกเซลนั้น เหมาะที่สุด) ขอย้ำอีกครั้งว่าเราใช้เครื่องมือ CSS 2.0 เท่านั้น วิธีแก้ปัญหานี้ แทนที่จะเพิ่มความกว้างเป็นเปอร์เซ็นต์สำหรับคอนเทนเนอร์ดั้งเดิมตามที่เสนอในความคิดเห็นแรก แต่จะทำงานใน IE ด้วยเช่นกัน ซึ่งจนถึงเวอร์ชัน 9 จะไม่เข้าใจการบ่งชี้ค่าพร้อมกัน

การเพิ่ม HTML:
...

และเปลี่ยน CSS เล็กน้อย:
div.page-container ( ความกว้างสูงสุด: 75%; ความกว้างขั้นต่ำ: 960px; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; ) div.page-container-inner ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 1600px; ระยะขอบ : 0 อัตโนมัติ;
อย่างที่คุณเห็นวิธีแก้ปัญหานั้นง่ายมากและค่อนข้างเป็นสากล มันสามารถนำไปใช้กับองค์ประกอบบล็อกใดก็ได้

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

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

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

ความกว้างรวมขององค์ประกอบคำนวณโดยใช้สูตร:

กอง(กว้าง: 150px; /* กำหนดความกว้างขององค์ประกอบ */ความสูง: 150px; /* กำหนดความสูงขององค์ประกอบ */ช่องว่างภายใน: 10px; /* กำหนดช่องว่างภายในขององค์ประกอบ */เส้นขอบ: 5px; /* กำหนดเส้นขอบขององค์ประกอบ */ }

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

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

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

150px (ความกว้างที่กำหนดเอง) + 10px (ช่องว่างภายในด้านซ้าย) + 10px (ช่องว่างภายในด้านขวา) + 10px (เส้นขอบด้านซ้าย) + 10px (เส้นขอบด้านขวา) = 190px

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

ผลลัพธ์ของตัวอย่างของเรา:

การควบคุมการล้นขององค์ประกอบบล็อก

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

ลองดูตัวอย่างต่อไปนี้:

ใน ในตัวอย่างนี้เราโพสต์ สี่บล็อกของความกว้างและความสูงคงที่ซึ่งระบุค่าที่แตกต่างกัน คุณสมบัติซีเอสเอสล้น:

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

ผลลัพธ์ของตัวอย่างของเรา