| стіл | Він використовується для налаштування поведінки, як для всіх елементів. для всіх елементів.| таблиця-підпис | Він використовується для налаштування поведінки, як для всіх елементів. |
|---|
| таблиця-стовпець-група | Він використовується для налаштування поведінки, як для всіх елементів. |
|---|
| таблиця-заголовок-група | Він використовується для налаштування поведінки, як для всіх елементів. |
|---|
| 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> <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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/chemical-compounds/">Хімічні Сполуки</a> </li><li> <a href="/java-jdbc/">Java Jdbc</a> </li><li> <a href="/python-numpy-random/">Python Numpy-Random</a> </li><li> <a href="/dbms-normalization/">Субд-Нормалізація</a> </li><li> <a href="/c-string/">Рядок C#</a> </li><li> <a href="/gblog/">Gblog</a> </li><li> <a href="/hadoop-tutorial/">Підручник Hadoop</a> </li><li> <a href="/shell-script/">Сценарій Оболонки</a> </li><li> <a href="/graphic-designing/">Графічний Дизайн</a> </li><li> <a href="/android-tutorial/">Підручник Для Android</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<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="/history-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="/scroll-lock-excel-how-turn-off">Scroll Lock в Excel – як увімкнути/вимкнути (увімкнути/вимкнути)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-isaac-newton-inventions-revolutionary-discoveries">10 найкращих винаходів і революційних відкриттів Ісаака Ньютона</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-win32-process">Процес Python Win32</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/abiotic-components">Абіотичні компоненти</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/inequalities">Нерівності</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="/java-string-compare">порівняльний рядок у java</a>
</li><li><a href="/css-selector">що таке селектори в css</a>
</li><li><a href="/what-is-full-form-xd">що це означає xd</a>
</li><li><a href="/when-was-first-computer-invented">коли був винайдений перший комп'ютер</a>
</li><li><a href="/java-convert-int-double">подвійне ціле число java</a>
</li><li><a href="/booths-multiplication-algorithm">алгоритм будки</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="//ro.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>
|
|---|
