Layout ng CSS - Attribute ng display

display Ang attribute na ito ay ang pinakamahalagang CSS attribute na gamit sa kontrol ng layout.

Display attribute

display Ang attribute ay nangangahulugan kung paano o kung paano ipakita ang elemento.

Ang bawat HTML na elemento ay may isang default na halaga ng display, na depende sa uri ng elemento nito. Ang karamihan sa mga elemento ay may default na halaga ng display na block o inline.

I-click upang ipakita ang panel

Ang panel na ito ay naglalaman ng isang <div> na elemento, na ayaw ipakita sa simula.（display: none）

它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block）

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

សមាសភាគ <div> នេះជាសមាសភាគដែលបំពេញទំហំ:

ឧទាហានជាបន្ទាត់ដែលបំពេញទំហំ:

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

សមាសភាគ (inline element)

សមាសភាគដែលជាបន្ទាត់មិនចាប់ផ្តើមការបង្កើតជីវិតថ្មី ហើយត្រូវការមានទំហំដែលចាំបាច់:

នេះជាពាក្យក្នុងអត្ថបទ:សមាសភាគ <span> ដែលជាបន្ទាត់.

ឧទាហានជាបន្ទាត់ដែលជាបន្ទាត់:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; ដែលត្រូវបានប្រើជាប់ជាមួយ JavaScript ដើម្បីលាក់ និងបង្ហាញសមាសភាគ ដោយមិនចាំបាច់លុប និងបង្កើតឡើងវិញ ប្រសិនបើអ្នកចង់ដឹងថាតើមានរបៀបអនុវត្តនេះ សូមមើលឧទាហានចុងក្រោយនៅលើទំព័រនេះ。

ដោយរុងរាល់<script> សមាសភាគដែលប្រើ display: none;.

ដោយផ្លាស់ប្តូរតម្លៃ Display ការបង្ហាញដោយរុងរាល់

ដូចដែលបានបញ្ជាក់មុន រាល់សមាសភាគមានតម្លៃ display ការបង្ហាញដោយរុងរាល់។ ប៉ុន្តែ អ្នកអាចលាក់វាបានឡើយ。

ដោយផ្លាស់ប្តូរសមាសភាគជាបន្ទាត់ និងសមាសភាគជាបន្ទាត់ ដែលគឺដំនើរការដែលមានប្រយោជន៍សំរាប់បង្ហាញទំព័រដោយមិនបាត់បង់គ្រឹះជាតំរូវការរបស់វេតនេស:

ឧទាហានដែលត្រូវការបង្កើតជាបន្ទាត់ដើម្បីបង្កើតរចនាសម្ព័ន្ឋមីងទីរីយតាមរចនាសម្ព័ន្ឋវេតនេស: <li> សមាសភាគ:

ឧទាហាន

li {
  display: inline;
{}

Try It Yourself

ការពិចារណា:ដោយកំណត់ទ្រង់ទ្រាយ display នឹងផ្លាស់ប្តូរតែឧទាហានការបង្ហាញហើយនឹងមិនផ្លាស់ប្តូរប្រភេទសមាសភាគ ដូច្នេះ ដែលមាន display: block; សមាសភាគដែលអនុញ្ញាតអោយបញ្ចូលសមាសភាគជាបន្ទាត់ មិនអាចបញ្ចូលសមាសភាគជាបន្ទាត់ផ្សេងទៀតនៅក្នុងនោះ។

ឧទាហានដូចខាងក្រោមនឹងបង្ហាញសមាសភាគ <span> ថាជាសមាសភាគដែលបំពេញទំហំ:

ឧទាហាន

span {
  display: block;
{}

Try It Yourself

ឧទាហានដូចខាងក្រោមនឹងបង្ហាញសមាសភាគ <a> ថាជាសមាសភាគដែលបំពេញទំហំ:

ឧទាហាន

a {
  display: block;
{}

Try It Yourself

ដោយលាក់សមាសភាគ - display:none ឬ visibility:hidden？

display:none

visibility: hidden

ដោយផ្លាស់ប្តូរ

ដោយប្រើ display ទ្រង់ទ្រាយការសម្រួល none អាចលាក់សមាសភាគបានឡើយ សមាសភាគនេះនឹងត្រូវបានលាក់ ហើយទំព័រនឹងបង្ហាញថាសមាសភាគនេះមិនមាន:

ឧទាហាន

h1.hidden {
  display: none;
{}

Try It Yourself

visibility: hidden; ថែមទាំងនឹងលាក់សមាសភាគ。

ប៉ុន្តែ សមាសភាគនេះនៅតែចំនុចដែលប្រើដូចមុន។ សមាសភាគនេះនឹងត្រូវបានលាក់ ប៉ុន្តែនៅតែមានឥទ្ធិពលលើទំហំរចនាសម្ព័ន្ឋ:

ឧទាហាន

h1.hidden {
  visibility: hidden;
{}

Try It Yourself

More Examples

Differences between display: none; and visibility: hidden;
This example demonstrates display: none; VS visibility: hidden;
Combining CSS and JavaScript to Display Content
This example demonstrates how to display elements using CSS and JavaScript when clicked.

CSS Display/Visibility Attribute

Attribute Description
display Specify how the element should be displayed.
visibility Specify whether the element should be visible.