html display显示,CSS display显示

显示

CSS的display属性指定了HTML元素的显示方式，visibility属性指定一个元素应可见还是隐藏。

display属性常用值：

block：声明一个元素以块级元素显示，块级元素前后带有换行符。

inline：声明一个元素以内联元素显示，行级元素宽高属性不可用。

inline-block：具有行级元素的特点，但是宽高可以设置，比如标签。

flex：元素以弹性元素容器显示，CSS3新增属性。

none：元素不显示在文档流中，且不会占用原来的空间。

visibility属性值：

hidden：元素在浏览器渲染层隐藏，但元素依然会占用原来的空间。

visible：元素按正常的模式渲染。

元素隐藏

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。这两种方法会产生不同的结果。

这一行正常显示的标题

隐藏元素且不占用空间

这一行正常显示的标题

隐藏元素但占用空间

这一行正常显示的标题

块级元素

块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。 常见的块级元素：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr, ol , p , pre , table , ul , li。块级元素的display属性默认block，修改其默认值可以改变其原来的显示特性。

这一行正常显示的标题

这一行正常显示的标题

这一行正常显示的标题

内联元素

内联元素只需要必要的宽度(宽度由内容撑开)，不强制换行。常用的内联元素：a , code , em , i , img , input , label , q , select , small , span ,strong , sub , sup ,textarea , tt , u 。通过修改其display属性也能改变显示特性

这是一个span元素

这是一个span元素

这是一个span元素

注意：变更元素的显示类型先看该元素是如何显示，它是什么样的元素。