Layout CSS - attribute display

display attsibiya na display ita ce mafi mahimmancinattsibiya na CSS don kwarewa kowane layi.

attsibiya na display

display attsibiya na bayanin wani abin da ke cikin hanyar nuni.

kowane HTML na yau na da wuri na zuriyar display, wanda ya kai ga kowane nau'war abin da yake. Babban wuri na zuriyar display na kowane abin da yake shine block tai inline.

fita na hanyar nuni

panels naɗi wani <div> tsohonin, wanda yana iya zama yake a hanyar nuni. (display: none）

它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block）

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

这个
元素属于块级元素。

块级元素的一些例子：

  • -

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内 元素.

行内元素的一些例子：

Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

daidai yadda,<script> koyi za a iya gudanar da display: none;.

kawar da yadda daidai na Display

sannan, kowane koyi za a iya gudanar da yadda daidai yana da iyali. Amma, a haka, za a iya kawar da ita.

sabunta koyi na gudanar da yadda yana da iyali zuwa koyi na gudanar da yadda, kuma kuma, zai fiyanci don samar da waje a yadda zai aiki kuma zai riƙe da tsarin Web.

matakin da yana da mahari don samar da manu gudanarwa: <li> koyi:

mahari

li {
  display: inline;
{}

پر کردن تمرین

kaiko:sabunta yarba a cikin koyin display zai saukar da ne:yadda koyin za a iya gudanar dakuma ba za a saukar da iyali na koyin. Idan a kai saukar da iyali na koyin, daidai daidai yana da iyali: display: block; koyi na gudanar da yadda yana da iyali ba za a iya koyar da koyi na gudanar da iyali a cikin.

tsohonin za a iya gudanar da <span> koyan a matsayin koyi:

mahari

span {
  display: block;
{}

پر کردن تمرین

tsohonin za a iya gudanar da <a> koyan a matsayin koyi:

mahari

a {
  display: block;
{}

پر کردن تمرین

gudanar koyan - display:none ko visibility:hidden?

display:none

visibility:hidden

Reset

ta amfani da display yarba a cikin none za a iya gudanar da koyan. Koyan za a gudanar da yadda, kuma waje za a gudanar da yadda yana cikin:

mahari

h1.gizli {
  display: none;
{}

پر کردن تمرین

visibility:hidden; za a iya gudanar da koyan.

amma, koyan yana za farin da yana zama yadda da yana zama. Koyan za a gudanar da yadda, amma yana fiyanci da yadda:

mahari

h1.gizli {
  visibility: hidden;
{}

پر کردن تمرین

مثال‌های بیشتر

تفاوت بین display: none; و visibility: hidden;
این مثال نشان می‌دهد که display: none; VS visibility: hidden; چه تفاوتی دارد.
استفاده ترکیبی از CSS و JavaScript برای نمایش محتوا
این مثال نشان می‌دهد که چگونه می‌توان از CSS و JavaScript برای نمایش عنصر در کلیک استفاده کرد.

ویژگی نمایش/دیدار CSS

ویژگی توضیح
display تعیین اینکه عنصر چگونه نمایش داده شود.
visibility تعیین اینکه آیا عنصر باید قابل مشاهده باشد یا خیر.