钓鱼网站的主要危害,百度竞价推广方案的制定,wordpress英文版修改栏,建设公司宣传网站在 CSS 中#xff0c;display 属性决定了元素的外观。它也是 HTML 代码呈现的关键部分#xff0c;因为它对布局有重大影响。
事实上#xff0c;要使用现代 Flexbox 和 Grid 模型#xff0c;您需要先使用 display 属性#xff0c;然后才能访问它们的各种属性和值。这就是为…在 CSS 中display 属性决定了元素的外观。它也是 HTML 代码呈现的关键部分因为它对布局有重大影响。
事实上要使用现代 Flexbox 和 Grid 模型您需要先使用 display 属性然后才能访问它们的各种属性和值。这就是为什么 display 属性在 CSS 中如此重要的原因之一。
让我们深入了解如何使用该display属性及其所有不同的值。
基本display属性语法
element {display: value;}
在 CSS 中显示属性值
CSS 中有内联和块级元素。两者之间的区别在于内联元素不会占用整个空间——也就是说它们不会从新行开始——但块元素会。
display 属性采用许多不同的值例如inline、inline-block、block、table等它们都会影响网页上元素的布局和呈现。此外要实现 flex 和 grid 布局您需要使用 display 属性。
您可以使用此显示属性将元素更改inline为 将元素更改为block将block元素更改为inlineblock等等。inlineinline-block display: inline
显示属性设置为的元素inline不会从新行开始它将占用剩余/可用的屏幕宽度。它只占用了这样一个元素通常会占用的空间。
因此您不能设置显示为 的元素的widthand 因为它不会占用整个屏幕宽度。heightinline
有些元素默认是内联的例如span, a, i, 和img.
divLorem ipsum dolor sit amet consectetur adipisicing elit.spanThis is an inline lement/span Modi eaque debitis eos quod laboremaiores delectus asperiores voluptatem voluptas soluta!
/div
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;}
div {max-width: 600px;}
span {background-color: #006100;} display: block
block将 display 属性设置为从新行开始并占用可用屏幕宽度的元素。
您可以为此类元素指定width和height属性。默认情况下处于块级的元素示例包括div、section、p等等。
您可以将span之前的 HTML 代码设置为block显示它的行为类似于块级元素。
span {display: block;background-color: #006100;} 你可以看到它span占据了整个宽度。那是因为它有一个显示属性设置为阻止。
display: inline-block
除了块和内联显示还有内联块。
您分配显示的元素inline-block是按演示内联的。但它还有一个额外的优势即您可以应用它width而height当元素被分配一个显示时您无法做到这一点inline。
因此您可以将inline-block显示视为一个包中的内联元素和块元素。 span {display: inline-block;background-color: #006100;width: 140px;height: 140px;} display: none
当您将元素的 display 属性设置为 时none该元素会完全脱离页面并且不会影响布局。
这也意味着像屏幕阅读器这样使盲人可以访问网站的设备将无法访问该元素。
不要display: none与visibility: hidden. 后者也隐藏了元素但留下了通常打开或空的空间。
span {display: none;background-color: #006100;width: 140px;height: 140px;} Visibility hidden 使 span 元素占用的空间保持打开状态如下所示 span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;} display: table
这些天你很少使用显示值table但知道它仍然很重要。它在过去更有用因为您会在浮动、Flex 和 Grid 出现之前将其用于布局。
将显示设置为table使元素表现得像一个表格。因此您可以制作 HTML 表格的副本而无需使用表格元素和相应的元素例如tr和td。
例如在 HTML 中您可以使用table元素创建一个表格也可以创建一个div或您选择的任何容器。
您使用 HTMLtable元素制作一个表格如下所示
tabletrtdFruits/tdtdLemurs/tdtdPets/td/trtrtdCashew/tdtdHua hua/tdtdDog/td/trtrtdApple/tdtdDiadem Sifaka/tdtdCat/td/trtrtdMango/tdtdRig-tailed/tdtdChicken/td/tr
/table
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}div {max-width: 600px;
}span {display: inline-block;background-color: #006100;width: 140px;height: 140px;
}tr,
td {padding: 10px;
}
上面的 HTML 和 CSS 代码片段的结果如下所示 div但是您可以通过将相应的显示设置为 、 和 来制作与元素table相同table-row的表格table-cell。您将获得与如下所示相同的结果 div classtablediv classrowdiv classcellFruits/divdiv classcellLemurs/divdiv classcellPets/div/divdiv classrowdiv classcellCashew/divdiv classcellHua hua/divdiv classcellDog/div/divdiv classrowdiv classcellApple/divdiv classcellDiadem Sifaka/divdiv classcellCat/div/divdiv classrowdiv classcellMango/divdiv classcellRing-tailed/divdiv classcellChicken/div/div
/div
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}div {max-width: 600px;
}span {display: inline-block;background-color: #006100;width: 140px;height: 140px;
}.table {display: table;
}.row {display: table-row;
}.cell {display: table-cell;
}.row,
.cell {padding: 10px;
}
你仍然得到你的桌子 显示属性的其他值
除了inline, block,none和table, 非常重要因为它们会显着影响网页的外观还有其他display值得您注意的属性值。
其中一些你会一直使用却没有真正意识到它们也是显示属性的一部分。还有一些你根本不会经常使用的。
现在让我们来看看其中的一些。
display: flex
显示flex使您可以访问 Flex 布局系统它简化了我们设计和布局网页的方式。
div classcontainerdiv classchildLorem ipsum dolor sit amet consectetur adipisicing elit.spanThis is an inline element/span Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!/divdiv classchildLorem ipsum dolor sit amet consectetur adipisicing elit.spanThis is an inline element/span Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!/div
/div
.container {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;
}.child {border: 2px solid crimson;margin: 4px;
} display: grid
显示集grid允许您使用网格系统构建布局这就像 flex 的高级形式。
div classcontainerdiv classchildLorem ipsum dolor sit amet consectetur adipisicing elit.spanThis is an inline element/span Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!/divdiv classchildLorem ipsum dolor sit amet consectetur adipisicing elit.spanThis is an inline element/span Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!/div
/div
.container {display: grid;place-items: center;height: 100vh;font-size: 2rem;}span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;
}.child {border: 2px solid crimson;margin: 4px;
} display: inherit
这使得元素继承其父元素的显示属性。因此如果您span在 div 中有一个标签并且您给 span 标签显示inherit它会将其从内联元素变为块元素。
divLorem ipsum dolor sit amet consecteturspanInline element/span adipisicing elit. Cumque cupiditate harumconsectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
/div
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {display: inherit;background-color: crimson;
} display: initial
这会将元素的显示属性设置为其默认值。因此如果您将 span 的 display 属性设置为 initial它仍然是内联的如果您为 div 设置相同的值它仍然是块状的。
divLorem ipsum dolor sit amet consecteturspanInline element/span adipisicing elit. Cumque cupiditate harumconsectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
/div
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {display: initial;background-color: crimson;
} 结论
很好地掌握 display 属性将有助于您的页面布局看起来很棒。它还使您可以在使用 CSS 时更好地控制呈现元素的方式。
您也可以继续返回本文以供参考因为 display 属性一开始总是令人困惑直到您使用它足以完全理解它。
我希望本文为您提供了充分利用 display 属性所需的背景知识。
感谢您阅读并继续编码。
