advertise laitec sharif univercity
دانلود سورس اپلیکیشن اندروید پیانو سنتی

دانلود سورس اپلیکیشن اندروید پیانو سنتی

14000 تومان
دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

68000 تومان
دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

14000 تومان
دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

10000 تومان
دانلود سورس پروژه سی شارپ شبیه سازی صف بانک تحت شبکه

دانلود سورس پروژه سی شارپ شبیه سازی صف بانک تحت شبکه

10000 تومان

مدل کاری (box model) در Css چیست؟

تمامی عناصر HTML در CSS به صورت یک کادر(جعبه) چهار گوش تصور می شوند. مدل کادري، کادري است که در اطراف عناصر صفحه می تواند قرار بگیرد و شامل ویژگی هاي margin،border padding و content میباشد.براي تنظیم عرض و ارتفاع حقیقی یک عنصر درك مفهوم مدل کادري بسیار مهم است.
مدل کاری (box model) در Css چیست؟

جالب است بدانید تمامی عناصر  HTML در CSS به صورت یک کادر)جعبه( چهار گوش تصور می شوند . این مفهوم در مبحث طراحی و طرح بندي (قالب) صفحات استفاده می شود. مدل کادري در اصل کادري است که در اطراف عناصر صفحه می تواند قرار بگیرد و شامل ویژگی هاي زیر باشد :

  • margin : فضاي اطراف border را پوشش می دهد . این قسمت نمی تواند رنگ پس زمینه داشته باشد و کاملا شفاف است.
  • border : این بخش فضاي اطراف content و padding را پوشش می دهد و می تواند رنگ ، سبک و ضخامت خاص خود را داشته باشد .
  • padding : فضاي اطراف content را پوشش می دهد . این بخش می تواند تحت تاثیر رنگ پس زمینه عنصر قرار بگیرد .
  • content : محتواي عنصر را در بر می گیرد . همان جایی که متن و عکس قرار می گیرد .

براي تنظیم عرض و ارتفاع حقیقی یک عنصر درك مفهوم مدل کادري بسیار مهم است.

 

♦ قواعد مربوطه به تنظیم ابعاد عنصر :

  • height : این قاعده ارتفاع فضاي اشغال شده توسط تگ را مشخص می کند . این فاصله شامل فاصله محتویات درون تگ از حاشیه آن ، اندازه حاشیه هاي تگ و فاصله حاشیه هاي آن از تگ هاي اطراف نمی شود .
  • min-height :  این قاعده ، حداقل ارتفاع فضاي اشغالی توسط تگ را تعیین می کند . ارتفاع یک تگ هیچ گاه کمتر از میزان تعیین شده از طریق قاعده min-height نمی شود. اما حداکثر ارتفاع می تواند بر اساس محتویات درون تگ متغیر باشد . ازاین قاعده معمولا براي مطمئن شدن از اینکه حداقل ارتفاع تگی حتی در صورت نداشتن محتویاتی از مقداري کمتر نشود استفاده می شود.
  • max-height : این قاعده دقیقا بالعکس قاعده min-height رفتار می کند یعنی حداکثر ارتفاع فضاي اشغالی توسط تگ را تعیین می کند .
  • width : این قاعده ، پهناي فضاي اشغال شده توسط تگ را مشخص می کند .
  • min-width : این قاعده حداقل پهناي فضاي اشغال شده توسط تگ را تعیین می کند .
  • max-width : این قاعده حداکثر پهناي فضاي اشغال شده توسط تگ را تعیین می کند .

 

♦ فاصله از اطراف :

  • margin-top :  این قاعده میزان فاصله حاشیه بالاي تگ را از تگ پدرش یا تگی که در بالاي آن قرار دارد تعیین می کند .
  • margin-right :  این قاعده میزان فاصله حاشیه سمت راست تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین می کند .
  • margin-left :  این قاعده میزان فاصله حاشیه سمت چپ تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین میکند.
  • margin-bottom:  این قاعده میزان فاصله حاشیه سمت پایین تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین میکند.
  • margin : این قاعده ، میانبري براي چهار قاعده فوق می باشد . در واقع از این قاعده می توان براي تنظیم هر چهار قاعده فوق به یکباره استفاده کرد . به مثال زیر توجه کنید :
img {
margin-top : 20px;
margin-right : 30px;
margin-bottom : 10px;
margin-left : 15px;
}

این دستور میزان فاصله هر یک از چهار طرف عکس هاي صفحه را به صورت جداگانه تعیین می کند . ما می توانیم به جاي این دستور از margin به صورت زیر استفاده کنیم :

img {
margin : 20px 30px 10px 15px ;
}

به نحوه مقدار دهی به قاعده margin که در جهت عقربه هاي ساعت( یعنی ابتدا بالا ، راست ، پایین و چپ) است و بین هر مقدار فاصله اي وجود دارد دقت کنید .

 

♦ فاصله از داخل :

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding

این قواعد هم میزان فاصله محتویات داخل یک تگ (content) را از حاشیه هاي بالا ، راست ، پایین و چپ کنترل می کنند . padding میانبري براي هر ۴ قاعده است و نحوه مقدار دهی آن همانند قاعده margin خواهد بود .

موقعی که ما از قواعد width و height در CSS براي یک عنصر استفاده می کنیم در واقع فقط عرض و ارتفاع بخش content آن را تعیین کرده ایم . براي بدست آوردن عرض و ارتفاع حقیقی یک عنصر (یعنی آنچه در صفحه نمایش داده می شود) باید مقادیر تعیین شده براي قواعد border ، padding و margin را نیز به آن ها اضافه کنیم . به عنوان مثال قواعد زیر را که براي یک عنصر تعیین شده است در نظر بگیرید :

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

 عرض حقیقی این عنصر در صفحه 300 px  خواهد بود . براي بدست آوردن عرض حقیقی یک عنصر باید به صورت زیر عمل کنیم :

element width = width + left padding + right padding + left border + right border + left margin + right margin

این موضوع براي ارتفاع یک عنصر نیز صادق است . ارتفاع حقیقی یک عنصر باید به صورت زیر محاسبه شود :

element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

 

♦ حاشیه ها و Outline ها :

قواعد حاشیه ها ، اجازه کنترل حاشیه هاي تگ را می دهند . حاشیه تگ مکانی است میان padding و margin. به عبارتی دیگر مکانی بین محتویات داخل یک تگ و مرز آن ها با تگ هاي دیگر .

Outline ها به دور حاشیه ها کشیده می شوند و در حقیقت یک حاشیه دیگر را براي تگ بوجود می آورند . تفاوت Outline ها با حاشیه ها این است که Outline ها بر خلاف حاشیه ها ، فضایی که اشغال می کنند جزء فضاي تگ محسوب نمی شود و در صورتی که قسمتی از تگ مجاور با تگ جاري تلاقی داشته باشد بر روي تگ مجاور قرار می گیرد .

  • : border-top-color این قاعده رنگ حاشیه بالاي تگ را تعیین می کند و یک رنگ را به عنوان مقدار می پذیرد . یکی از مقادیري که این قاعده می پذیرد ، کلمه کلیدي transparent است که در این حالت براي حاشیه تگ ، رنگی در نظر گرفته نمی شود اما همچنان فضایی را به میزانی که با قاعده border-width براي تگ تعیین شده است اشغال می کند .
  • border-top-style : این قاعده طرح حاشیه بالاي تگ را تعیین می کند. میتوان به آن مقادیر dotted ،dashed، solid، double، groove، ridge،  inset و outset داد. به غیر از این مقادیر این خاصیت دو مقدار زیر را با کارکرد هاي متفاوت به عنوان مقدار می پذیرد:
  • ​​​none : با این مقدار هیچ حاشیه اي براي تگ در نظر گرفته نمی شود . در این حالت مقدار قاعده border-width نیز برابر با صفر در نظر گرفته خواهد شد .
  • hidden : این مقدار موجب می شود هیچ حاشیه اي براي تگ در نظر گرفته نشود . اما ضخامت border که در قاعده border-width تعیین شده است در نظر گرفته خواهد شد .

 

  • border-top-width  : این قاعده ، اندازه پهناي حاشیه بالا را تعیین می کند و به دو شکل مقدار دهی می شود . یا با تعیین یکی از واحد هاي اندازه گیري همانند px,pt,em  و ... یا با قبول یکی از کلمات کلیدي thin , medium , thick.
  • border-top : این قاعده ، میانبري براي سه قاعده پیشین است و می توان به یکباره آن ها را با این قاعده مشخص نمود .براي هر چهار طرف یک تگ ، هر چهار قاعده فوق تعریف شده است که به منظور جلوگیري از تکرار از توضیح آنها خودداري می کنیم .سینتکس کاربرد این قاعده به صورت زیر است :
border-top: { [border-width] [border-style][border-color] | inherit } ;

 

  • border-color : این قاعده میانبر ، رنگ حاشیه هر چهار سمت تگ را به یکباره تعیین می کند و همان مقادیر قاعده border-top-color را می پذیرد .
  • border-style : این قاعده میانبر ، طرح حاشیه هر چهار سمت تگ را به یکباره کنترل می کند و همان مقادیر قاعده border-top-style را می پذیرد.
  • border-width : این قاعده میانبر ، اندازه پهناي حاشیه هر چهار سمت تگ را به یکباره تعیین می کند و همان مقادیر قاعده border-top-width را می پذیرد.
  • border : این قاعده میانبري براي هر سه قاعده border-width ، border-style و border-color است و با استفاده از آن می توان این سه قاعده را یکجا به چهار طرف عنصر اعمال نمود . نحوه استفاده از این قاعده به صورت زیر است :
border: { [border-width] [border-style][border-color] | inherit } ;

 

قبل از وارد شدن به بحث Outline ها ذکر این نکته ضروري است که  Outline ها نمی توانند به حاشیه اي خاص اعمال شوند. Outline ی که تعریف می شود به حاشیه هاي هر چهار سمت تگ اعمال خواهد شد.

  • outline-color : این قاعده ، رنگ Outline ي که به دور حاشیه کشیده می شود را تعیین می کند. 
  • outline-style : این قاعده طرح Outline ي را که به دور حاشیه کشیده می شود تعیین می کند و همان مقادیر قاعده border-top-style را می پذیرد .
  • outline-width : این قاعده اندازه پهناي Outline ي را که به دور حاشیه کشیده می شود تعیین می کند و همان مقادیر قاعده border-top-width را می پذیرد .
  • outline : این قاعده میانبري براي سه قاعده فوق است و می بایست به صورت زیر مقدار دهی شود :
Outline : { [outline-width] [outline-style][outline-color] | inherit } ;

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
مدل کاری چیست؟box model چیست؟آموزش مدل کاری cssآشنایی با box modelاشنایی با مدل کاری سی اس اسآشنایی با مدل کاری در cssاموزش box model در سی اس استبلیغات ارزان سایت آموزش برنامه نویسیتبلیغات مخصوص طراحان وب سایتتبلیغات در سایت برنامه نویسیتبلیغات اینترنتی برای برنامه نویساندر آغوش مینیمالیسممنوی همبرگر با سه خط افقی که روی یکدیگر قرار گرفته اند نشانه چیست؟ سوئیچ به یک ستون واحدتبدیل متن ساده به وبلاگ و سایت های پویا با React.jsکتابخانه sass برای استفاده آسان تر از آنکتابخانه سطح بالا برای اتوماتیک سازی اعمال مرورگر لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php