ความแตกต่างระหว่าง visibility: hidden; กับ display: none;

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

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

ความแตกต่างระหว่าง visibility: hidden; กับ display: none;

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

ในการปรับผลลัพธ์การแสดงของเว็บไซต์เพื่อ ที่จะทำให้สามารถรองรับการใช้งานกับอุปกรณ์ต่างๆได้ ทั้ง ใน มือถือ หรือ pc ก็ตาม ให้มีความสวยงามนั้น จำเป็นต้องใช้ความสามารถด้าน css และ html โดยใหญ่นั้นการที่จะทำให้หน้าเว็บไซต์จะสามารถที่จะแสดงผลได้ทั้งบน มือถือ หรือ pc นั้นจะเป็นการปรับขนาดของ html โดยจะใช้ css กำกับแต่ในบางครั่งการที่จะทำให้ผลการแสดงทั้งหมดที่ pc มองเห็นนั้นก็ไม่ได้มีส่วนที่จำเป็นที่ ใน มือถือ จะมองเห็นด้วย ดังนั้น ผุ้พัฒนาจำเป็นต้องใช้คำสั่งไว้สำหรับการทำไม่ให้ผลการแสดงส่วน มีการแสดงออกมาก โดยการใช้คำสั่งใน css เท่านั้นโดยไม่จำเป็นต้องใช้คำสั่ง javascript แต่อย่างใด โดยคำสั่งที่จะใช้กันบ่อยก็คือ visibility: hidden; กับ display: none; แต่หลายคคนอาจจะยังไม่ทราบว่า ทั้ง 2 มีความแตกต่างกันอย่างไง

1.display: none; จะเป็นการทำให้โคดส่วนนั้นไม่มีแสดงผลและไม่มีผลกระทบต่อการแสดงบนหน้าเว็บไซต์แต่ยังถือว่า โคดส่วนนั้นยังมีค่าอยู่

ตัวอย่างเช่น

โค้ด: เลือกทั้งหมด

    
    .search_show{
         display: none;
    }
 
Selection_999(2394).png
Selection_999(2394).png (108.81 KiB) Viewed 3167 times

2.visibility: hidden; จะเป็นการทำให้โคดส่วนนั้นไม่มีแสดงผล แต่มีผลกระทบต่อการแสดงบนหน้าเว็บไซต์แต่ยังถือว่า โคดส่วนนั้นยังมีค่าอยู่

ตัวอย่างเช่น

โค้ด: เลือกทั้งหมด

    
    .search_show{
          visibility: hidden;
    }
Selection_999(2395).png
Selection_999(2395).png (92.97 KiB) Viewed 3167 times
บทความที่เกี่ยวข้อง

CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ
ขอให้วันนี้เป็นวันที่ดี
GitaSingh
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 28/07/2020 2:19 pm

Re: ความแตกต่างระหว่าง visibility: hidden; กับ display: none;

โพสต์ที่ยังไม่ได้อ่าน โดย GitaSingh »

visibility: hidden preserve the space, whereas display: none doesn't preserve the space. If visibility property set to "hidden", the browser will still take space on the page for the content even though it's invisible.
malkovich
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 02/09/2020 5:05 pm

Re: ความแตกต่างระหว่าง visibility: hidden; กับ display: none;

โพสต์ที่ยังไม่ได้อ่าน โดย malkovich »

ฉันหาข้อมูลนี้มานานแล้วฉันรู้สึกประหลาดใจมากเมื่อพบที่นี่
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 27