CSS ကျူတိုရီရယ်

CSS ပင်မစာမျက်နှာ CSS နိဒါန်း CSS Syntax CSS ရွေးချယ်မှုများ CSS လုပ်နည်း CSS မှတ်ချက်များ CSS အရောင်များ CSS နောက်ခံများ CSS နယ်နိမိတ်များ CSS အနားသတ်များ CSS Padding CSS အမြင့်/အနံ CSS Box မော်ဒယ် CSS အကြမ်းဖျင်း CSS စာသား CSS ဖောင့်များ CSS အိုင်ကွန်များ CSS လင့်ခ်များ CSS စာရင်းများ CSS ဇယားများ CSS Display CSS Max-အကျယ် CSS ရာထူး CSS Z အညွှန်း CSS Overflow CSS Float CSS Inline-block CSS ကို ချိန်ညှိပါ။ CSS Combinators CSS Pseudo-class CSS Pseudo-ဒြပ်စင် CSS Opacity CSS Navigation Bar CSS Dropdowns CSS ရုပ်ပုံပြခန်း CSS Image Sprites CSS Attr ရွေးချယ်မှုများ CSS ပုံစံများ CSS ကောင်တာများ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် CSS ယူနစ်များ CSS တိကျမှု CSS !အရေးကြီးသည်။ CSS သင်္ချာလုပ်ဆောင်ချက်များ

CSS အဆင့်မြင့်

CSS Rounded Corners CSS Border ပုံများ CSS နောက်ခံများ CSS အရောင်များ CSS အရောင်သော့ချက်စာလုံးများ CSS Gradients CSS Shadows CSS စာသားအကျိုးသက်ရောက်မှုများ CSS ဝဘ်ဖောင့်များ CSS 2D အသွင်ပြောင်းမှုများ CSS 3D အသွင်ပြောင်းမှုများ CSS အသွင်ကူးပြောင်းမှုများ CSS Animations CSS Tooltips CSS စတိုင်ပုံများ CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS ခလုတ်များ CSS Pagination CSS ကော်လံမျိုးစုံ CSS User Interface CSS အပြောင်းအလဲများ CSS Box Sizing CSS မီဒီယာမေးခွန်းများ CSS MQ နမူနာများ CSS Flexbox

CSS တုံ့ပြန်မှု

RWD မိတ်ဆက် RWD Viewport RWD Grid View RWD မီဒီယာမေးခွန်းများ RWD ပုံများ RWD ဗီဒီယိုများ RWD မူဘောင်များ RWD နမူနာများ

CSS Grid

Grid Intro ဂရစ်ကွန်တိန်နာ ဇယားကွက်

CSS SASS

SASS ကျူတိုရီရယ်

CSS နမူနာများ

CSS Templates များ CSS နမူနာများ css စာမေးပွဲ CSS လေ့ကျင့်ခန်းများ CSS လက်မှတ်

CSS ကိုးကားချက်များ

CSS အကိုးအကား CSS ရွေးချယ်မှုများ CSS လုပ်ဆောင်ချက်များ CSS အကိုးအကား Aural CSS ဝဘ်ဘေးကင်းသောဖောင့်များ CSS Animatable CSS ယူနစ်များ CSS PX-EM Converter CSS အရောင်များ CSS အရောင်တန်ဖိုးများ CSS မူရင်းတန်ဖိုးများ CSS Browser ပံ့ပိုးမှု

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> ဒြပ်စင်သည် ပိတ်ဆို့အဆင့် ဒြပ်စင်တစ်ခုဖြစ်သည်။

ပိတ်ဆို့အဆင့် အစိတ်အပိုင်းများ ဥပမာများ-

  • <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.


Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible