เค้าโครง CSS - คุณสมบัติการแสดงผล

สารบัญ

    แสดงสารบัญ

คุณสมบัติ display เป็นคุณสมบัติ CSS ที่สำคัญที่สุดในการควบคุมเค้าโครง

คุณสมบัติการแสดงผล

คุณสมบัติ display ระบุว่าองค์ประกอบจะแสดงหรือไม่

องค์ประกอบ HTML ทุกรายการมีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับประเภท ของธาตุนั่นเอง ค่าที่แสดงเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่คือ block หรือ <รหัส class="w3-codespan">อินไลน์.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

องค์ประกอบระดับบล็อก

องค์ประกอบระดับบล็อกจะเริ่มต้นด้วยบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่มีอยู่ (ยืดออกไปซ้ายและขวาเท่าที่จะทำได้)

The <div> element is a block-level element.

ตัวอย่างขององค์ประกอบระดับบล็อก:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

องค์ประกอบแบบอินไลน์

องค์ประกอบอินไลน์ไม่ได้ขึ้นบรรทัดใหม่และใช้ความกว้างมากเท่าที่จำเป็นเท่านั้น

นี่คือ องค์ประกอบ <span> แบบอินไลน์ ภายในย่อหน้า

ตัวอย่างขององค์ประกอบแบบอินไลน์:

<span>
<a>
<img>

คำสั่ง HTML แสดง: none;

display: none; มักใช้กับ JavaScript เพื่อซ่อน และแสดงองค์ประกอบโดยไม่ต้องลบและสร้างใหม่ ลองดูที่สุดท้ายของเรา ตัวอย่างในหน้านี้ หากคุณต้องการทราบว่าสามารถทำได้อย่างไร

<script> องค์ประกอบใช้ display: none; เป็นค่าเริ่มต้น

แทนที่ค่าที่แสดงเริ่มต้น

ตามที่กล่าวไว้ ทุกองค์ประกอบมีค่าการแสดงผลเริ่มต้น อย่างไรก็ตามคุณสามารถทำได้ แทนที่สิ่งนี้

การเปลี่ยนองค์ประกอบอินไลน์เป็นองค์ประกอบบล็อกหรือในทางกลับกันก็มีประโยชน์เช่นกัน ทำให้เพจมีลักษณะเฉพาะและยังคงเป็นไปตามมาตรฐานเว็บ

ตัวอย่างทั่วไปคือการสร้างองค์ประกอบ <li> แบบอินไลน์สำหรับเมนูแนวนอน:

ตัวอย่าง

li {
  display: inline;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

หมายเหตุ: การตั้งค่าคุณสมบัติการแสดงผลขององค์ประกอบจะเปลี่ยนเฉพาะ วิธีการแสดงองค์ประกอบ ไม่ใช่ว่าเป็นองค์ประกอบประเภทใด ดังนั้น ไม่อนุญาตให้ใช้องค์ประกอบอินไลน์ที่มี display: block; เพื่อให้มีองค์ประกอบบล็อกอื่นอยู่ข้างใน

ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <span> เป็นองค์ประกอบบล็อก:

ตัวอย่าง

span {
  display: block;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>

ตัวอย่างต่อไปนี้แสดง <a> องค์ประกอบเป็นองค์ประกอบบล็อก:

ตัวอย่าง

a {
  display: block;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

ซ่อนองค์ประกอบ - จอแสดงผล: ไม่มีหรือการมองเห็น: ซ่อนอยู่?

style="wrap">display:none

Italy

visibility:hidden

Forest

Reset

Lights

การซ่อนองค์ประกอบสามารถทำได้โดยการตั้งค่าคุณสมบัติ display <รหัส class="w3-codespan">ไม่มี. องค์ประกอบจะถูกซ่อน และหน้าจะแสดงราวกับว่าองค์ประกอบนั้นไม่ได้เป็นเช่นนั้น ที่นั่น:

ตัวอย่าง

h1.hidden {
  display: none;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

visibility:hidden; ยังซ่อนองค์ประกอบด้วย

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

ตัวอย่าง

h1.hidden {
  visibility: hidden;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

ตัวอย่างเพิ่มเติม

ตัวอย่างนี้สาธิต display: none; เมื่อเทียบกับการมองเห็น: ซ่อนเร้น;

ความแตกต่างระหว่างจอแสดงผล: ไม่มี; และการมองเห็น: ซ่อนเร้น;

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>

ตัวอย่างนี้สาธิตวิธีการใช้ CSS และ JavaScript เพื่อแสดงองค์ประกอบ คลิก.

การใช้ CSS ร่วมกับ JavaScript เพื่อแสดงเนื้อหา

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

คุณสมบัติการแสดงผล/การมองเห็น CSS

display

ระบุวิธีการแสดงองค์ประกอบ

visibility

ระบุว่าควรมองเห็นองค์ประกอบหรือไม่