display属性的知识点+实例解读
2016-05-15 本文已影响190人
犯迷糊的小羊
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属性：
参考资料：
