CSSda ikki ustunli sayt maket sxemasi

Keling, quyidagicha ikki ustunli maket qilaylik:

Boshlash uchun sahifaning asosiy tuzilishini yaratamiz:

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>

Endi wrapper'ga uslublarni belgilaymiz, uni ekran markaziga joylashtiramiz:

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

Endi header va footer uchun uslublarni belgilaymiz:

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

Ko'rib turganingizdek, biz header va footer'ga balandlik belgilaymiz. Biz buni qilamiz, chunki bizning sxemamizda ularning tarkibi yo'q. Tarkib mavjud bo'lganda bloklarga balandlik belgilash kerak emas - u ularning tarkibi tomonidan shakllantiriladi.

Shuningdek, biz ularga kenglik belgilamaymiz. Gap shundaki, header va footer - blok elementlari va ularning kengligi avtomatik ravishda wrapper kengligiga teng bo'ladi.

Keling, endi ularga padding belgilaymiz, shunda matn chegaralarga yopishib qolmasligi uchun:

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

Biroq, paddingning mavjudligi bloklarning o'lchamlariga salbiy ta'sir ko'rsatadi - ular ko'rsatilgandan kattaroq bo'lib qoladi. Keling, barcha bloklarning xatti-harakatini o'zgartiraylik shunday qilib, padding va chegaralar bizning bloklarimizni kengaytirmasin:

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

Endi biz content va sidebar'ni bitta qatorga qo'yishimiz kerak. Buni flekslar yordamida qilamiz:

css#container {
  display: flex;
}

Content va sidebar'ga ularning kengligini ko'rsatamiz. Bunda ularning kengliklari yig'indisi wrapper'ning kengligiga teng bo'lishi kerak:

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

Aytaylik, sidebar va content o'rtasida bo'shliq qilmoqchimiz. Bunda sidebar'ga margin berish kerak. Bunda biz ushbu margin uchun kenglikni kimdandir tortib olishimiz kerak. Kontentdan tortib olamiz, shunga mos ravishda uning kengligini kamaytiramiz:

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

Keling, endi balandlik qo'shamiz, chunki bizning elementlarimizda tarkib mavjud emas. Faqat bitta elementga balandlik qo'shish yetarli, chunki ikkinchi fleks elementi balandlik bo'yicha moslashadi (nima uchun?). Keling, content'ga balandlik belgilaymiz:

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

Keling, content va sidebar'ga qolgan uslublarni qo'shamiz:

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

Hammasi tayyor, bizning maketimiz tayyor. Keling, barcha kodni birga jamlaymiz:

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;
}