ВЛАСТИВІСТЬ CSS DISPLAY

The властивість відображення визначає поведінку відображення елемента (тип вікна відтворення). Він визначає спосіб візуалізації елемента в макеті, визначаючи його позиціонування та взаємодію в рамках потоку та структури документа.

Синтаксис:

display: value;>

Значення властивостей:

Значення опис

в лінію Він використовується для відображення елемента як вбудованого елемента.

блокувати Він використовується для відображення елемента як блокового елемента

вміст Використовується для зникнення контейнера.

flex Він використовується для відображення елемента як флекс-контейнера на рівні блоку.

сітка Він використовується для відображення елемента як контейнера сітки на рівні блоку.

inline-block Він використовується для відображення елемента як контейнера блоків вбудованого рівня.

inline-flex Він використовується для відображення елемента як гнучкого контейнера вбудованого рівня.

вбудована сітка Він використовується для відображення елемента як контейнера сітки вбудованого рівня.

inline-table Він використовується для відображення таблиці вбудованого рівня

список-пункт Він використовується для відображення всіх елементів
елемент.

обкатка Він використовується для відображення елемента на вбудованому або блочному рівні, залежно від контексту.

стіл

Він використовується для налаштування поведінки, як для всіх елементів. для всіх елементів.

таблиця-підпис	Він використовується для налаштування поведінки, як для всіх елементів.
таблиця-стовпець-група	Він використовується для налаштування поведінки, як для всіх елементів.
таблиця-заголовок-група	Він використовується для налаштування поведінки, як для всіх елементів.
table-footer-group	Він використовується для налаштування поведінки, як для всіх елементів.
таблиця-рядок-група	Він використовується для налаштування поведінки, як для всіх елементів.
таблиця-комірка	Він використовується для встановлення поведінки як	для всіх елементів.
таблиця-стовпчик	Він використовується для налаштування поведінки, як для всіх елементів.
таблиця-ряд	Він використовується для встановлення поведінки як
немає	Використовується для видалення елемента.
початковий	Він використовується для встановлення значення за умовчанням.
ви успадкуєте	Він використовується для успадкування власності від батьківських елементів.

приклад: У цьому прикладі використовуються 3 div, щоб продемонструвати властивість відображення CSS.

лямбда-вирази Java

HTML

    CSS Display propertytitle><style>#geeks1 {висота: 100px;  ширина: 200 пікселів;  фон: бірюзовий;  дисплей: блок;  } #geeks2 {висота: 100px;  ширина: 200 пікселів;  фон: блакитний;  дисплей: блок;  } #geeks3 {висота: 100px;  ширина: 200 пікселів;  фон: зелений;  дисплей: блок;  } .gfg { margin-left: 20px;  розмір шрифту: 42px;  font-weight: жирний;  колір: #009900;  } .geeks { font-size: 25px;  поле зліва: 30 пікселів;  } .main { margin: 50px;  вирівнювання тексту: центр;  } стиль> голова> <body> <div>techcodeview.comdiv><div>дисплей: блок; propertydiv><div> <div id='geeks1'>Блок 1div><div id='geeks2'>Блок 2div><div id='geeks3'>Блок 3div> div> body> html>></pre> </code> <h2><span>Приклади властивості відображення CSS</span></h2><h3>  <b>  <strong>1. Використання блоку дисплея</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ця властивість використовується як типова властивість div. Ця властивість розміщує div один за одним вертикально. Висоту та ширину div можна змінити за допомогою властивості block, якщо ширина не вказана, тоді div під властивістю block займе ширину контейнера.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>приклад:</strong>  </b>  <span>Використовуйте наведений CSS у прикладі вище.</span></p> <pre class='hljs'>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; }></pre><p dir='ltr'>  <b>  <strong>Вихід:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="відображення властивості блоку"><h3>  <b>  <strong>2. Використання Inline Display</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ця властивість є типовою властивістю тегів прив’язки. Це використовується для розміщення div у рядку, тобто горизонтально. Властивість inline display ігнорує висоту та ширину, встановлені користувачем.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>приклад:</strong>  </b>  <span>Використовуйте наведений CSS у прикладі вище.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/pandas-dataframe-merge">pd злиття</a>
</blockquote> <pre class='hljs'>#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; }></pre><p dir='ltr'>  <b>  <strong>Вихід:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="відобразити вихідні дані вбудованої властивості"></p> <h3>  <b>  <strong>3. Використання Display Inline-block</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ця функція використовує обидві властивості, згадані вище, block і inline. Отже, ця властивість вирівнює вбудований div, але різниця полягає в тому, що вона може редагувати висоту та ширину блоку. По суті, це вирівняє div як блочно, так і вбудовано.</span></p> <p dir='ltr'>  <b>  <strong>приклад:</strong>  </b>  <span>Використовуйте наведений CSS у прикладі вище.</span></p> <pre class='hljs'>#geeks1  {  background: teal;  display: inline-block; }  #geeks2 {  background: cyan;  display: inline-block;  }  #geeks3 {  background: green;  display: inline-block; }></pre><p dir='ltr'>  <b>  <strong>Вихід:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/an-array-strings-c">c масив рядків</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="відобразити вихідний приклад вбудованого блоку"></p> <h3>  <b>  <strong>4. Використання Display None:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ця властивість приховує div або контейнер, які використовують цю властивість. Використовуючи його на одному з div, це зробить роботу зрозумілою.</span></p> <p dir='ltr'>  <b>  <strong>приклад:</strong>  </b>  <span>Використовуйте наведений CSS у прикладі вище.</span></p> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Вихід:</strong>  </b>  <span>Не відображати властивості</span>  <b>  <strong>блок 2</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="не відображати жодної властивості"></p> <p dir='ltr'>  <b>  <strong>Підтримувані браузери:</strong>  </b>  </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-awt-tutorial">awt java</a>
</blockquote> <p dir='ltr'><span>Браузери, які підтримуються</span>  <b>  <strong>Властивість відображення</strong>  </b>  <span>перераховані нижче:</span></p> <ul><li value='1'> <span>Гугл хром</span> </li><li value='2'> <span>Край</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Опера</span> </li><li value='5'> <span>Сафарі</span> </li></ul>  <br>  <br></span></td></tr></tbody></table></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Категорія</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/max-flow/">Макс-Потік</a> </li><li> <a href="/c-tutorial/">C Підручник</a> </li><li> <a href="/blog/">Блог</a> </li><li> <a href="/maths/">Математика</a> </li><li> <a href="/interview-preparation/">Співбесіда-Підготовка</a> </li><li> <a href="/top-10-list-world/">Топ-10 Списку - Світ</a> </li><li> <a href="/python-numpy-matrix-function/">Матрична Функція Numpy Python</a> </li><li> <a href="/svn-tutorial/">Підручник Svn</a> </li><li> <a href="/python-exceptions/">Винятки Python</a> </li><li> <a href="/cpp-iterator/">Cpp-Ітератор</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Поточний Гк</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Поточний Гк</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/current-gk/"> <i class="fa fa-external-link"></i> Читати Далі</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Цікаві Статті</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/best-languages-gui">Найкращі мови для GUI</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/oracle-tutorial/">Підручник Oracle</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-iterate-list-java">Як ітерувати список у Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-full-form-mha">Що таке повна форма MHA?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/press-release-submission">Подання прес-релізу</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Популярні Пости</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/roman-number-1-100">римські цифри 1100</a>
</li><li><a href="/computer-network-types">мережі та типи</a>
</li><li><a href="/java-list">список в java</a>
</li><li><a href="/footnotes-markdown">виноски уцінки</a>
</li><li><a href="/ddl-commands-sql">Команди sql ddl</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Всі Права Захищені |  <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>

TechCodeview