စတုံးခွဲ ဝီကီစ် ဖောင်ချိန်စက် အစီရင်ခံ

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距边框外边距 的方式。

စတုံးခွဲ ဝီကီစ် ဖောင်ချိန်စက် အစီရင်ခံ

စတုံးခွဲ ဖောင်ချိန်စက်

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

အကြောင်းကြားချက်:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

CSS တွင် width နှင့် height သည် အရေးပါသော အချင်းမြင့် နှင့် အရှည် ကို ကိုင်တွယ်သည်။ အထိပ်ပိုင်းအရေအတွက်၊ border နှင့် margin ကို အသုံးပြုရန် အရေးပါသည်၊ သို့သော် အရေးပါသော အချင်းမြင့် အရေအတွက် ကို ပြင်ဆင်လျက် ဘရပ်ရှားကွန်ပျူတာများ၏ အချင်းမြင့် အရေအတွက် ကို ပြင်ဆင်လျက် ရှိ

အချက်အလက် ပုံစံ အချင်းမြင့် ၁၀ ပမာဏ အပေါ်အကျော့ နှင့် ၅ ပမာဏ အထိပ်ပိုင်းအရေအတွက် အရ ဖြစ်သည်။ အခြား အချိန်များတွင် အစိတ်အပိုင်း ၁၀၀ ပမာဏ ရရှိရန် အရေးပါသော အချင်းမြင့် ၇၀ ပမာဏ ကို သတ်မှတ်ရမည်၊ အော်ချ်ပုံကို ကျွန်းပြန်

စတုံးခွဲ ဖောင်ချိန်စက် အမှတ်အသား
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

အကြောင်းကြားချက်:အထိပ်ပိုင်းအရေအတွက်၊ border နှင့် margin ကို အစိတ်အပိုင်း တစ်ခုခုသို့ အသုံးပြုနိုင် သို့မဟုတ် တစ်ခုခုသို့ သာ အသုံးပြုနိုင်

အကြောင်းကြားချက်:အခြေအနေအားဖြင့် အပေါ်အကျော့ အကိုးအကား အရ အရေးပါသည်၊ အခြား အချိန်များတွင် အပေါ်အကျော့ အကိုးအကား အသုံးပြုရမည်

ဘရပ်ရှားကွန်ပျူတာ လုပ်ငန်းအကျဉ်း

ဒီနေရာတွင် စက်တင်မှုကို တိကျသော DTD ကို ထည့်သွင်းပြီးနေသေးသော် အများစုသော ဘရပ်ရှားကွန်ပျူတာများ အပြင်းအထန်အတိုင်း ပြသတတ်သည်။ သို့သော် အိပ်ခ် ၅ နှင့် ၆ တို့၏ ပြသတတ်ခြင်း မမှန်ကန်ဘဲဖြစ်သည်။ W3C အဆိုအရ အအုပ်အဖွဲ့များ ပါဝင်သော အချင်းမြင့် သည် width အကိုးအကား ကို ကိုင်တွယ်သည်၊ အခြား ပြင်ပအထိပ်ပိုင်းအရေအတွက် နှင့် border အကိုးအကား ကို အခံစားတတ်သည်။ သို့သော် အိပ်ခ် ၅.ီ.ီ နှင့် ၆ တို့ အားကစားပုံ အုပ်ချုပ်ရေး အခြေခံအဆိုအရ ကို သုံးစွဲကြသည်။ အဆိုပါ ဘရပ်ရှားကွန်ပျူတာများ၏ width အကိုးအကား သည် အရေးပါသော အချင်းမြင့် မဟုတ် ဘဲ၊ အရေးပါသော အချင်းမြင့်၊ အထိပ်ပိုင်းအရေအတွက် နှင့် border အကိုးအကား အပေါ်မှာ ပါဝင်သည်။

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

术语

  • element : 元素。
  • padding : 内边距,也有资料将其为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其为空白或空白边。

在 codew3c,我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距,边框外的空白是外边距,很容易记吧:)