جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کامل کار با Box Sizing در CSS3

آموزش کامل کار با Box Sizing در CSS3

13 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
297 بازدید
آموزش صفحه بندی یا Pagination در CSS

Box Sizing در CSS3

فهرست عناوین

  • Box Sizing در CSS3
  • مدل باکس یا Box Model در یک صفحه وب
  • نحوه محاسبه اندازه واقعی یک عنصر
  • آموزش کامل کار با Box Sizing در CSS3
  • مثال های بیشتر از کار با Box Sizing در CSS3
  • پشتیبانی مرورگرها از ویژگی box-sizing در CSS3

باکس سایزینگ یا به انگلیسی Box Sizing یکی از ویژگی هایست که در زبان سی اس اس نسخه ۳ یعنی CSS3 اضافه شده است، که با استفاده از این ویژگی میتوانیم اندازه عرض و ارتفاع یک عنصر را به بهترین شکل ممکن محاسبه کرد. این ویژگی از اون ویژگی های هس که شاید خیلی براتون گیج کننده باشه یا شاید تا الان از این ویژگی درک درستی پیدا نکردید و در کل شاید هیچوقت متوجه عملکرد این ویژگی نشده اید. ولی من در این جلسه ( کار با Box Sizing در CSS3 ) میخوام شمارو بطور کامل با این ویژگی آشنا کنم، جوری که در پایان جلسه دیگه بطور کامل با این ویژگی آشنا شده باشید و کامل اونو درک کرده باشید. پس با من همراه باشید.

مدل باکس یا Box Model در یک صفحه وب

خب یعنی چه مدل باکس !؟ تمامی عناصر یا تگ های HTML در یک صفحه وب حالت باکس دارند، یعنی شبیه یک جعبه می باشند که این جعبه چندین ویژگی داره :

یعنی در واقع میتونیم بگیم که هر یک از عناصر در یک صفحه وب میتوانند ویژگی هایی زیر را داشته باشند :

  • اندازه عرض یا Width
  • اندازه ارتفاع یا Height
  • اندازه پدینگ یا Padding
  • اندازه خط دور لبه یا Border
  • اندازه مارجین یا Margin

یه توضیح کوتاه برای ویژگی های موجود در لیست بالا :

  • Width : اندازه عرض یک عنصر را مشخص میکند
  • Height : اندازه ارتفاع یک عنصر را مشخص میکند
  • Padding : اندازه یا فاصله داخلی متن موجود در عنصر با دیواره خود عنصر
  • Border : اندازه خط دور لبه ی عنصر
  • Margin : میزان اندازه یا فاصله عنصر از بیرون با دیگر عناصر

تصویر زیر دقیقا داره موارد بالا را نشون میده :

آموزش کامل کار با Box Sizing در CSS3
برای مشاهده در اندازه اصلی بروی تصویر کلیک نمایید

حالا یه مثال عملی میزنیم تا کامل این جریان باکس مدل رو متوجه شوید ، در مثال اول من فقط اندازه عرض و ارتفاع یک عنصر رو مشخص میکنم یعنی از Padding و Margin و Border استفاده نمیکنم ببینیم چی میشه !

مثال شماره ۱ : خب اندازه عرض رو ۱۵۰ پیکسل و ارتفاع ۵۰ پیکسل تنظیم کردیم.

1
2
3
4
5
6
7
8
<style>
 
div{
width:150px;
height:50px;
}
 
</style>

مثال شماره ۲ : اندازه عرض ۱۵۰ پیکسل و ارتفاع ۵۰ – ویژگی های Padding,Margin و Border با اندازه های مشخص شده نیز اضافه شده اند.

1
2
3
4
5
6
7
8
9
10
11
<style>
 
div{
width:150px;
height:50px;
padding:15px;
margin:20px;
border:5px solid black;
}
 
</style>

 

خب ۲ تا مثال بالا رو مشاهده نمودید؟! حالا بگید ببینم آیا اندازه باکس موجود در مثال شماره ۱ با باکس موجود در مثال شماره ۲ یکی است؟؟

پاسخ : خیر اندازه این ۲ باکس باهمدیگر فرق میکنند و باکس شماره ۲ در مثال شماره ۲ بزرگتر می باشد، به دلیل اینکه در مثال شماره ۲ ویژگی های Padding,Margin,Border با اندازه های مشخص اضافه شده اند.

نتیجه گیری

پس نتیجه میگیریم که اندازه واقعی یک باکس متن با استفاده از ویژگی های Width,Height,Padding,Margin و Border مشخص می شود، لذا ما باید اندازه هامون رو به نسبت این ویژگی ها مشخص نماییم.

نحوه محاسبه اندازه واقعی یک عنصر

همونطور که گفتم اندازه واقعی یک عنصر صرفا از طریق ویژگی Width و Height ایجاد نمی شود، بلکه باید اندازه ویژگی های زیر را نیز اضافه کنیم :

لطفا به دستورات زیر توجه نمایید :

1
2
3
4
5
6
div {
width: 320px;
padding: 10px;
border: 5px solid blue;
margin: 10px;
}

طبق دستورات بالا میخوایم اندازه عرض عنصر رو مشخص کنیم یا محاسبه کنیم :

اندازه کل عرض = اندازه پدینگ از سمت راست + اندازه پدینگ از سمت چپ + اندازه بوردر از سمت راست + اندازه بوردر از سمت چپ + اندازه مارجین از سمت راست + اندازه مارجین از سمت چپ نتیجه محاسبه میشه : ۳۷۰ پیکسل – یعنی اندازه عرض واقعی عنصر ما میشه ۳۷۰px حالا طبق دستورات زیر میخوایم اندازه واقعی ارتفاع یک عنصر را مشخص کنیم :

1
2
3
4
5
6
div {
height: 50px;
padding: 10px;
border: 5px solid blue;
margin: 10px;
}

 

محاسبه اندازه ارتفاع عنصر طبق دستورات بالا :

اندازه کل ارتفاع = اندازه پدینگ از سمت بالا + اندازه پدینگ از سمت پایین + اندازه بوردر از سمت بالا + اندازه بوردر از سمت پایین + اندازه مارجین از سمت بالا + اندازه مارجین از سمت پایین

نتیجه محاسبه میشه : ۱۰۰ پیکسل – یعنی اندازه ارتفاع واقعی عنصر ما میشه ۱۰۰px

خب حالا که بطور کامل با جریان باکس مدل آشنا شدید بریم برای یادگیری جریان Box Sizing در CSS3 که این ویژگی به کمک ما اومده تا بتونیم خیلی بهتر اندازه یک عنصر را مشخص کنیم.

آموزش کامل کار با Box Sizing در CSS3

ما گفتیم علاوه بر اندازه Width و Height ، ویژگی های Padding,Margin,Border هم بروی اندازه عرض و ارتفاع یک عنصر تاثیر میزارن.

حالا باکس سایزینگ یا Box Sizing در CSS3 چکار میکنه برای ما، بطور کلی بدونید باکس سایزینگ میاد و اندازه عرض و ارتفاع یک عنصر رو با اندازه ویژگی های Padding,Margin,Border تفکیک میکنه.

یعنی از هم جداشون میکنه و نمیزاره اندازه های ویژگی های Padding,Margin,Border روی اندازه عرض و ارتفاع تاثیر بزاره، برای اینکه بطور کامل متوجه عملکرد این ویژگی شوید لطفا به مثال زیر توجه نمایید.

این ویژگی ۲ مقدار زیر را میپذیرد :

  • Content-box : بصورت پیشفرض این گزینه فعاله و اندازه هارو از هم تفکیک نمیکنه
  • Border-box : باعث میشه اندازه ها از همدیگر تفکیک بشن

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
 
div.t1{
width:300px;
height:70px;
padding:20px;
margin:10px;
border:5px solid black;
}
 
div.t2{
box-sizing:border-box;
width:300px;
height:70px;
padding:20px;
margin:10px;
border:5px solid black;
}
 
</style>

 

در مثال بالا خب همونطور که میبینید اندازه های هر ۲ باکس دقیقا یکی هستند، ولی پس چرا باکس اولی از باکس دوم بزرگتره؟ خب برای اینکه باکس اول از ویژگی box-sizing استفاده نکرده.

به همین دلیل در باکس اول اندازه ویژگی های Padding,Margin و Border میره روی اندازه عرض و ارتفاع و با هم جمع میشن و در نتیجه اندازه عرض و ارتفاع بیشتر میشه.

مثال های بیشتر از کار با Box Sizing در CSS3

مثال شماره ۱ :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
 
div.container{
width: 100%;
border: 1px solid black;
}
 
div.box{
box-sizing: border-box;
width: 50%;
border: 3px solid red;
float: left;
}
 
</style>

 

مثال شماره ۲ : استفاده از این ویژگی در انتخابگر کل یا سراسری ( * ) یعنی بروی تمامی عناصر موجود در صفحه اعمال می شود.

1
2
3
4
5
6
7
<style>
 
*{
box-sizing: border-box;
}
 
</style>

 

پشتیبانی مرورگرها از ویژگی box-sizing در CSS3

این ویژگی برای نمایش در مرورگرهای مدرن مشکلی نداره و این مرورگرها بخوبی از این ویژگی پشتیبانی میکنند، فقط برخی از نسخه های قدیمی این مرورگرها از این ویژگی پشتیبانی نمیکنند که ما باید یسری دستور پیشوندی به شرح جدول زیر برای رفع این مشکل مناسب هریک از مرورگرهای اینترنتی استفاده نماییم.

در جدول زیر از نسخه ی مشخص شده به بعد این ویژگی در مرورگرها مدرن پشتیبانی می شود.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی از نسخه ۱۰٫۰ به بالا از نسخه ۲۹٫۰ به بالا ۹٫۵ از ۵٫۱ به بالا ۸٫۰

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

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۴٫۰
-webkit-
۲٫۰
-moz-
– ۳٫۲
-webkit-
–

خب دوستان خسته نباشید به پایان این جلسه ( آموزش کامل کار با Box Sizing در CSS3 ) رسیدیم، امیدوارم که بطور کامل با این ویژگی آشنا شده باشید و مشکلی در این جلسه براتون وجود نداشته باشد.

بیشتر بخوانیم:

  • آموزش کامل واحدهای اندازه گیری در CSS
  • فرم‌ در بوت‌استرپ
  • آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4
  • نحوه کار با انیمیشن ها یا Animations در CSS3
  • کار با ویژگی Transforms در CSS3
اشتراک گذاری:
برچسب ها: BoxCSS3Sizingآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش کامل کار با Box Sizing در CSS3
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت