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

saber

4 سال پیش

امتیاز دهید post

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

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

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

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

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

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

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

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

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

   &lt;body&gt;
      &lt;div class = "div1"&gt;TutorialsPoint.com&lt;/div&gt;&lt;br /&gt;
      &lt;div class = "div2"&gt;TutorialsPoint.com&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         .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;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div class = "div1"&gt;TutorialsPoint.com&lt;/div&gt;&lt;br /&gt;
      &lt;div class = "div2"&gt;TutorialsPoint.com&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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

امتیاز دهید post

نویسنده مطلب saber

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

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

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

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

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

دیدگاه شما

بدون دیدگاه

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

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

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

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه