خاصیت display در زبان CSS

display

برای کنترل نمایش یک عنصر، display مهم ترین خصوصیت ممکن است. این خصوصیت تعیین کننده ی این است که آیا یک عنصر نمایش داده شود؟ و اگر نمایش داده می شود، چطور نمایش داده شود؟ هر عنصر HTML ای بر اساس ماهیت خود دارای مقدار پیش فرضی برای خاصیت display است که برای اکثر عناصر block یا inline است. اما این ها تنها مقادیر مجاز برای display نیستند، شما می توانید از مقادیری مثل none نیز استفاده کنید.

none (به معنی «هیچکدام») عنصر ما را محو و ظاهر می کند، بدون آنکه نیاز به ساختن دوباره ی آن داشته باشیم! در واقع اگر بخواهید با جاوا اسکریپت یکی از عناصر را حذف کنید، اضافه کردن خصوصیت none به آن عنصر، یکی از روش های مقبول است چرا که بعدا می توانید با تغییر display به مقادیری غیر از none ، آن را برگردانید:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا مشاهده می کنید که تگ h1 دارای display: none است بنابراین دیده نمی شود. با حذف کردن این خصوصیت می توانید آن را دوباره نمایش دهید.

شما می توانید این کار را با یک دستور دیگر نیز انجام دهید: ;visibility:hidden

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: تفاوت این دو دستور چیست؟

پاسخ: دستور display: none عنصر را طوری مخفی می کند که انگار اصلا در صفحه وجود ندارد، بنابراین هیچ فضایی را نیز اشغال نمی کند اما ;visibility:hidden تنها ظاهر عنصر را غیر قابل دیدن می کند. بنابراین آن عنصر هنوز هم فضا می گیرد. این مورد به خوبی در دو مثال بالا قابل مشاهده است.

با استفاده از کمی خلاقیت می توانیم صفحات زیبایی در دنیای وب خلق کنیم. به مثال زیر توجه کنید:

کدهای HTML:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sign-Up/Login Form</title>
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="form">
      
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
      
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up for Free</h1>
          
          <form action="/" method="post">
          
          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>
        
            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <button type="submit" class="button button-block"/>Get Started</button>
          
          </form>

        </div>
        
        <div id="login">   
          <h1>Welcome Back!</h1>
          
          <form action="/" method="post">
          
            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
          
          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
          
          <p class="forgot"><a href="#">Forgot Password?</a></p>
          
          <button class="button button-block"/>Log In</button>
          
          </form>

        </div>
        
      </div><!-- tab-content -->
      
</div> <!-- /form -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

کدهای CSS:

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

کدهای جاوا اسکریپت:

$('.form').find('input, textarea').on('keyup blur focus', function (e) {
  
  var $this = $(this),
      label = $this.prev('label');

	  if (e.type === 'keyup') {
			if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
    	if( $this.val() === '' ) {
    		label.removeClass('active highlight'); 
			} else {
		    label.removeClass('highlight');   
			}   
    } else if (e.type === 'focus') {
      
      if( $this.val() === '' ) {
    		label.removeClass('highlight'); 
			} 
      else if( $this.val() !== '' ) {
		    label.addClass('highlight');
			}
    }

});

$('.tab a').on('click', function (e) {
  
  e.preventDefault();
  
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
  
  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();
  
  $(target).fadeIn(600);
  
});

با ترکیب این سه دسته کد و استفاده از قابلیت display:none می توانیم یک فرم لاگین و ثبت نام به زیبایی تمام بسازیم. خروجی این سه دسته کد را در لینک زیر مشاهده کنید:

مشاهده ی نمونه فرم لاگین و ثبت نام کاربران

عناصر block

عناصری که از نوع block هستند تمام عرض صفحه یا نگه دارنده‌شان را می گیرند و به همین خاطر همیشه از خط جدید شروع می شوند. مثال:

<!DOCTYPE html>
<html>
  <style>
    #first {
      background-color: red;
    }
    
    #second {
      background-color: purple;
    }
  </style>
<body>

<div id="first">Hello</div> <div id='second'>World</div>

<p>The DIV element is a block element, and will start on a new line.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در زیر لیستی از عناصری که از نوع Block هستند مشاهده می کنید:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset><figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav><noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

عناصر inline

عناصر inline برخلاف عناصر block تنها فضای لازم خودشان را می گیرند و دیگر سر تا سر عرض صفحه را اشغال نمی کنند به همین خاطر در خط جدید شروع نمی شوند. مثال:

<!DOCTYPE html>
<html>
  
  <style>
    #first {
      background-color: red;
    }
    
    #second {
      background-color: purple;
    }
  </style>
  
<body>

<span id='first'>Hello</span>
<span id='second'>World</span>

<p>The SPAN element is an inline element, and will not start on a new line.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در لیست زیر عناصر inline را مشاهده می کنید:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i><img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select><small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

تغییر خاصیت display در عناصر مختلف

همانطور که قبلا هم گفتیم هر عنصر یک مقدار خاص برای خاصیت display دارد اما ما می توانیم این مقدار را تغییر دهیم. تبدیل کردن عناصر inline به عناصر block و بالعکس از جمله روش هایی است که برای نمایش یک صفحه ی وب به صورتی خاص یا بر اساس سلیقه مان کاربردی است. یکی از مثال های کاربردی این موضوع لیست ها (li) هستند:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>با تغییر چینش لیست ها میتوانیم به سادگی منو های امروزی را بسازیم</p>

<ul>
  <li><a href="https://www.roxo.ir/series/html-tutorials/" target="_blank">HTML</a></li>
  <li><a href="https://www.roxo.ir/series/css-tutorials/" target="_blank">CSS</a></li>
  <li><a href="https://www.roxo.ir/series/advanced-javascript/" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

با تغییر دادن تگ های li به حالت inline می توانیم منو های امروزی را بسازیم، البته منوی بالا کامل نمی باشد و نیاز به استایل دهی دارد.

نکته: تغییر دادن حالت Display عناصر تنها مشخص می کند که چگونه نمایش داده شوند و هیچ تاثیری در تعیین ماهیت آن عنصر ندارد بنابراین اگر یک عنصر inline داشته باشیم و سپس به آن خاصیت ;display: block را بدهیم، دیگر نمی تواند عناصر block دیگری را درون خود جای بدهد. در مثال زیر یک تگ span را می بینید که به دلیل داشتن خاصیت block باعث شکستن خط شده است:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>

</body>
</html>

مشاهده ی خروجی در JSBin

با تگ های <a> نیز چنین کاری کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<p>Display links as block elements:</p>

<a href="https://www.roxo.ir/series/html-tutorials/" target="_blank">HTML</a>
<a href="https://www.roxo.ir/series/css-tutorials/" target="_blank">CSS</a>
<a href="https://www.roxo.ir/series/advanced-javascript/" target="_blank">JavaScript</a>

</body>
</html>

مشاهده ی خروجی در JSBin

میبینید که دیگر عناصر <a> کنار یکدیگر نمی ایستند و حتما باید از خط جدید شروع شوند.