CSSda ikki ustunli sayt maket sxemasi

Keling, quyidagicha ikki ustunli maket qilaylik:

Boshlash uchun sahifaning asosiy tuzilishini yaratamiz:

<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:

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

Endi header va footer uchun uslublarni belgilaymiz:

#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:

#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:

* {
	box-sizing: border-box;
}

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

#container {
	display: flex;
}

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

#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:

#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:

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

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

#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:

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

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