CSS Layout - ပြသသည့် ပိုင်ဆိုင်မှု
Property သည် display
အပြင်အဆင်ကို ထိန်းချုပ်ရန်အတွက် အရေးကြီးဆုံး CSS ပိုင်ဆိုင်မှုဖြစ်သည်။
Property ကို ပြသသည်။
ပိုင်ဆိုင်မှု သည် display
ဒြပ်စင်တစ်ခုအား ပြသခြင်း ရှိ/မရှိကို သတ်မှတ်သည်။
HTML ဒြပ်စင်တိုင်းတွင် ၎င်းသည် မည်သည့်ဒြပ်စင်အမျိုးအစားပေါ် မူတည်၍ ပုံသေပြသမှုတန်ဖိုးရှိသည်။ ဒြပ်စင်အများစုအတွက် ပုံသေပြသမှုတန်ဖိုးသည် block
သို့မဟုတ်
inline
.
အကန့်ကိုပြသရန် နှိပ်ပါ။
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
).
ပိတ်ဆို့အဆင့်ဒြပ်စင်များ
ဘလောက်အဆင့်ဒြပ်စင်သည် စာကြောင်းအသစ်တွင် အမြဲစတင်ပြီး ရနိုင်သော အကျယ်ကို အပြည့်ယူသည် (တတ်နိုင်သမျှ ဘယ်ညာသို့ ဆန့်ထုတ်သည်)။
ပိတ်ဆို့အဆင့် အစိတ်အပိုင်းများ ဥပမာများ-
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <ကဏ္ဍ>
Inline Elements များ
inline element တစ်ခုသည် လိုင်းအသစ်တွင် မစတင်ဘဲ လိုအပ်သလောက် width ကိုသာ ယူသည်။
၎င်းသည် စာပိုဒ် တစ်ခုအတွင်း၌ <span> ဒြပ်စင်တစ်ခုဖြစ်သည် ။
အတွင်းအစိတ်အပိုင်းများ ဥပမာများ-
- <span>
- <a>
- <img>
ပြသမှု- အဘယ်သူမျှမ;
display: none;
အစိတ်အပိုင်းများကို ဖျက်ပြီး ပြန်လည်ဖန်တီးခြင်းမပြုဘဲ ဝှက်ထားကာ ပြသရန် JavaScript ဖြင့် အသုံးများသည်။ ဒါကို ဘယ်လိုအောင်မြင်နိုင်လဲ သိချင်ရင် ဒီစာမျက်နှာရဲ့ နောက်ဆုံးဥပမာကို ကြည့်ပါ။
<script>
ဒြပ်စင်ကို မူရင်းအတိုင်း အသုံးပြု သည် display: none;
။
ပုံသေပြသမှုတန်ဖိုးကို အစားထိုးပါ။
ဖော်ပြထားသည့်အတိုင်း၊ ဒြပ်စင်တိုင်းတွင် ပုံသေပြသမှုတန်ဖိုးရှိသည်။ သို့သော်၊ သင်သည် ဤအရာကို ကျော်နိုင်သည်။
inline element တစ်ခုကို block element တစ်ခုသို့ပြောင်းခြင်း သို့မဟုတ် အပြန်အလှန်အားဖြင့် စာမျက်နှာကို တိကျသောနည်းလမ်းတစ်ခုအဖြစ်မြင်စေရန်အတွက် အသုံးဝင်နိုင်ပြီး ဝဘ်စံနှုန်းများကို ဆက်လက်လိုက်နာဆဲဖြစ်သည်။
သာမာန်ဥပမာတစ်ခုသည် <li>
အလျားလိုက်မီနူးများအတွက် လိုင်းဒြပ်စင်များ ပြုလုပ်ခြင်းဖြစ်သည်
ဥပမာ
li {
display: inline;
}
မှတ်ချက်- ဒြပ်စင်တစ်ခု၏ ဖော်ပြမှုဆိုင်ရာ ပိုင်ဆိုင်မှုကို သတ်မှတ်ခြင်းသည် ဒြပ်စင် ကို မည်သို့ပြသသည်ကို သာ ပြောင်းလဲသည် ၊ ၎င်းသည် မည်သည့်ဒြပ်စင်အမျိုးအစားမဟုတ်ပေ။ ထို့ကြောင့်၊ ပါ၀င်သော inline element display: block;
သည် ၎င်းအတွင်း၌ အခြားသော ဘလောက်ဒြပ်စင်များကို ခွင့်မပြုပါ။
အောက်ဖော်ပြပါ ဥပမာသည် <span> ဒြပ်စင်များကို ပိတ်ဆို့ဒြပ်စင်များအဖြစ် ပြသသည်-
ဥပမာ
span {
display: block;
}
အောက်ဖော်ပြပါ ဥပမာသည် <a> ဒြပ်စင်များကို ဘလောက်ဒြပ်စင်များအဖြစ် ပြသသည်-
ဥပမာ
a {
display: block;
}
ဒြပ်စင်တစ်ခုကို ဝှက်ပါ - display:none သို့မဟုတ် မြင်နိုင်မှု:hidden?
display:none
visibility:hidden
ပြန်လည်သတ်မှတ်ပါ။
display
ပိုင်ဆိုင်မှုကို
သတ်မှတ်ခြင်းဖြင့် အစိတ်အပိုင်းတစ်ခုကို ဝှက်ထားနိုင်သည် none
။ ဒြပ်စင်ကို ဝှက်ထားမည်ဖြစ်ပြီး၊ ဒြပ်စင်သည် ထိုနေရာတွင် မရှိသကဲ့သို့ စာမျက်နှာကို ပြသလိမ့်မည်-
ဥပမာ
h1.hidden {
display: none;
}
visibility:hidden;
ဒြပ်စင်တစ်ခုကိုလည်း ဝှက်ထားသည်။
သို့သော်၊ ဒြပ်စင်သည် ယခင်ကဲ့သို့ နေရာယူထားဆဲဖြစ်သည်။ အစိတ်အပိုင်းကို ဝှက်ထားမည်ဖြစ်သော်လည်း အပြင်အဆင်ကို သက်ရောက်မှုရှိနေဆဲဖြစ်သည်-
ဥပမာ
h1.hidden {
visibility: hidden;
}
နောက်ထပ် ဥပမာများ
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
Property | Description |
---|---|
display | Specifies how an element should be displayed |
visibility | Specifies whether or not an element should be visible |