CSS အမြင့်နှင့် အနံ
CSS height
နှင့် width
ဂုဏ်သတ္တိများကို ဒြပ်စင်တစ်ခု၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ရန် အသုံးပြုသည်။
max-width
ဒြပ်စင်တစ်ခု၏ အမြင့်ဆုံးအကျယ်ကို သတ်မှတ်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
CSS Setting အမြင့်နှင့် အကျယ်
height
နှင့် ဂုဏ်သတ္တိများ ကို width
ဒြပ်စင်တစ်ခု၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ရန် အသုံးပြုသည်။
အမြင့်နှင့် အကျယ်ဂုဏ်သတ္တိများသည် အကွက်များ၊ ဘောင်များ သို့မဟုတ် အနားသတ်များ မပါဝင်ပါ။ ၎င်းသည် ဒြပ်စင်၏ padding၊ ဘောင်နှင့် အနားသတ်အတွင်းရှိ ဧရိယာ၏ အမြင့်/အနံကို သတ်မှတ်ပေးသည်။
CSS အမြင့်နှင့် အကျယ်တန်ဖိုးများ
height
နှင့် width
ဂုဏ်သတ္တိများသည် အောက်ပါတန်ဖိုးများ ရှိနိုင်သည် -
auto
- ဤသည်မှာ ပုံသေဖြစ်သည်။ ဘရောက်ဆာသည် အမြင့်နှင့် အကျယ်ကို တွက်ချက်သည်။length
- အမြင့်/အနံကို px၊ စင်တီမီတာ စသည်ဖြင့် သတ်မှတ်သည်။%
- ပါရှိသော ဘလောက်၏ ရာခိုင်နှုန်းဖြင့် အမြင့်/အနံကို သတ်မှတ်သည်။initial
- အမြင့်/အနံကို ၎င်း၏မူလတန်ဖိုးအဖြစ် သတ်မှတ်သည်။inherit
- အမြင့်/အနံသည် ၎င်း၏မိခင်တန်ဖိုးမှ အမွေဆက်ခံမည်ဖြစ်သည်။
CSS အမြင့်နှင့် အကျယ် ဥပမာများ
ဥပမာ
<div> ဒြပ်စင်တစ်ခု၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပါ-
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
ဥပမာ
အခြား <div> ဒြပ်စင်၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပါ-
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
မှတ်ချက်-height
နှင့် width
ဂုဏ်သတ္တိများတွင် padding၊ ဘောင်များ သို့မဟုတ် အနားသတ်များ မပါဝင်ကြောင်း သတိပြုပါ ။ ၎င်းတို့သည် ဒြပ်စင်၏ padding, border, and margin အတွင်းရှိ ဧရိယာ၏ အမြင့်/အနံကို သတ်မှတ်သည်။
အမြင့်ဆုံးအကျယ်ကို သတ်မှတ်ခြင်း။
ဒြပ်စင်တစ်ခု၏ အ max-width
မြင့်ဆုံးအကျယ်ကို သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
px၊ စင်တီမီတာ အစရှိသည်တို့ကဲ့သို့ အလျားတန်ဖိုးများ သို့မဟုတ် ပါဝင်သော ဘလောက် ၏ ရာခိုင်နှုန်း (%) ဖြင့် max-width
သတ်မှတ်နိုင်သည် ၊ သို့မဟုတ် မရှိဟု သတ်မှတ်နိုင်သည် (၎င်းသည် ပုံသေဖြစ်သည်။ အမြင့်ဆုံးအကျယ်မရှိဟု ဆိုလိုသည်)။
<div>
ဘရောက်ဆာဝင်းဒိုးသည် ဒြပ်စင်၏ အကျယ် (500px) ထက်သေးငယ်သောအခါတွင် အထက်ဖော်ပြပါ ပြဿနာ သည် ဖြစ်ပေါ်သည်။ ထို့နောက် ဘရောက်ဆာသည် စာမျက်နှာသို့ အလျားလိုက် scrollbar တစ်ခုကို ပေါင်းထည့်သည်။
max-width
ဤအခြေအနေတွင် ယင်းအစား အသုံးပြုခြင်းဖြင့် ဘရောက်ဆာ၏ သေးငယ်သော ဝင်းဒိုးများကို ကိုင်တွယ်မှု ပိုမိုကောင်းမွန်လာမည်ဖြစ်သည်။
အကြံပြုချက်- div နှစ်ခုကြား ခြားနားချက်ကို ကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို 500px ထက်သေးငယ်အောင် ဆွဲယူပါ။
မှတ်ချက်- အကယ်၍ သင်သည် အကြောင်းတစ်ခုခုကြောင့်
width
ပိုင်ဆိုင်မှုနှင့် ပိုင်ဆိုင်မှု
နှစ်ခုလုံး max-width
ကို တူညီသောဒြပ်စင်ပေါ်တွင် အသုံးပြုပါက၊ ပစ္စည်း၏တန်ဖိုးသည်
width
ပိုင်ဆိုင်မှုထက် ပိုကြီးနေပါက
max-width
၊ ပိုင်ဆိုင်မှု ကို
max-width
အသုံးပြုလိမ့်မည် (နှင့်
width
ပိုင်ဆိုင်မှုကိုလျစ်လျူရှုလိမ့်မည်) ။
ဥပမာ
ဤ <div> ဒြပ်စင်သည် အမြင့် 100 pixels နှင့် max-width 500 pixels ရှိသည်-
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
သင်ကိုယ်တိုင်စမ်းကြည့်ပါ - ဥပမာများ
ဤဥပမာသည် မတူညီသော ဒြပ်စင်များ၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပုံအား သရုပ်ပြသည်။
ကို သတ်မှတ်ပါ ဤဥပမာသည် ရာခိုင်နှုန်းတန်ဖိုးကို အသုံးပြု၍ ပုံတစ်ပုံ၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပုံအား သရုပ်ပြသည်။
သတ်မှတ်ပါ ဤဥပမာသည် pixel တန်ဖိုးကို အသုံးပြု၍ element တစ်ခု၏ အနည်းဆုံး width နှင့် အများဆုံး width ကို သတ်မှတ်နည်းကို သရုပ်ပြသည်။
သတ်မှတ်ပါ ဤဥပမာသည် pixel တန်ဖိုးကို အသုံးပြု၍ element တစ်ခု၏ အနိမ့်ဆုံးအမြင့်နှင့် အမြင့်ဆုံးအမြင့်ကို သတ်မှတ်ပုံအား သရုပ်ပြသည်။
CSS Dimension Properties အားလုံး
Property | Description |
---|---|
height | Sets the height of an element |
max-height | Sets the maximum height of an element |
max-width | Sets the maximum width of an element |
min-height | Sets the minimum height of an element |
min-width | Sets the minimum width of an element |
width | Sets the width of an element |