CSS display与visibility

一、控制页面内容display
display显示类型包含none——不显示；block——转换为块级元素；inline——转换为行级元素；inline—block——转换为行级块元素。

首先需要清楚行级元素与块级元素的区别：
1.行级元素范围是文字部分，块级元素范围是整行
2.行级元素不能自动换行，块级元素可以
3.行级元素不能定义宽高，块级元素可以

1.none：不显示，隐藏宽高
2.block：转换为块级元素之后，就可自动换行，定义宽高
3.inline：转换为行级元素之后，则不可自动换行，定义宽高
4.inline—block：转换为行级块元素，同时具有行级元素不自动换行以及块级元素可定义宽高属性
5.行级元素
（1）常见标签：a、span、strong、font
（2）特点：行级元素可以显示在一行，在没有设置宽度的情况下，默认宽度为内部元素的宽度
6.块级元素
（1）常见标签：h1—h6、p、div、ul、li、ol
（2）特点：独立显示在一行，在没有设置宽度的情况下，默认宽度为父级宽度，并且可自定义块级元素宽度

二、是否显示属性visibility
1.结构：visibility：属性值
visible：定义元素可见
hidde：定义元素不可见
collapse：隐藏表格中的行和列
2.例：在一行文字中放入一个照片，看其显示隐藏属性的变化

<style>
    img{
        width: 210px;
        height: 150px；
  }
</style>

效果如图所示：

加入visibility: hidden;
效果如图所示：

我们可以看到定义图片元素为隐藏，这样页面在执行时将img元素设置为不可见。

三、区别display与visibility
使用display：none; 元素会消失，即元素实际上被页面中移走，它下面的元素会自动填充它原来的位置。
使用visibility: hidden; 元素虽然被隐藏了，但是它原来的位置还存在。
使用display：block; 容器中的所有元素会被当做一个单独的块，就如

一样。即设置 元素的diaplay:block，就可使其像

一样工作。
使用display:inline; 普通的块级元素

,也能如 一样的输出流形式