آموزش ویژگی اندازه جعبه در CSS3 

erfan molaei
3 سال پیش

 

آموزش ویژگی اندازه جعبه در CSS3 

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

از ویژگی اندازه جعبه برای تغییر ارتفاع و عرض عنصر استفاده می شود.

از زمان css2، ویژگی جعبه مانند شکل زیر کار می کند –

عرض + پد + حاشیه = عرض واقعی قابل مشاهده / ارائه شده جعبه عنصر

ارتفاع + پد + حاشیه = ارتفاع قابل مشاهده / ارائه شده واقعی جعبه عنصر

به معنای این است که شما ارتفاع و عرض را تنظیم می کنید، کمی بزرگتر به نظر می رسد، سپس اندازه آن داده می شود، زیرا باعث می شود عنصر به طور مرتب و پد به ارتفاع و عرض عنصر اضافه شود.

ویژگی اندازه در CSS2

 

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

 

 

 

ویژگی اندازه در CSS3

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

 

خروجی.

لیست جلسات قبل آموزش CSS

  1. آموزش CSS
  2. CSS چیست؟
  3. آموزش نحو CSS
  4. آموزش قوانین CSS 
  5. آموزش واحد انداره گیری در CSS
  6. آموزش رنگ ها در CSS
  7. آموزش Background در CSS
  8. آموزش فونت ها در CSS
  9. آموزش استفاده از تصاویر در CSS 
  10. آموزش استفاده از تصاویر در CSS 
  11. آموزش استفاده از لینک ها در CSS 
  12. آموزش جداول در CSS 
  13. آموزش حاشیه در CSS 
  14. آموزش margin در CSS
  15. آموزش لیست ها در CSS
  16. آمورش ویژگی padding در CSS
  17. آموزش ویژگی مکان نما در CSS 
  18. آموزش outline در CSS 
  19. آموزش ابعاد در CSS 
  20. آموزش نوارهای پیمایشی در CSS
  21. آموزش visibility در CSS
  22.  آموزش موقعیت یابی در  CSS 
  23. آموزش لایه ها در CSS 
  24. آموزش شبه کلاس ها در CSS 
  25. آموزش شبه عناصر در CSS
  26.  آموزش قوانین @ در CSS 
  27. آموزش فیلترهای متنی و تصویری در CSS 
  28. آموزش انواع رسانه ها در CSS 
  29. آموزش مدیا صفحه در CSS
  30. آموزش رسانه شنیداری در CSS
  31. آموزش چاپ در CSS 
  32. آموزش طرح بندی در CSS 
  33. آموزش CSS3
  34. آموزش گرد کردن گوشه ها در CSS3 
  35. آموزش حاشیه تصویر CSS3 
  36. آموزش تنظیم چند پس زمینه در CSS3  
  37. رنگ ها در CSS3 
  38. آموزش گرادیان در CSS3
  39.  آموزش سایه در CSS3 
  40.  آموزش تکست در CSS3
  41. آموزش فونت های وب در CSS3 
  42. آموزش تبدیل ۲d در CSS3 
  43. آموزش تبدیل سه بعدی در CSS3
  44. آموزش انیمیشن در CSS3 
  45. آموزش چند ستونی در CSS3
  46. آموزش رابط کاربری در CSS3
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه