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隐藏,保留所占空间
    }
}
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页