前言

区别块级元素与行内元素区别和相互怎么转换，还有隐藏元素时用到的三个不同属性的区分，各自有什么不同

提示：以下是本篇文章正文内容

一、块级元素与行内元素

1、块级元素与行内元素的区别

块级元素：独占一行空间，设置宽高有效（注：不能将块级元素嵌套在行内元素中）

行内元素：与其他元素共享一行宽高，一般嵌套在块级元素中，设置宽高无效。

通过设置display时块级与行内转换

display:block 块级显示，宽高有效，
display:inline 行内显示，宽高无效，
display:inline-block 块级显示，宽高无效
可以通过设置display,使块级元素行内元素相互转换，如果行内元素想要以块级显示，可设置成display:inline-block

二、opacity、visibility、display：none

1.opacity：0 不透明度

不透明的，将元素设置为透明度为0.1-1都是可以看见的，逐渐加深，
当不透明度为0时即就是透明了，感觉没有了，隐藏起来了，但元素仍然存在，不改变页面布局，如果绑定了事件，仍然会触发绑定事件

2.visibility=hidden 元素不可见

隐藏，不改变页面布局，如果绑定了事件，不会触发绑定事件

3.display:none 显示

none 隐藏，会改变页面布局，如果绑定了事件，不会触发绑定事件

总结

块级元素与行内元素都比较好区分，但是相互转换的话，会很容易搞混自己。隐藏这三个，用的比较多，比较常见，各有不同。

最后

以上就是平常棉花糖为你收集整理的区别块级和行内，以及opacity\visibility\display:none前言一、块级元素与行内元素二、opacity、visibility、display：none总结的全部内容，希望文章能够帮你解决区别块级和行内，以及opacity\visibility\display:none前言一、块级元素与行内元素二、opacity、visibility、display：none总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。