display的属性和visibility的对比

display的属性和visibility的对比

display的属性可以有block, inline, none.

display的block属性

block属性表示标签会占用整行，相邻两个block标签会自动换行。使用block的标签有
- div
- h1 - h6
- p
- form
- header
- footer
- section

display的inline属性

inline属性不会单独占用整行，而且只会使用必须的宽度。使用inline的标签有
- span
- a
- img

display的none属性

display的none属性常用在和js合用隐藏标签内容，或展现标签内容，页面不用重新创建标签。一般script标签默认使用的display=none属性

display=none和visibility=hidden的对比

display=none不用占用标签位置，而visibility=hidden会留有标签位置。

使用函数控制隐藏元素

function hide(e, reflow) {
    if (reflow) {
        e.style.display = "none";　　　// 将e隐藏，所占控件也隐藏
    } else {
        e.style.visibility = "hidden"; // 将e隐藏，保留所占空间
    }
}