جلسه ی سی و ششم: خصوصیت Box در CSS

خصوصیت Box در CSS

در جلسات پیش با باکس نوشته (برای دیدن آموزش طراحی باکس نوشته کلیک کنید) و نحوه ی تولید آن (برای دیدن آموزش نحوه ی تولید باکس محتوا در وب کلیک کنید) آشنا شدید. در این جلسه از جلسات طراحی سایت می خواهیم در مورد خصوصیت Box در CSS صحبت کنیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

خصوصیت Box

به مجوعه ای از خصوصیت ها که می تواند به یک box اضافه شود خصوصیت Box می گویند. خصوصیت باکس دارای چندین دسته ی اصلی می باشد که عبارتند از:

  1. box-shadow
  2. box-sizing
  3. box-align
  4. box-direction
  5. box-ordinal-group
  6. box-pack

 

خصوصیت box-shadow

از خصوصیت box-shadow برای ایجاد سایه بر روی اجزای مختلف سایت استفاده می شود. به طور کلی از این روش برای ایجاد سایه ها در زیر یک باکس استفاده شده که از این طریق باعث برجسته تر شدن باکس مورد نظر ما می شود. برای آشنایی بیشتر با این خصوصیت می توانید به آموزش سایه ها در CSS مراجعه نمایید.

نکته: از طریق خصوصیت box-shadow می توان یک یا چند سایه به باکس مورد نظر خود اضافه کنید که این سایه ها از طریق کاما از یکدیگر جدا می شوند.

 

خصوصیت box-sizing

همه ما با مفهموم باکس مدل آشنا هستیم. (برای مشاهده ی آموزش Box Model کلیک نمایید) این مفهموم نشان می دهد که هر باکس ما از ۴ بخش Content، padding، border و margin تشکیل می شود. بگذارید با یک مثال به توضیح باکس مدل بپردازیم.

فرض کنید شما عرض یک عنصر را ۲۰۰px و ارتفاع آن را ۱۰۰px قرار دهید حال اگر علاوه بر این ها یک padding به اندازه ی ۲۰px به عنصر خود اضافه کنید عملا عرض عنصر شما ۲۴۰px و ارتفاع عنصر شما ۱۴۰px می باشد و فضایی به این اندازه اشغال می کند. حال اگر بخواهیم که اندازه ی عنصر ما از اندازه ی اولیه ای که به آن داده ایم بیشتر نشود باید از خصوصیت box-sizing استقاده کنیم.

برای مثال مقدار خصوصیت box-sizing را بر روی border-box قرار می دهیم سپس به آن padding و border اضافه می کنیم بر خلاف حالت اول که فضای اشغال شده توسط عنصر مورد نظر ما بیشتر میشد در این حالت فضای عنصر بیشتر نشده و اندازه ی باکس ما تغیییری نمی کند. در اصل در این حالت میزان اندازه ی بخش Content ما کوچکتر می شود. به نمونه کد زیر توجه کنید.

کد HTML:

<img src="image/img.jpg" alt="" class="img">
<img src="image/img.jpg" alt="" class="img1">

کد CSS:

body {
  background-color: #fff;
}
.img {
  width: 400px;
  height: 200px;
  padding: 45px;
  border: 5px solid #000
}
.img1 {
  width: 400px;
  height: 200px;
  float: left;
  padding: 45px;
  border: 5px solid #000;
  box-sizing: border-box;
}

خروجی کد بالا:

خصوصیت Box در CSS

همانطور که در عکس بالا مشاهده می کنید عکس سمت راست خصوصیت box-sizing را ندارد و اندازه های آن بیشتر می شود و عرض آن از ۴۰۰px به ۴۹۵px تبدیل می شود اما عکس سمت راست دارای خصوصیت box-sizing می باشد و عرض آن ۴۰۰px بیشتر نمی شود.

 

خصوصیت box-align

خصوصیت box-align شبیه خصوصیت Text-align می باشد یعنی می تواند مکان عناصر درون یک جدول را مشخص کند. به طور کلی بهتر است که از خصوصیت Text-align استفاده کنیم زیرا توسط همه ی مرورگر ها شناخته شده و پشتیبانی می شود اما این در صورتی است که خصوصیت box-align توسط هیچ مرور گری پشتیبانی نمی شود و برای استفاده از آن باید از پیشوند های هر مرورگر استفاده کنیم.

 

خصوصیت box-direction

خصوصیت box-direction نیز مانند خصوصیت box-align می باشد و جهت قرار گیری عناصر را در باکس مشخص می کند. زمانی که از ویژگی های خصوصیت box-align و خصوصیت box-direction استفاده می کنیم فاصله ی بین اجزای مختلف از بین می رود یعنی چندین تگ p و H1 را اگر پشت سر هم استفاده کنیم در حالت معمول هر تگ به خط بعد منتقل می شود اما در این حالت پشت سر همه نوشته می شوند.

 

خصوصیت box-ordinal-group

از خصوصیت box-ordinal-group برای ترتیب قرار گرفتن فرزندان در در یک باکس استفاده می شود. توجه داشته باشید که این خصوصیت در مرورگر ها پشتیبانی نمی شود و باید از پیشوند های مرورگر ها استفاده کنیم.

 

خلاصه مطلب

  1. به مجوعه ای از خصوصیت ها که می تواند به یک box اضافه شود خصوصیت Box می گویند.
  2. از خصوصیت box-shadow برای ایجاد سایه بر روی اجزای مختلف سایت استفاده می شود.
  3. خصوصیت box-sizing اجازه نمی دهد اندازه ی باکس مورد نظر ما از اندازه ای که ما نوشته ایم بیشتر شود.
  4. خصوصیت box-align شبیه خصوصیت Text-align می باشد یعنی می تواند مکان عناصر درون یک جدول را مشخص کند.
  5. خصوصیت box-direction نیز مانند خصوصیت box-align می باشد.
  6. از خصوصیت box-ordinal-group برای ترتیب قرار گرفتن فرزندان در در یک باکس استفاده می شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها