CSS အော်သ�း - display အခြေအနေ

display display အခြေခံ အယူအဆ အက်စ်စ်စ် အက်စ် ကို ပြင်ဆင်ထားသော အခြေခံ အယူအဆ ဖြစ်သည်။

display အခြေခံ အယူအဆ

display အခြေခံ အယူအဆ ကို ပြသထားသည်။

အချို့သော HTML အစိတ်အတွင်းတွင် နောက်ဆုံး ပြင်ဆင်ထားသော display အယူအဆ ဖြစ်သည်။ အချို့သော အစိတ်အတွင်းတွင် ပြင်ဆင်ထားသော display အယူအဆ ဖြစ်သည်။ block သို့မဟုတ် inline。

ပြထားရန် စာကြိုးခတ်ပါ

ဒီ ပန်းပုံအုပ်တွင် အခြေခံအယူအဆ ဖြင့် <div> အစိတ်အတွင်းဝင် ဖြစ်သည်။ မပြထားဘဲ။display: none）

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

块级元素（block element）

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

这个
元素属于块级元素。

块级元素的一些例子：

  • -

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内 元素。

行内元素的一些例子：

Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

默认情况下，

အဆိုပါ အကိုးအချုပ် ကို: display အကိုးအချုပ် အထိပ်သို့ အသုံးပြုပါ: none ဒါက အဆိုပါ အဆိုအရ အဆိုပါ အရွယ်အစား ကို ကွဲခွဲထားလိမ့်မည်၊ သို့သော်၊ စာစောင် က အဆိုပါ အဆိုအရ အရွယ်အစား မှ အောင်မြင်သည့်အပြုအမူ ကို ပြသလိမ့်မည်:

အမှတ်

h1.hidden {
  display: none;
}

亲自试一试

visibility:hidden; ဒါက အဆိုပါ အဆိုအရ အဆိုပါ အရွယ်အစား ကို ကွဲခွဲထားလိမ့်မည်။

သို့သော်၊ ဒါက အရင်နှင့် အတူ အထူးသော အရွယ်အစား ကို ကျန်ရှိလိမ့်မည်။ အဆိုပါ အဆိုအရ အဆိုပါ အရွယ်အစား ကို ကွဲခွဲထားလိမ့်မည်၊ သို့သော်၊ ပြတင်း အစိတ်အစိတ် ကို အထူးသော အရွယ်အစား ကို ကျန်ရှိလိမ့်မည်ကို အနှစ်ထားလိမ့်မည်:

အမှတ်

h1.hidden {
  visibility: hidden;
}

亲自试一试

更多实例

display: none; 与 visibility: hidden; 之间的差异
本例演示 display: none; VS visibility: hidden;
结合使用 CSS 和 JavaScript 来显示内容
本例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

CSS Display/Visibility 属性

属性 描述
display 指定应如何显示元素。
visibility 指定元素是否应该可见。