جلسه ۳۳: مدل جعبه در CSS

webآگوست 16, 2021

هر عنصر HTML فقط یک جعبه است موارد زیر را بیان خواهیم کرد

اندازه گیری نسبی در مقابل مطلق
دستکاری مدل جعبه
ارتفاع و عرض
padding
border
Border-radius
margin

مرورگر شما هر عنصر HTML را به عنوان یک جعبه مستطیلی مطابق با مدل استاندارد جعبه CSS ارائه می دهد. هر عنصر HTML در صفحه وب شما از یکcontent area ، padding ، border و margin تشکیل شده است.

یادگیری نحوه دستکاری خصوصیات CSS در مدل جعبه ای برای قرار دادن مطالب در صفحات وب مفید خواهد بود.

اندازه گیری های نسبی و مطلق

ما می توانیم پارامترهای مربوط به اندازه “جعبه” را که یک عنصر با بسیاری از ویژگی های CSS مختلف را دارا است ، دستکاری کنیم. اغلب اوقات ، می خواهید طول content area ، padding ، margin و غیره را مشخص کنید. اما چگونه این طول ها را مشخص کنیم؟ متداول ترین واحدهای مورد استفاده درصد یعنی همان ٪ و تعداد پیکسل ها یا px است. درصد یک اندازه گیری نسبی از طول است. هنگام تعیین طول با استفاده از واحد٪ ، طول نسبت به طول عنصر اصلی اندازه گیری می شود:

<html>

<head>

<title>Relative Length Measurements</title>

</head>

<body>

<div>

<h1 class=”half”>Half-width of parent element.</h1>

<h1 class=”quarter”>Quarter-width of parent element.</h1>

</div>

<h1 class=”half”>Half-width of parent element.</h1>

<h1 class=”quarter”>Quarter-width of parent element.</h1>

</div>

</body>

</html>

body * {
  border: 3px solid black;
  border-radius: 10px;
}

#halfWidthContainer {
  width: 50%
}

.half {
  width: 50%;
}

.quarter {
  width: 25%;
}

از آنجا که ما از٪ ، یک واحد اندازه گیری نسبی، استفاده کردیم ، طول عناصر h1 در div دوم نصف عناصر h1 در div اول است حتی اگر این عناصر دارای ویژگی های CSS یکسان باشند. از طرف دیگر ، تعیین تعداد پیکسل ها یک اندازه گیری مطلق از طول را نشان می دهد. اندازه گیری مطلق ثابت است و به اندازه گیری سایر عناصر HTML متکی نیست.

<html>

<head>

<title>Absolute Length Measurements</title>

</head>

<body>

<div>

<h1 class=”half”>Absolute length does not rely on parent element.</h1>

<h1 class=”quarter”>Absolute length does not rely on parent element.</h1>

</div>

<h1 class=”half”>Absolute length does not rely on parent element.</h1>

<h1 class=”quarter”>Absolute length does not rely on parent element.</h1>

</div>

</body>

</html>

body * {
  border: 3px solid black;
  border-radius: 3px;
}

#halfWidthContainer {
  width: 50%
}

.half {
  width: 600px;
}

.quarter {
  width: 300px;
}

ویژگی حاشیه را می توان به ویژگی های دقیق تر تنظیم شده مانند border-style ،border-color و border-width گسترش داد. این خصوصیات را می توان بیشتر گسترش داد تا یک طرف خاص را هدف قرار دهد ، به عنوان مثالborder-top-width و غیره.

border-radius

اگر می خواهید حاشیه هایی ایجاد کنید که دارای گوشه های گرد باشند ، از ویژگی border-radius استفاده کنید. همچنین می توانید با ارائه دو مقدار به شعاع حاشیه ، جدا شده توسط یک اسلش (/) ، گوشه های بیضوی ایجاد کنید.

<html>

<head>

</head>

<body>

<h1>Straight corners</h1>

<h1 class=”rounded”>Rounded corners</h1>

<h1 class=”elliptical”>Elliptical corners</h1>

</body>

</html>

h1 {
  border: 10px solid black;
  margin: 20px;
}

.rounded {
	border-radius: 15px;
}

.elliptical {
  border-radius: 50px / 25px;
}

margin

خاصیت margin شباهت زیادی به خصوصیت padding دارد ، با این تفاوت که به شما اجازه می دهد فاصله اطراف عنصر HTML از مرز را تعریف کنید. مانند padding ، به شما امکان می دهد مقادیر یک یا چند را تعریف کنید.

<html>

<head>

<title>CSS Margins</title>

</head>

<body>

<span id=”margin1″>One Value</span>

</div>

<span id=”margin2″>Two Values</span>

</div>

<span id=”margin3″>Three Values</span>

</div>

<span id=”margin4″>Four Values</span>

</div>

</body>

</html>

/* ۱ value: margin applied as
	 same on all sides */
#margin1 {
  margin: 10px;
}

/* ۲ values: margin applied as 
	 vertical sides - horizontal sides */
#margin2 {
  margin: 10px 20px;
}

/* ۳ values: margin applied as 
   top - horizontal sides - bottom */
#margin3 {
  margin: 10px 20px 30px;
}

/* ۴ values: margin applied as 
   top - right - bottom - left */
#margin4 {
  margin: 10px 20px 30px 40px;
}

.spanBox {
  border: 1px dashed black;
  margin: 5px;
  float: left;
}

span {
  background-color: plum;
  border: 5px solid green;
  padding: 10px 20px;
  display: inline-block;
}

در این مثال ، فضای بین مرزهای سبز و سیاه حاشیه بین عناصر <span> و ظروف <div> آنها را نشان می دهد. حاشیه همچنین می تواند به خصوصیات ریزدانه تری برای هدف قرار دادن یک سمت خاص تقسیم شود ، از جمله margin-top ،marginbottom margin-right وmargin-left. اکنون که با مدل جعبه آشنا شدید ، بیایید بیاموزیم که در درس بعدی با استفاده از CSS رنگ به قلم و پس زمینه اضافه کنیم.