การตั้งค่าของหน้าเว็บนั้นต้องเป็นไปตามสัญชาตญาณ ในหลายกรณี การตั้งค่านี้ไม่เหมาะกับหน้าใดหน้าหนึ่งเลย เช่น เว็บไซต์ข่าวบางแห่งใช้การโหลดข้อมูลแบบเพจจิ้ง ทางด้านขวาของเบราว์เซอร์จะมีแถบเลื่อนซึ่งเป็นองค์ประกอบที่อธิบายไว้ในบทความนี้เสมอ ในหน้าเว็บ เมื่อหน้าเว็บหนึ่งไม่สามารถรองรับข้อมูลทั้งหมดได้ เราก็มักจะใช้การโอเวอร์โฟลว์ในการตั้งค่า
บทบาทของแอตทริบิวต์โอเวอร์โฟลว์คือการระบุว่าจะเกิดอะไรขึ้นเมื่อเนื้อหาล้นกล่ององค์ประกอบ และกำหนดวิธีจัดการเนื้อหาที่ล้นพื้นที่เนื้อหาขององค์ประกอบ
1.ล้น
เพื่อให้จัดการเนื้อหาล้นได้ดีขึ้น CSS จึงจัดเตรียมแอตทริบิวต์ที่เรียกว่าโอเวอร์โฟลว์ คุณลักษณะนี้สามารถตั้งค่าวิธีจัดการเนื้อหาของพื้นที่เนื้อหาองค์ประกอบโอเวอร์โฟลว์ได้ดังแสดงในตารางต่อไปนี้:
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{ล้น:au to;}</style></head><body><divclass=hidden>การตั้งค่าของหน้าเว็บเป็นแบบสัญชาตญาณ ในหลายกรณี การตั้งค่านี้ไม่ตรงกับหน้าใดหน้าหนึ่ง ตัวอย่างเช่น เว็บไซต์ข่าวบางแห่งใช้การแบ่งหน้า กำลังโหลดข้อมูล หากคุณต้องการดูเพิ่มเติม มีข้อความจำนวนมากและคุณต้องเลื่อนลงไปเรื่อยๆ จะมีแถบเลื่อนทางด้านขวาของเบราว์เซอร์ นี่คือองค์ประกอบที่อธิบายไว้ในเว็บนี้ เมื่อหน้าหนึ่งไม่สามารถรองรับข้อมูลทั้งหมดได้ เรามักจะใช้การตั้งค่าที่ล้น บทบาทของแอตทริบิวต์โอเวอร์โฟลว์คือการระบุว่าจะเกิดอะไรขึ้นเมื่อเนื้อหาล้นกล่ององค์ประกอบ และกำหนดวิธีจัดการเนื้อหาที่ล้นพื้นที่เนื้อหาขององค์ประกอบ <div> การเลื่อน จะมีแถบเลื่อนทางด้านขวาของเบราว์เซอร์เสมอ นี่คือองค์ประกอบที่อธิบายไว้ในบทความนี้ เมื่อหน้าเว็บหนึ่งไม่สามารถรองรับข้อมูลทั้งหมดได้ เรามักจะใช้การโอเวอร์โฟลว์เพื่อตั้งค่า บทบาทของแอตทริบิวต์โอเวอร์โฟลว์คือการระบุว่าจะเกิดอะไรขึ้นเมื่อเนื้อหาล้นกล่ององค์ประกอบ และกำหนดวิธีจัดการเนื้อหาที่ล้นพื้นที่เนื้อหาขององค์ประกอบ <div> การเลื่อน จะมีแถบเลื่อนทางด้านขวาของเบราว์เซอร์เสมอ นี่คือองค์ประกอบที่อธิบายไว้ในบทความนี้ เมื่อหน้าเว็บหนึ่งไม่สามารถรองรับข้อมูลทั้งหมดได้ เรามักจะใช้การโอเวอร์โฟลว์เพื่อตั้งค่า บทบาทของแอตทริบิวต์โอเวอร์โฟลว์คือการระบุว่าจะเกิดอะไรขึ้นเมื่อเนื้อหาล้นกล่ององค์ประกอบ และกำหนดวิธีจัดการเนื้อหาที่ล้นพื้นที่เนื้อหาขององค์ประกอบ </div></body></html>ผลการวิ่ง:
2.overflow-x, ล้น-y
CSS3 ยังมีแอตทริบิวต์สองตัวคือ overflow-x และ overflow-y
overflow-x: กำหนดวิธีจัดการกับเนื้อหาล้นเมื่อเนื้อหาของพื้นที่เนื้อหาขององค์ประกอบล้นองค์ประกอบในทิศทางแนวนอน
overflow-y: กำหนดวิธีจัดการเนื้อหาล้นเมื่อเนื้อหาของพื้นที่เนื้อหาขององค์ประกอบล้นองค์ประกอบในทิศทางแนวตั้ง
3. การใช้มนต์ขลังของน้ำล้น
การใช้งานครั้งแรก: แก้ปัญหาการจัดส่งแบบ Margin-top
ปัญหาการถ่ายโอน Margin-top: Margin-top ขององค์ประกอบลูกจะนำองค์ประกอบหลักลงมารวมกัน ซึ่งสามารถแก้ไขได้โดยการเพิ่ม overflow:hidden ให้กับองค์ประกอบหลัก
การใช้งานครั้งที่สอง: ล้างผลกระทบของการลอยตัว - ความสูงขององค์ประกอบหลักยุบลง
วิธีการกำจัดแบบสากล
ล้น: ซ่อนอยู่
ชัดเจน: ทั้งสองอย่าง
การใช้งานที่สาม: เปิดเผยและซ่อนแอนิเมชั่นนอกเหนือจากการซ่อน
การใช้งานที่สี่: ข้อความบรรทัดเดียวเกินการละเว้น
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>การเขียนโปรแกรม dotcpp</title><styletype=text/css>#{margin:0px;padding:0px;}ส่วน{width:800px; ความสูง:460px;marg in:auto;}บทความ{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin:10px50px;} .บท_1 {สีพื้นหลัง:#A3A3A3;}.chapter_2{สีพื้นหลัง:#81559d;}.chapter_3{สีพื้นหลัง:#54709d;}.chapter_4{สีพื้นหลัง:#4f9d89;} ส่วน:โฮเวอร์ >บทความ{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>เล่มที่ 1</ h3 <p>ยินดีต้อนรับสู่โลกแห่งภาษา C! ภาษา C เป็นภาษาโปรแกรมที่ทรงพลังและเชี่ยวชาญซึ่งเป็นที่นิยมในหมู่โปรแกรมเมอร์มือสมัครเล่นและมืออาชีพ ให้เราเข้าใจและรับรู้ก่อนเรียนรู้! ต้นแบบของภาษา C คือภาษา A (ภาษา ALGOL60) </p></article><articleclass=chapter_2><h3>เล่ม 2</h3><p>ยินดีต้อนรับสู่โลกแห่งภาษา C! ภาษา C เป็นภาษาโปรแกรมที่ทรงพลังและเชี่ยวชาญซึ่งเป็นที่นิยมในหมู่โปรแกรมเมอร์มือสมัครเล่นและมืออาชีพ ให้เราเข้าใจและรับรู้ก่อนเรียนรู้! ต้นแบบของภาษา C คือภาษา A (ภาษา ALGOL60) </p></article><articleclass=chapter_3><h3>เล่ม 3</h3><p>ยินดีต้อนรับสู่โลกแห่งภาษา C! ภาษา C เป็นภาษาโปรแกรมที่ทรงพลังและเชี่ยวชาญซึ่งเป็นที่นิยมในหมู่โปรแกรมเมอร์มือสมัครเล่นและมืออาชีพ ให้เราเข้าใจและรับรู้ก่อนเรียนรู้! ต้นแบบของภาษา C คือภาษา A (ภาษา ALGOL60) </p></article><articleclass=chapter_4><h3>เล่ม 4</h3><p>ยินดีต้อนรับสู่โลกแห่งภาษา C! ภาษา C เป็นภาษาโปรแกรมที่ทรงพลังและเชี่ยวชาญซึ่งเป็นที่นิยมในหมู่โปรแกรมเมอร์มือสมัครเล่นและมืออาชีพ ให้เราเข้าใจและรับรู้ก่อนเรียนรู้! ต้นแบบของภาษา C คือภาษา A (ภาษา ALGOL60) </p></บทความ></ส่วน></ร่างกาย></html>ผลการวิ่ง:
