cssطراحی سایت

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

هر عنصر 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>
   <div id=”halfWidthContainer”>
     <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>
   <div id=”halfWidthContainer”>
     <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>
   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>
 </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>
   <div class=”spanBox”>
     <span id=”margin1″>One Value</span>
   </div>
   <div class=”spanBox”>
     <span id=”margin2″>Two Values</span>
   </div>
   <div class=”spanBox”>
     <span id=”margin3″>Three Values</span>
   </div>
   <div class=”spanBox”>
     <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 رنگ به قلم و پس زمینه اضافه کنیم.
توجه کنید که چگونه از اندازه گیری مطلق طول استفاده کردیم ، عرض عناصر h1 در div دوم دقیقاً همان عناصر h1 در div اول است.

دستکاری مدل جعبه

این بخش بسیاری از خصوصیات CSS متداول را که می توانید برای دستکاری مدل جعبه استفاده کنید ، مرور می کند.

width و height

برای تغییر ارتفاع و عرض ناحیه محتوای یک عنصر ، از خصوصیات CSS با height و width استفاده کنید.

Padding

از ویژگی padding برای ایجاد فاصله بین منطقه محتوای یک عنصر و مرز استفاده کنید. ویژگی padding این فاصله را به روشهای مختلف بسته به تعداد مقداری که ارائه می دهید اعمال می کند ، همانطور که در مثال زیر نشان داده شده است: درک خود را بررسی کنید:
<html>
 <head>
   <title>CSS Padding</title>
 </head>
 <body>
   <div>
     <span id=”padding1″>One Value</span>
     <span id=”padding2″>Two Values</span>
     <span id=”padding3″>Three Values</span>
     <span id=”padding4″>Four Values</span>
   </div>
 </body>
</html>
/* A single value will apply the same 
padding on all sides of the box */
#padding1 {
  padding: 10px;
}

/* Two values will apply as: 
		first value - vertical sides
		second value - horizontal sides */
#padding2 {
  padding: 5px 20px;
}

/* Three values will apply as:  
		first value: top side
		second value: horizontal sides
		third value: bottom side */
#padding3 {
  padding: 10px 5px 30px;
} 

/* Four values will apply as: 
		first value: top
		second value: right
		third value: bottom
		fourth value: left
*/
#padding4 {
  padding: 10px 5px 60px 35px;
}

div {
  padding: 20px;
}

span {
  background-color: plum;
  border: 5px solid green;
}
/* Apply ۱۰ percent (of parent element's width) worth of padding to the bottom side of paragraph elements */

p {
    padding-bottom: ۱۰%;
}
درک خود را بررسی کنید:
0
ایجاد شده در

Quiz 49

1 / 4

خاصیت padding می تواند یک ، دو ، سه یا چهار مقدار را بپذیرد.

2 / 4

با توجه به HTML زیر ، روش صحیح تنظیم ویژگی width یک عنصر p بر 10/1 از والد آن چیست؟

<div>  <p>My width should be one tenth of my parent.</p></div>

3 / 4

اندازه گیری های نسبی به عنصر دیگری بستگی ندارد.

4 / 4

روش صحیح تنظیم padding فقط برای سمت راست یک عنصر div چیست؟

امتیاز شما

میانگین امتیازها 0%

0%

border

همانطور که از نام آن مشخص است ، ویژگی CSS حاشیه مرز یک عنصر را تعیین می کند. نحو برای ویژگی border به شرح زیر است
border: width style color;
عرض را می توان در واحدهای مطلق یا نسبی داد. این استایل می تواند شامل مواردی مانند dotted ، dotted ، double و solid باشد. لیست کاملی از سبک های حاشیه ای را می توان در اینجا یافت. رنگ می تواند هر مقدار رنگ معتبری باشد. ما در یک درس بعدی به جزئیات بیشتری در مورد مقادیر رنگ خواهیم پرداخت ، اما در حال حاضر ، از مقادیر مختصر رنگ CSS برای تعیین ویژگی رنگ استفاده خواهیم کرد.
<html>
 <head>
   <title>Creating borders with CSS</title>
 </head>
 <body>
   <p id=”border1″>Purple dotted border</p>
   <p id=”border2″>Green double border</p>
   <p id=”border3″>Yellow solid border</p>
   <p id=”border4″>Teal grooved border</p>
 </body>
</html>
#border1 {
  border: 10px dotted purple;
}

#border2 {
  border: 10px double green;
}

#border3 {
  border: 10px solid yellow;
}

#border4 {
  border: 10px groove teal;
}
ویژگی حاشیه را می توان به ویژگی های دقیق تر تنظیم شده مانند border-style ،border-color و border-width گسترش داد. این خصوصیات را می توان بیشتر گسترش داد تا یک طرف خاص را هدف قرار دهد ، به عنوان مثالborder-top-width و غیره.

border-radius

اگر می خواهید حاشیه هایی ایجاد کنید که دارای گوشه های گرد باشند ، از ویژگی border-radius استفاده کنید. همچنین می توانید با ارائه دو مقدار به شعاع حاشیه ، جدا شده توسط یک اسلش (/) ، گوشه های بیضوی ایجاد کنید.
<html>
 <head>
   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>
 </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>
   <div class=”spanBox”>
     <span id=”margin1″>One Value</span>
   </div>
   <div class=”spanBox”>
     <span id=”margin2″>Two Values</span>
   </div>
   <div class=”spanBox”>
     <span id=”margin3″>Three Values</span>
   </div>
   <div class=”spanBox”>
     <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 رنگ به قلم و پس زمینه اضافه کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا