display属性的知识点+实例解读

display属性在前端中大致分为html dom display属性和css display属性。本文主要讲解css display属性，对于html dom display属性会略加提点。

---

• display属性规定元素生成的显示框类型，常用于页面布局，比较常见的属性值包括none、block、inline和inline-block

关于block、inline和inline-block的知识点，详见teren君的技博：管窥——块级元素与行内元素

• display:none在css中规定隐藏元素并不为其保留物理空间

关于display:none、visibility:hidden和opacity:0的知识点，详见teren的技博：实现html隐藏效果的三剑客

• display:block规定元素以块级元素形式显示，可以设置宽高，但排斥其他元素与其同行
• display:inline规定元素以行内元素形式显示，无法设置宽高，可与其他行内元素同行
• display:inline-height规定元素以可设置宽高的行内元素显示
  具体演示效果如下：

---

• html dom display属性通常用于html和js的互动，如在js定义移除元素的函数，具体代码及演示效果如下：

---

• 常见的display属性：

---

参考资料：

• HTML DOM display 属性
• CSS display 属性
• 详解css中的display属性
• DIV CSS display (block none inline)属性的用法教程