ویژگی width,height در css

با دستور width می توانیم عرض یک عنصر را مشخص نماییم.

بادستور height می توانیم ارتفاع یک عنصر را مشخص نماییم.

با دستور min-width می توانیم مشخص نماییم حداقل عرض صفحه چقدر باشد.

بادستور min-height می توانیم مشخص نماییم حداقل ارتفاع صفحه چقدر باشد.

در مثالی که می بینید هر چه متن بیشتر می شود اندازه عرض و ارتفاع بیشتر می شود.

مزیتی که min-height , min-width دارد این است که حداقل ها را لحاظ می کند.

بگذارید با یک مثال عملی و پروژه ای مزیت را بیان نمایم:

در بعضی صفحات متن کم و در بعضی صفحات متن زیاد می شود.

اگر برای صفحه حداقل ها لحاظ نشود اگر متن کم بود یا صفحه خالی بود قسمت پایین صفحه یا فوتر به قسمت منوی بالا می چسبد و نشان می دهد که طراح یک فرد آماتور بوده است.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
div {
width: 400px;
height: 200px;
border: 3px solid #31b0d5;
}
</style>
</head>
<body>
<div>
<h1>sh711.com</h1>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
div {
min-width: 400px;
min-height: 200px;
border: 3px solid #31b0d5;
}
</style>
</head>
<body>
<div>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
</div>
</body>
</html>

با دستور max-width می توان مشخص کرد حداکثر عرض صفحه چقدر باشد.

با دستور max-height می توان مشخص کرد حداکثر ارتفاع صفحه چقدر باشد.

همان مثال بالا را با max-height , max-width ببینید.

چون ما گفتیم حداکثر این اندازه باشد متن وقتی زیاد شد از کادر بیرون زد.

خواستم با این مثال به شما دو حالت max , min را توضیح دهم.

امیدوارم خوب متوجه شده باشید که هر کدام را در کجا استفاده نمایید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
div {
max-width: 400px;
max-height: 200px;
border: 3px solid #31b0d5;
}
</style>
</head>
<body>
<div>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
<h1>sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com sh711.com</h1>
</div>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css کد css
ثبت نظر