ဖက်ဝတ်ဆိပ်ခုံးပုံ box-sizing သုံးစွဲ့

  • ပြီးပြီးချင်း box-shadow
  • နောက်ပိုင်း စာကြိုး break-after

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

အခြား ကြည့်ရန်

CSS3 ကျမ်းCSS3 အသုံးပြုသူ အဆိုးဆို

HTML DOM ကိုယ်စားပြန် စာအုပ်boxSizing ဗီဇထိပ်

အမှတ်အသား

အဆိုပါ အရာအား အစိတ်အပြိုင်း ဖြင့် ပြုလုပ် သော အရိုးဖြူ အပေါင်းခုံး ကို ကိုယ်စားပြု သတ်မှတ် ပြီးဖြစ်သည်

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားကြည့်ပါ

စာရင်းအောက်တွင် အများအပြား အမှတ်အသားများ ရှိသည်

CSS ပုံစံ

box-sizing: content-box|border-box|inherit;

ဗီဇထိပ်

ပုံစံ ဖော်ပြ
content-box

အဆိုပါ အကျယ်အဝန်း နှင့် အထိပ်ပင် အကျယ်အဝန်း အကျဉ်းချုပ် အပြင် ပုံစံဖြင့် ကိုယ်စားပြု သတ်မှတ် ပြီးဖြစ်သည်

အကျယ်အဝန်း နှင့် အထိပ်ပင် အပြင် အဆိုပါ အရာအား အကျယ်အဝန်း နှင့် အထိပ်ပင် ကို အသုံးပြု ကြောင်း

အကျယ်အဝန်း နှင့် အထိပ်ပင် အပြင် အဆိုပါ အရာအား အတွင်းဝိုက် နှင့် အကြီးအကျယ် ကို ဖြန့်ချိ ကြောင်း
border-box

အဆိုပါ အရာအား ကို အကျယ်အဝန်း နှင့် အထိပ်ပင် မှ ပြုလုပ် သော အကြီးအကျယ် နှင့် အထိပ်ပင် ကို ပုံစံဖြင့် ကိုယ်စားပြု သတ်မှတ် ပြီးဖြစ်သည်

ထို့ကြောင့် အဆိုပါ အရာအား အကျယ်အဝန်း နှင့် အထိပ်ပင် မှ အဆိုပါ အတွင်းဝိုက် နှင့် အကြီးအကျယ် ကို ကိုယ်စားပြု သတ်မှတ် ပြီးဖြစ်သည်

ပြီးပြီးချင်း အရ အဆိုပါ အကျယ်အဝန်း နှင့် အထိပ်ပင် မှ အကြီးအကျယ် နှင့် အတွင်းဝိုက် ကို ဖြန့်ချိကြောင်း
inherit အဖွဲ့ချုပ် အား ပိုင်ဆိုင်သော box-sizing ဗီဇထိပ် ကို ကိုယ်စားပြု သတ်မှတ် ပြီးဖြစ်သည်

နည်းပိုး

ပုံစံ content-box
ကြိုးပမ်း ထိုးချဲ့
ပုံစံ CSS3
JavaScript ပုံစံ object.style.boxSizing="border-box"

ဘာသာပြန် ထောက်ပံ့

အချက်အလက် အရ အဆိုပါ ဗီဇထိပ် ကို အထူး ထောက်ပံ့သော ပထမဆုံး ဘာသာပြန်လက်ဖြင့် ပြောဆိုထားသည်

ပြီး -webkit- သို့မဟုတ် -moz- အစားအပြားရှိသော နှုန်းများ ဟာ ပမာဏာသတ်မှတ်ထားသော ပထမဆုံး အဆင့် ကို အသုံးပြုကြောင်း

Chrome IE / Edge Firefox Safari Opera
၁၀.၀
၄.၀ -webkit-		 ၈.၀ ၂၉.၀
၂.၀ -moz-		 ၅.၁
၃.၂ -webkit-		 ၉.၅
  • ပြီးပြီးချင်း box-shadow
  • နောက်ပိုင်း စာကြိုး break-after