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

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

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

Post by Ittichai_chupol »

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

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

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

Code: Select all

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

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

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

Code: Select all

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

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

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

Post by 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
Posts: 2
Joined: 02/09/2020 5:05 pm

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

Post by malkovich »

ฉันหาข้อมูลนี้มานานแล้วฉันรู้สึกประหลาดใจมากเมื่อพบที่นี่
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests