CSS တွင် နှစ်ကော်လံ ဝဘ်ဆိုဒ် ဒီဇိုင်းပုံစံ ဖန်တီးခြင်း

အောက်ပါပုံစံအတိုင်း နှစ်ကော်လံ ဒီဇိုင်းတစ်ခု ဖန်တီးကြပါစို့။

ပထမဆုံးအနေနဲ့ စာမျက်နှာရဲ့ အခြေခံဖွဲ့စည်းပုံကို ဖန်တီးကြပါမယ်။

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="content">
      content
    </div>
    <div id="sidebar">
      sidebar
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

ယခု wrapper အတွက် style များကို သတ်မှတ်ပြီး စခရင်၏အလယ်တွင် ညှိပေးကြပါမယ်။

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

ယခု header နှင့် footer အတွက် style များကို သတ်မှတ်ပါမယ်။

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

မြင်တဲ့အတိုင်းပဲ၊ header နဲ့ footer ကို အမြင့် သတ်မှတ်ပေးထားပါတယ်။ ကျွန်ုပ်တို့၏ ဒီဇိုင်းတွင် ၎င်းတို့တွင် အကြောင်းအရာမရှိသောကြောင့် ဤသို့လုပ်ဆောင်ခြင်းဖြစ်ပါတယ်။ အကြောင်းအရာရှိပါက block များအတွက် အမြင့်ကို သတ်မှတ်သင့်ပါဘူး - ၎င်းတို့၏အကြောင်းအရာကြောင့် အမြင့်ဖြစ်ပေါ်လာပါလိမ့်မယ်။

ထို့အပြင် ကျွန်ုပ်တို့သည် ၎င်းတို့အတွက် အကျယ်ကို သတ်မှတ်မပေးကြောင်း သတိပြုပါ။ အကြောင်းမှာ header နှင့် footer တို့သည် block element များဖြစ်ပြီး ၎င်းတို့၏အကျယ်သည် wrapper ၏အကျယ်နှင့် အလိုအလျောက် ညီမျှနေမည်ဖြစ်ပါတယ်။

ယခု ၎င်းတို့ကို padding ပေးကြပါစို့၊ သို့မှသာ စာသားများ အနားသတ်များနှင့် ကပ်မနေတော့ပါ။

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

သို့သော် padding ရှိခြင်းသည် block များ၏အရွယ်အစားကို ဆိုးရွားစွာ သက်ရောက်မှုရှိစေပါမယ် - ၎င်းတို့သည် သတ်မှတ်ထားသည်ထက် ပိုကြီးလာပါလိမ့်မယ်။ ကျွန်ုပ်တို့၏ block များကို padding နှင့် အနားသတ်များက မကျယ်ပြန့်စေရန် block အားလုံး၏အပြုအမူကို ပြောင်းလဲကြပါစို့။

css* {
  box-sizing: border-box;
}

ယခု ကျွန်ုပ်တို့သည် content နှင့် sidebar ကို တစ်တန်းတည်းထားရန် လိုအပ်ပါတယ်။ Flex များကို အသုံးပြု၍ ပြုလုပ်ကြပါစို့။

css#container {
  display: flex;
}

content နှင့် sidebar အတွက် ၎င်းတို့၏အကျယ်ကို သတ်မှတ်ပေးပါ။ ဤသို့ပြုလုပ်စဉ်တွင် ၎င်းတို့၏အကျယ်များ၏ ပေါင်းလဒ်သည် wrapper ၏အကျယ်နှင့် ညီရပါမယ်။

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

sidebar နှင့် content အကြားတွင် အကွာအဝေးတစ်ခု ထားလိုသည်ဆိုပါစို့။ ဤသို့ဆိုလျှင် sidebar အတွက် margin ထားရန်လိုအပ်ပါတယ်။ ဤသို့ပြုလုပ်စဉ်တွင် ဤ margin အတွက် အကျယ်ကို တစ်စုံတစ်ခုမှ နှုတ်ယူရပါမယ်။ content မှနှုတ်ယူပြီး၊ ၎င်း၏အကျယ်ကို လျှော့ချပါမယ်။

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

ကျွန်ုပ်တို့၏ element များတွင် အကြောင်းအရာမပါသောကြောင့် အမြင့်ကို ထည့်ကြပါစို့။ element တစ်ခုတည်းအတွက် အမြင့်ထည့်ရန် လုံလောက်ပါတယ်၊ အဘယ်ကြောင့်ဆိုသော် ဒုတိယ flex element သည် အမြင့်နှင့်လိုက်ဖက်သွားမည်ဖြစ်သည် (ဘာကြောင့်လဲ?)။ content အတွက် အမြင့်ကို သတ်မှတ်ပါစို့။

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

ယခု content နှင့် sidebar အတွက် ကျန်ရှိသော style များကို ထည့်ပါမယ်။

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

အားလုံးပြီးပါပြီ၊ ကျွန်ုပ်တို့၏ ဒီဇိုင်းပုံစံပြီးပါပြီ။ ကုဒ်အားလုံးကို အတူတကွစုစည်းပါမယ်။

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="sidebar">
      sidebar
    </div>
    <div id="content">
      content
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

css* {
  box-sizing: border-box;
}

#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}
#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#container {
  display: flex;
}
#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}