cssطراحی سایت

جلسه ۳۹: استفاده از عناصر شناور در CSS

webسپتامبر 20, 2021
۰

در این درس ، ما یاد خواهیم گرفت که چگونه از عناصر شناور در CSS استفاده کنیم. شروع کنیم! موارد زیر را بیان خواهیم کرد

  • لیست ۱۰-۱۲: استفاده از عناصر شناور
  • لیست ۱۰-۱۳: اندازه جعبه صریح
  • لیست ۱۰-۱۴: آشفتگی شناور
  • لیست ۱۰-۱۵: جعبه های شناور

مرورگر عناصر یک صفحه HTML را با یک طرح روان ارائه می دهد. این بدان معنی است که عناصر درون خطی را از چپ به راست قرار می دهد و در صورت لزوم یک خط جدید را شروع می کند. عناصر بلوک از بالای پنجره به پایین ارائه می شوند. این ویژگی را می توانید با ویژگی float تغییر دهید. تنظیم مقدار آن به چپ یا راست ، عنصر بلوک مربوطه را به سمت چپ یا راست حرکت می دهد و محتوای بعدی به دور عنصر شناور می پیچد. لیست ۱۰-۱۲ یک صفحه وب ساده را نشان می دهد که شامل عناصر شناور نیست ، در تصویر زیر نمایش داده می شود.

لیست ۱۰-۱۲: استفاده از عناصر شناور

<!DOCTYPE html>
<html>
<head>
  <title>Using floating elements</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }
    .image {
      width: ۱۲۰px;
      height: ۹۰px;
      margin-left: ۸px;
      margin-bottom: ۸px;
      border: ۲px solid dimgray;
      background-color: lightgreen;
      /*float: right;*/
    }
    .sidebar {
      width: ۲۴۰px;
      margin-right: ۸px;
      margin-bottom: ۸px;
      border: ۲px solid dimgray;
      background-color: lightskyblue;
      padding: ۰ ۸px;
      /*float: left;*/
    }
    .sidebar h2 { margin: ۸px; }
  </style>
</head>
<body>
  <div class=”image”></div>
  <aside class=”sidebar”>
    <h2>Did you know?</h2>
    <p>
      HTML block elements can be set to float
      at the left or at the right edge of
      the page
    </p>
  </aside>
  <p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit fusce vel sapien elit in
    malesuada semper mi, id sollicitudin urna
    fermentum ut fusce varius nisl ac ipsum
    gravida vel pretium tellus tincidunt integer
    eu augue augue nunc elit dolor, luctus
    placerat scelerisque euismod, iaculis eu
    lacus nunc mi elit, vehicula ut laoreet ac,
    aliquam sit amet justo nunc tempor, metus vel.
  </p>
</body>
</html>

این صفحه شامل سه عنصر بلوک (<div> ، <aside> و <p>) است و توسط الگوریتم استاندارد ارائه آنها از بالا به پایین قرار می گیرند ، هر عنصر بلوک از سمت چپ شروع می شود. حال ، اگر خصوصیات شناور را در لیست کد از حالت کامنت خارج کنید ، طرح صفحه تغییر می کند. اولین جعبه خالی (<div>) به سمت راست حرکت می کند ، نوار کناری “آیا می دانید” (سمت دیگر) به سمت چپ حرکت می کند ، و پاراگراف "Lorem ipsum" مانند آنها در زیر نشان داده شده است:

توجه: می توانید شناور را با تنظیم ویژگی float روی none خاموش کنید. هنگامی که چندین عنصر شناور هستند ، موتور رندر با قرار دادن عناصر HTML به ترتیب در مارک ، عرض پنجره مرورگر را پر می کند. وقتی جایی برای عنصر بعدی نباشد ، یک خط جدید شروع می شود. به فهرست ۱۰-۱۳ نگاهی بیندازید ، این شامل شش عنصر شناور است ، سه عنصر به سمت چپ و سه عنصر به سمت راست منتقل شده اند.

لیست ۱۰-۱۳: اندازه جعبه explicit

<!DOCTYPE html>
<html>
<head>
  <title>Explicit box size</title>
  <style>
    .left, .right {
      margin: ۴px;
      background-color: lightgray;
      border: ۲px solid blue;
      width: ۸۰px;
      height: ۶۰px;
    }
    .left { float: left; }
    .right {
      float: right;
      border-radius: ۱۰px;
      height: ۷۰px;
    }
  </style>
</head>
<body>
  <div class=”left”></div>
  <div class=”left”></div>
  <div class=”right”></div>
  <div class=”right”></div>
  <div class=”left”></div>
  <div class=”right”></div>
</body>
</html>

تصویر زیر سه عکس snapshot مختلف از صفحه را نشان می دهد در حالی که کاربر پنجره مرورگر را تغییر اندازه می دهد. سعی کنید ردیابی کنید که موتور رندر چگونه هر یک از این عکسهای snapshot را نمایش می دهد!

توجه: عناصر درون خطی نمی توانند شناور شوند.

  بعضی اوقات ، شما به کنترل بیشتری در مورد نحوه قرارگیری عناصر شناور با سایر مطالب نیاز دارید. اگرچه محتوای عناصر غیر شناور در اطراف عناصر شناور ، حاشیه ها و رنگ پس زمینه قرار ندارد. آنها از عرض کامل عنصر حاوی آن استفاده می کنند. به عنوان مثال ، اگر عنصری <h1> را به لیست ۱۰-۱۲ اضافه کنید ، درست قبل از برچسب <p> ، ممکن است مانند شکل زیر نمایش داده شود:

این رفتاری نیست که انتظار دارید ، زیرا شما به مرز پشت عناصر شناور نیازی ندارید. ویژگی overflow برای کمک به شماست: آن را روی برچسب عنوان که نشان دهنده "Borders" است ، روی hidden تنظیم کنید و دقیقاً همان چیزی را می اتفاق می افتد که می خواهید ، همانطور که در زیر نشان داده شده است:

اگرچه پیچیدن به اطراف عناصر شناور از ویژگی های مفید مرورگر است ، اما شرایطی پیش می آید که بخواهید از آن برای عناصر خاص خلاص شوید. لیست ۱۰-۱۴ چنین وضعیتی را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
  <title>Using floating elements</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }
    .image {
      width: ۱۲۰px;
      height: ۹۰px;
      margin: ۸px;
      margin-top: ۰;
      border: ۲px solid dimgray;
      background-color: lightgreen;
      float: right;
    }
    .sidebar {
      width: ۲۴۰px;
      margin: ۸px;
      margin-top: ۰;
      border: ۲px solid dimgray;
      background-color: lightskyblue;
      padding: ۰ ۸px;
      float: left;
    }
      .sidebar h2 {
        margin: ۸px;
      }
    h1 {
      background-color: orangered;
      padding: ۸px;
      border-top: ۴px solid dimgray;
      border-bottom: ۴px solid dimgray;
    }
  </style>
</head>
<body>
  <div class=”image”></div>
  <aside class=”sidebar”>
    <h2>Did you know?</h2>
    <p>
      HTML block elements can be set to float
      at the left or at the right edge of
      the page
    </p>
  </aside>
  <h1>Borders…</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit fusce vel sapien elit in
    malesuada semper mi, id sollicitudin urna
    fermentum ut fusce varius nisl ac ipsum
    gravida vel pretium tellus tincidunt integer
    eu augue augue nunc elit dolor, luctus
    placerat scelerisque euismod, iaculis eu
    lacus nunc mi elit, vehicula ut laoreet ac,
    aliquam sit amet justo nunc tempor, metus vel.
  </p>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
  <title>Using floating elements</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }
    .image {
      width: ۱۲۰px;
      height: ۹۰px;
      margin: ۸px;
      margin-top: ۰;
      border: ۲px solid dimgray;
      background-color: lightgreen;
      float: right;
    }
    .sidebar {
      width: ۲۴۰px;
      margin: ۸px;
      margin-top: ۰;
      border: ۲px solid dimgray;
      background-color: lightskyblue;
      padding: ۰ ۸px;
      float: left;
    }
      .sidebar h2 {
        margin: ۸px;
      }
    h1 {
      background-color: orangered;
      padding: ۸px;
      border-top: ۴px solid dimgray;
      border-bottom: ۴px solid dimgray;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class=”image”></div>
  <aside class=”sidebar”>
    <h2>Did you know?</h2>
    <p>
      HTML block elements can be set to float
      at the left or at the right edge of
      the page
    </p>
  </aside>
  <h1>Borders…</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit fusce vel sapien elit in
    malesuada semper mi, id sollicitudin urna
    fermentum ut fusce varius nisl ac ipsum
    gravida vel pretium tellus tincidunt integer
    eu augue augue nunc elit dolor, luctus
    placerat scelerisque euismod, iaculis eu
    lacus nunc mi elit, vehicula ut laoreet ac,
    aliquam sit amet justo nunc tempor, metus vel.
  </p>
</body>
</html>
 

لیست ۱۰-۱۴: ظروف شناور

<!DOCTYPE html>
<html>
<head>
  <title>Floating mess</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }
    .image {
      width: ۱۲۰px;
      height: ۹۰px;
      margin-right: ۸px;
      margin-bottom: ۸px;
      border: ۲px solid dimgray;
      background-color: lightgreen;
      float: left;
    }
  </style>
</head>
<body>
  <div class=”image”></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit fusce vel sapien elit
  </p>
  <div class=”image”></div>
  <p>
    Gravida vel pretium tellus tincidunt integer
    eu augue augue nunc elit dolor, luctus
    placerat scelerisque euismod, iaculis eu.
  </p>
</body>
</html>

بخش <body> شامل دو قسمت محتوا است که هر قسمت از <div> با پاراگراف بعدی تشکیل شده است. برچسب <div> یک تصویر را نشان می دهد ، برچسب <p> شامل برخی متن های مربوط به تصویر کوچک است. برچسب ها <div> به گونه ای تنظیم می شوند که به سمت چپ شناور باشند تا متن توضیح در سمت راست تصویر کوچک ظاهر شود. با این حال ، آنچه در این صفحه نمایش داده می شود ، همانطور که در زیر نشان داده شده است ، در واقع آنچه انتظار دارید نیست. از آنجا که بسته بندی متن در اطراف تصویر کوچک اول کوتاه است ، تصویر کوچک دوم نیز تصویر کوچک اول را در بر می گیرد.

می توانید با استفاده از خاصیت پاک کردن به مرورگر دستور دهید تا دور هیچ عنصر شناوری نپیچد. این می تواند یکی از مقادیر چپ ، راست ، هر دو یا هیچ یک را تنظیم کند. از چپ برای پایین انداختن عناصری که به سمت چپ شناور هستند اما قصد دارند همچنان به اطراف اجسام شناور راست می پیچند ، استفاده کنید. وقتی این مقدار را به سمت راست تنظیم می کنید ، موتور رندر به زیر اجسام شناور راست می افتد اما همچنان به اجسام شناور چپ می پیچد. همانطور که انتظار دارید ، هر دو مقدار به زیر عناصر شناور چپ و شناور راست منتقل می شوند. شما می توانید پاکسازی را باnone خاموش کنید. این مقدار پیش فرض این ویژگی است. برای رفع مشکل با لیست ۱۰-۱۴ ، ویژگی پاک با مقدار چپ را به قانون .image اضافه کنید:

.image {
      width: 120px;
      height: 90px;
      margin-right: 8px;
      margin-bottom: 8px;
      border: 2px solid dimgray;
      background-color: lightgreen;
      float: left;
      clear: left;
    }

برای تنظیم اندازه عناصر شناور می توانید از درصد استفاده کنید ، اما گاهی اوقات ممکن است تعجب کنید. به لیست ۱۰-۱۵ نگاهی بیندازید که جعبه های شناور با عرض ۳۳٪ را تنظیم می کند ، بنابراین سه مورد از آنها می توانند در عرض پنجره مرورگر قرار بگیرند.

<!DOCTYPE html>
<html>
<head>
  <title>Floating mess</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }

 

    .image {
      width: ۱۲۰px;
      height: ۹۰px;
      margin-right: ۸px;
      margin-bottom: ۸px;
      border: ۲px solid dimgray;
      background-color: lightgreen;
      float: left;
      clear: left;
    }
  </style>
</head>
<body>
  <div class=”image”></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit fusce vel sapien elit
  </p>
  <div class=”image”></div>
  <p>
    Gravida vel pretium tellus tincidunt integer
    eu augue augue nunc elit dolor, luctus
    placerat scelerisque euismod, iaculis eu.
  </p>
</body>
</html>

لیست ۱۰-۱۵: جعبه های شناور

 
<!DOCTYPE html>
<html>
<head>
  <title>Floating boxes</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin: ۱۶px;
    }
    .box {
      width: ۳۳%;
      height: ۸۰px;
      float: left;
      border: ۲px solid lightgray
    }
    .red { background-color: red; }
    .green { background-color: green; }
    .blue { background-color: blue; }
  </style>
</head>
<body>
  <div class=”red box”></div>
  <div class=”green box”></div>
  <div class=”blue box”></div>
</body>
</html>

هنگام نمایش این صفحه ، سه جعبه را در یک ردیف مشاهده خواهید کرد. همانطور که در صفحه سمت چپ شکل ۱۰-۳۰ نشان داده شده است. با این حال ، هنگامی که حاشیه ای را به قانون .box اضافه می کنید (به عنوان مثال حاشیه: ۲px solid lightgray/>) ، فقط دو جعبه در ردیف اول قرار می گیرند ، همانطور که در صفحه سمت راست نشان داده شده است ، جعبه سوم به ردیف دوم می افتد.

این پدیده یک اشکال نیست. این روش مرورگر به طور پیش فرض کار می کند. همانطور که به یاد دارید ، هنگام تعیین درصد ، عرض محتوا از عرض عنصر بالاتر محاسبه می شود ، که در این حالت ، عرض پنجره مرورگر است. در حالی که هیچ حاشیه ای وجود ندارد ، سه جعبه در یک ردیف قرار می گیرند که عرض هر یک از آنها ۳۳٪ است. با این وجود ، با border هایی که عرض بیشتری به جعبه ها می افزایند ، فقط دو عدد در خط اول قرار می گیرند. می توانید به مرورگر دستور دهید از حالت اندازه گیری متفاوت استفاده کند. با ویژگی اندازه جعبه ، می توانید گزینه پیش فرض محتوا را تغییر دهید. مرورگر عرض محتوا را محاسبه می کند و سپس عرض border و padding را به جعبه حاشیه اضافه می کند که در هنگام محاسبه عرض ، border ها و padding ها نیز در نظر گرفته می شوند. بنابراین ، اگر اعلامیه ویژگی box-sizing: border-box را به قانون .box در لیست ۱۰-۱۵ اضافه کنید. این مسئله اندازه گیری را برطرف می کند ، و سه جعبه با border در یک ردیف قرار می گیرند. برای اطمینان از اینکه تنظیم اندازه جعبه در همه مرورگرها کار می کند ، باید سه اعلامیه مانند این را بنویسید:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

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

webسپتامبر 20, 2021
۰
تصویر web

web

نوشته های مشابه

جلسه ۵۴: چگونه گرادیان های خطی واقعاً کار می کنند در CSS

آگوست 19, 2021

جلسه ۴۷: ۵ نکته از فونت که باید بدانید در CSS

آگوست 18, 2021

جلسه ۳۸: عملی: اعمال Padding و Margin در CSS

آگوست 16, 2021

جلسه ۲۵: محاسبه انتخاب در CSS

آگوست 15, 2021

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا