cjh CSS布局 2022-09-26 此文章访问量 2269

CSS 布局 - display 属性（默认值为inline）

CSS 布局 - display 属性

display 属性是用于控制布局的最重要的 CSS 属性。
display 属性
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

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

图片.png

块级元素的一些例子：
    <div>
    <h1> - <h6>
    <p>
    <form>
    <header>
    <footer>
    <section>

行内元素（inline element）
内联元素不从新行开始，仅占用所需的宽度。
这是段落中的图片.png

行内元素的一些例子：
    <span>
    <a>
    <img>
Display: none;
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script> 元素使用 display: none;。
覆盖默认的 Display 值
如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：
实例
li {
display: inline;
}

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。
因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。
下例将 <span> 元素显示为块元素：
实例
span {
display: block;
}

下例将 <a> 元素显示为块元素：
实例
a {
display: block;
}

隐藏元素 - display:none 还是 visibility:hidden？

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
实例
h1.hidden {
display: none;
}

visibility:hidden; 也可以隐藏元素。
但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：
实例
h1.hidden {
visibility: hidden;
}

display:none 与 visiblity: hidden 的区别

visibility:hidden 隐藏元素，但仍占据布局中的空间。

display:none 从文档中删除元素。它不会占据任何空间。

图片.png

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
float: left;
text-align: center;
width: 185px;
border: 1px solid gray;
margin: 4px;
padding: 6px;
}

button {
width: 100%;
}
</style>
</head>
<body>

<h1>display:none 与 visiblity: hidden 的区别</h1>
<p><b>visibility:hidden</b> 隐藏元素，但仍占据布局中的空间。</p>
<p><b>display:none</b> 从文档中删除元素。它不会占据任何空间。</p>

<div class="imgbox" id="imgbox1">Box 1<br>
<img src="/i/css/imgbox-1.gif" alt="Box 1" style="width:100%">
<button onclick="removeElement()">删除</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
<img src="/i/css/imgbox-2.gif" alt="Box 2" style="width:100%">
<button onclick="changeVisibility()">隐藏</button>
</div>

<div class="imgbox">Box 3<br>
<img src="/i/css/imgbox-3.gif" alt="Box 3" style="width:100%">
<button onclick="resetElement()">重置所有</button>
</div>

<script>
function removeElement() {
document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
document.getElementById("imgbox1").style.display = "block";
document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>

图片.png

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
<p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
<p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
<p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
<p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>

CSS display 属性（默认值为inline）
实例
使段落生出行内框：
p.inline
{
display:inline;
}

CSS display定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

行内、块状元素区别
http://www.zh-cjh.com/kaifabiancheng/3111.html
比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；块级元素的display属性默认为block。
而span元素的默认display属性值为“inline”，称为“行内”元素。行内元素的isplay属性默认为inline。

1、本站资源长期持续更新。
2、本资源基本为原创，部分来源其他付费资源平台或互联网收集，如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境，请不要在生产环境中随意模仿，以免带来灾难性后果。

转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS 布局 - display 属性（默认值为inline）

作者： cjh

手机扫一扫，手机上查看此文章：

作者： cjh

相关推荐

一切源于价值！

未雨绸缪、居安思危！ 数据安全、有备无患！ 注意操作、数据无价！ 一切源于价值！

未雨绸缪、居安思危！

数据安全、有备无患！

注意操作、数据无价！

一切源于价值！