ความแตกต่างระหว่าง 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 492 times

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

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

Code: Select all

    
    .search_show{
          visibility: hidden;
    }
Selection_999(2395).png
Selection_999(2395).png (92.97 KiB) Viewed 492 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.

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests