CSS သည် Property ကိုပြသသည် ။
ဥပမာ
မတူညီသောပြသမှုတန်ဖိုးအချို့ကို အသုံးပြုခြင်း-
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် display
ဒြပ်စင်တစ်ခု၏ ပြသမှုအမူအကျင့် (rendering box အမျိုးအစား) ကို သတ်မှတ်သည်။
HTML တွင်၊ မူရင်းဖော်ပြမှုပိုင်ဆိုင်မှုတန်ဖိုးကို HTML သတ်မှတ်ချက်များမှ သို့မဟုတ် ဘရောက်ဆာ/အသုံးပြုသူ၏ ပုံသေပုံစံစာရွက်မှ ရယူသည်။ XML ရှိ မူရင်းတန်ဖိုးသည် SVG ဒြပ်စင်များအပါအဝင် လိုင်းအတွင်းဖြစ်သည်။
မူလတန်ဖိုး: | ? |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS1 |
JavaScript syntax- | အရာဝတ္ထု .style.display="none" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
မှတ်ချက်- "flex" နှင့် "inline-flex" တန်ဖိုးများသည် Safari တွင် အလုပ်လုပ်ရန် -webkit- ရှေ့စာ လိုအပ်သည်။
မှတ်ချက်- "display: contents" သည် Edge မတိုင်မီဗားရှင်း 79 တွင် အလုပ်မလုပ်ပါ။
CSS Syntax
display: value;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
flex | Displays an element as a block-level flex container | |
grid | Displays an element as a block-level grid container | |
inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
inline-flex | Displays an element as an inline-level flex container | |
inline-grid | Displays an element as an inline-level grid container | |
inline-table | The element is displayed as an inline-level table | |
list-item | Let the element behave like a <li> element | |
run-in | Displays an element as either block or inline, depending on context | |
table | Let the element behave like a <table> element | |
table-caption | Let the element behave like a <caption> element | |
table-column-group | Let the element behave like a <colgroup> element | |
table-header-group | Let the element behave like a <thead> element | |
table-footer-group | Let the element behave like a <tfoot> element | |
table-row-group | Let the element behave like a <tbody> element | |
table-cell | Let the element behave like a <td> element | |
table-column | Let the element behave like a <col> element | |
table-row | Let the element behave like a <tr> element | |
none | The element is completely removed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
အကြောင်းအရာပိုင်ဆိုင်မှုတန်ဖိုးကို မည်ကဲ့သို့အသုံးပြုပုံ သရုပ်ပြခြင်း။ အောက်ပါဥပမာတွင် .a container သည် ပျောက်ကွယ်သွားမည်ဖြစ်ပြီး၊ ဒြပ်စင်၏ ကလေးဒြပ်စင်များ (.b) ကို DOM တွင် နောက်တစ်ဆင့်တက်စေသည်-
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
ဥပမာ
အမွေဆက်ခံပစ္စည်းတန်ဖိုးကို အသုံးပြုနည်း သရုပ်ပြခြင်း။
body {
display: inline;
}
p {
display: inherit;
}
ဥပမာ
<div> ဒြပ်စင်အတွင်း ပြောင်းပြန်ပြောင်းနိုင်သော အရာအချို့၏ ဦးတည်ချက်ကို ပြောင်းပြန်အစီအစဥ် သတ်မှတ်ပါ-
div {
display: flex;
flex-direction: row-reverse;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Display နှင့် မြင်နိုင်စွမ်း
HTML DOM ရည်ညွှန်းချက်- ပစ္စည်းဥစ္စာကို ပြသ ပါ။