คุณลักษณะการแสดงผลเป็นหนึ่งในคุณลักษณะที่สำคัญที่สุดใน CSS ส่วนใหญ่จะใช้เพื่อควบคุมเค้าโครงขององค์ประกอบ คุณสามารถตั้งค่าได้ว่าจะแสดงองค์ประกอบหรือไม่และอย่างไร
1. บทบาทของแอตทริบิวต์การแสดงผล
1. คุณลักษณะการแสดงผลสามารถตั้งค่าประเภทการแสดงผลภายในและภายนอกขององค์ประกอบได้
(1) ประเภทการแสดงผลภายนอก:
ก. องค์ประกอบการแสดงผลภายนอก ได้แก่ บล็อก อินไลน์ ฯลฯ
ข. ประเภทการแสดงผลภายนอกจะกำหนดประสิทธิภาพขององค์ประกอบในรูปแบบของเหลว
(2) ประเภทการแสดงผลภายใน:
ประเภทการแสดงผลภายใน ได้แก่ เค้าโครงแบบยืดหยุ่น เค้าโครงตาราง เค้าโครงแบบไหล ฯลฯ
ประเภทการแสดงผลภายในขององค์ประกอบจะควบคุมวิธีการจัดวางองค์ประกอบย่อย
2. รูปแบบของเหลว (การไหลของเอกสารหรือการไหลปกติ):
"การไหลของเอกสาร" หรือ "เค้าโครงแบบไหล" เป็นวิธีการแสดงองค์ประกอบ "บล็อก" และ "อินไลน์" บนเพจก่อนที่จะทำการเปลี่ยนแปลงใดๆ กับเค้าโครง (โดยค่าเริ่มต้น)
เพื่อให้เข้าใจง่ายและตรงไปตรงมา นี่เป็นวิธีการเรียงพิมพ์ที่กำหนดวิธีการพิมพ์และแสดงองค์ประกอบระดับบล็อกและองค์ประกอบอินไลน์บนเพจ
(1) ในเค้าโครงโฟลว์ - วิธีการจัดวางองค์ประกอบระดับบล็อก:
กล่องระดับบล็อกจะจัดเรียงในแนวตั้งตามลำดับ โดยเริ่มจากด้านบนของบล็อกที่มี
ระยะห่างแนวตั้งระหว่างกล่องในระดับเดียวกันจะถูกกำหนดโดยแอตทริบิวต์ "margin"
ระยะห่างแนวตั้งระหว่างกล่องระดับบล็อกสองกล่องที่อยู่ติดกันจะถูกยุบตามหลักการพับระยะขอบ
(2) ในรูปแบบของเหลว - วิธีการจัดวางองค์ประกอบแบบอินไลน์:
กล่องจะจัดเรียงตามแนวนอนโดยเริ่มจากด้านบนของบล็อกที่บรรจุ
เฉพาะระยะขอบแนวนอน เส้นขอบ และช่องว่างภายในเท่านั้นที่จะถูกรักษาไว้
กล่องสามารถจัดแนวในแนวตั้งได้หลายวิธี: ด้านล่างหรือด้านบน หรือการจัดข้อความด้านล่าง
2. องค์ประกอบประเภทการแสดงผลภายนอก
1. splay ระบุประเภทการแสดงผลขององค์ประกอบผ่านค่าแอตทริบิวต์ต่อไปนี้
(1) บล็อกระดับบล็อก
(2) บล็อกอินไลน์บล็อกอินไลน์
(3) แบบอินไลน์
2. ประเภทการแสดงองค์ประกอบแบ่งออกเป็น: ระดับบล็อกและอินไลน์ ฯลฯ
3. องค์ประกอบอินไลน์ (อินไลน์) แบ่งออกเป็น: องค์ประกอบอินไลน์อินไลน์และองค์ประกอบบล็อกอินไลน์อินไลน์
(1) องค์ประกอบระดับบล็อก diblock
1. องค์ประกอบระดับบล็อกทั่วไปคือ:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl> ฯลฯ
2. ลักษณะขององค์ประกอบระดับบล็อก:
(1) สายพิเศษ
(2) คุณสามารถตั้งค่าแอตทริบิวต์ความกว้างและความสูงได้
(3) หากไม่ได้ตั้งค่าความกว้าง ความกว้างจะมีค่าเริ่มต้นเป็นความกว้างของพื้นที่เนื้อหาขององค์ประกอบหลัก
(4) องค์ประกอบประเภทใดก็ได้สามารถวางในองค์ประกอบระดับบล็อกได้ แต่องค์ประกอบบล็อกอื่น ๆ ไม่สามารถวางในแท็กองค์ประกอบข้อความได้
(5) แท็ก p และ div ไม่สามารถวางในแท็ก p ได้
(6) แท็ก p และ div ไม่สามารถวางในแท็ก h1-h6 ได้
(2) องค์ประกอบบล็อกแบบอินไลน์บล็อกแบบอินไลน์
1. องค์ประกอบต่อไปนี้มีลักษณะเฉพาะขององค์ประกอบบล็อกแบบอินไลน์:
<img> องค์ประกอบรูปแบบ <video> <audio> ฯลฯ องค์ประกอบเหล่านี้เรียกว่าองค์ประกอบที่เปลี่ยนได้ (จัดเป็นองค์ประกอบแบบอินไลน์)
2. ลักษณะขององค์ประกอบบล็อกอินไลน์:
(1) องค์ประกอบอินไลน์บล็อก (หรืออินไลน์) ที่อยู่ติดกันจะแสดงในหนึ่งบรรทัด หากไม่สามารถวางได้ องค์ประกอบเหล่านั้นจะถูกตัดไปยังอีกบรรทัดหนึ่ง
(2) จะมีช่องว่างระหว่างองค์ประกอบบล็อกอินไลน์ที่อยู่ติดกัน
(3) สามารถตั้งค่าแอตทริบิวต์ความกว้างและความสูงได้ ความกว้างเริ่มต้นขององค์ประกอบคือความกว้างของเนื้อหาของตัวเอง
(3) องค์ประกอบอินไลน์อินไลน์ (อินไลน์)
1. องค์ประกอบอินไลน์ทั่วไปได้แก่:
<a>, <strong>, <span>, <i>, <del> ฯลฯ
2. ลักษณะขององค์ประกอบอินไลน์:
องค์ประกอบอินไลน์ที่อยู่ติดกันจะแสดงในหนึ่งบรรทัด หากไม่พอดี องค์ประกอบเหล่านั้นจะถูกแสดงในบรรทัดใหม่
การตั้งค่าคุณสมบัติความกว้างและความสูงไม่ถูกต้อง ความกว้างและความสูงจะขยายตามขนาดของเนื้อหา
สามารถวางได้เฉพาะข้อความหรือองค์ประกอบอินไลน์อื่นๆ ภายในองค์ประกอบอินไลน์
3. หมายเหตุ:
ไม่สามารถวางแท็ก <a> ภายในแท็ก <a> ได้ แต่สามารถวางองค์ประกอบระดับบล็อกภายในแท็ก <a> ได้
ในการพัฒนาจริง แท็ก <a> จะถูกแปลงเป็นองค์ประกอบระดับบล็อกในบางกรณี
การเปรียบเทียบองค์ประกอบสามประเภท
3. การแปลงระหว่างองค์ประกอบอินไลน์และองค์ประกอบระดับบล็อก
เราจำเป็นต้องเพิ่มค่าแอตทริบิวต์การแสดงผลที่สอดคล้องกันให้กับองค์ประกอบที่เกี่ยวข้องเพื่อแปลงองค์ประกอบให้เป็นประเภทองค์ประกอบที่เกี่ยวข้อง
(1) ใช้ display: block เพื่อแปลงองค์ประกอบให้เป็นองค์ประกอบระดับบล็อก
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;สีพื้นหลัง:#ACC;line-height:50px;text-align:center;การตกแต่งข้อความ: none;}</style></head><body><ahref=>ลิงก์การเขียนโปรแกรม dotcpp</a></body></html>ผลการวิ่ง:
(2) ใช้ display: inline เพื่อแปลงองค์ประกอบให้เป็นองค์ประกอบแบบอินไลน์ อย่างไรก็ตาม มีแอปพลิเคชันไม่กี่รายการในการแปลงองค์ประกอบให้เป็นองค์ประกอบแบบอินไลน์
(3) ใช้ display: inline-block เพื่อแปลงองค์ประกอบให้เป็นองค์ประกอบบล็อกอินไลน์
4. วิธีการองค์ประกอบที่ซ่อนอยู่
เติมเงิน:
(1) ค่าที่แสดงนอกเหนือจากไม่มีเป็นองค์ประกอบการแสดงผล
(2) การมองเห็น: มองเห็นได้; เป็นองค์ประกอบการแสดงผล
ตัวอย่าง:
ค่าแอตทริบิวต์ none of display สามารถใช้เพื่อซ่อนองค์ประกอบได้ มีฟังก์ชันคล้ายกับการมองเห็น: ซ่อน; display: none มักจะใช้ร่วมกับ JavaScript เพื่อซ่อนหรือแสดงองค์ประกอบ นี่คือตัวอย่างที่จะแสดง:
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;สีพื้นหลัง:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>ซ่อน</button><script>functionchan ge_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style.display=;obj.innerHTML=hide;}else{box.style. display=none;obj.innerHTML=display;}}</script></body></html>ผลการวิ่ง:
5. ความแตกต่างระหว่างวิธีการซ่อนทั้งสองวิธี
6. ลบช่องว่างเริ่มต้นขององค์ประกอบบล็อกแบบอินไลน์
ช่องว่างจะถูกสร้างขึ้นโดยค่าเริ่มต้นระหว่างองค์ประกอบบล็อกแบบอินไลน์
สาเหตุของช่องว่าง:
(1) เมื่อองค์ประกอบถูกจัดรูปแบบเป็นองค์ประกอบแบบอินไลน์ เบราว์เซอร์จะประมวลผลอักขระช่องว่าง (ช่องว่าง การขึ้นบรรทัดใหม่ การป้อนบรรทัด ฯลฯ) ระหว่างองค์ประกอบต่างๆ
(2) ตามวิธีการประมวลผลของช่องว่าง (ค่าเริ่มต้นคือปกติ ซึ่งรวมช่องว่างส่วนเกินเข้าด้วยกัน) การขึ้นบรรทัดใหม่และการป้อนบรรทัดในโค้ด HTML ต้นฉบับจะถูกแปลงเป็นอักขระช่องว่าง ดังนั้นช่องว่างจึงปรากฏขึ้นระหว่างองค์ประกอบ
(3) ระยะห่างระหว่างองค์ประกอบเหล่านี้จะเปลี่ยนไปตามขนาดของแบบอักษร
สารละลาย:
(1) เพิ่มองค์ประกอบหลักและเขียนขนาดตัวอักษรขององค์ประกอบลูกใหม่พร้อมกัน
แอตทริบิวต์ขนาดตัวอักษรมีการสืบทอด ดังนั้นองค์ประกอบหลัก font-size:0; จะถูกสืบทอดไปยังช่วงองค์ประกอบลูก และองค์ประกอบลูกจำเป็นต้องรีเซ็ตขนาดตัวอักษร
(2) เพิ่ม float ให้กับองค์ประกอบ
หลังจากเพิ่มโฟลตให้กับองค์ประกอบแล้ว มันจะแยกออกจากโฟลว์เอกสาร เมื่อไม่ได้เพิ่มความสูงขององค์ประกอบหลัก จะเกิดปัญหาความสูงยุบ และปัญหาที่เกิดจากการลอยตัวจะต้องได้รับการแก้ไข
(3) ในช่องว่างระหว่างรูปภาพ ให้เพิ่ม display:block;
หลังจากเพิ่ม display:block รูปภาพจะกลายเป็นองค์ประกอบระดับบล็อกและครอบครองบรรทัดพิเศษ