css中元素显示

CSS中的元素显示可以通过属性值来控制，常用的属性值有block、inline、inline-block和none。

1. block：块级元素在页面中会独占一行，宽度默认是父元素的100%，可以设置宽度和高度。常见的块级元素有div、p、h1-h6等。示例代码如下：

<div style="width: 200px; height: 100px; background-color: red;"></div>
<p style="width: 300px; height: 50px; background-color: blue;"></p>
<h1 style="width: 400px; height: 80px; background-color: green;"></h1>

2. inline：内联元素不会独占一行，宽度默认是内容的宽度，高度默认是内容的高度，无法设置宽度和高度。常见的内联元素有span、a、strong等。示例代码如下：

<span style="background-color: yellow;">这是一个内联元素</span>
<a href="#" style="background-color: pink;">这是一个链接</a>
<strong style="background-color: orange;">这是一个加粗文本</strong>

3. inline-block：内联块级元素不会独占一行，宽度和高度可以设置。常见的内联块级元素有img、input、button等。示例代码如下：

<img src="image.jpg" style="width: 200px; height: 100px;">
<input type="text" style="width: 300px; height: 50px;">
<button style="width: 100px; height: 30px;">点击按钮</button>

4. none：设置为none时，元素将不会显示在页面上，相当于元素被隐藏了。示例代码如下：

<div style="display: none;">这个元素被隐藏了</div>

需要注意的是，display属性还有其他值，如table、flex等，用于实现特定的布局效果。元素的显示还受到其他CSS属性的影响，如position、float等，这些属性可以进一步控制元素在页面中的布局和显示效果。