display, visibility, overflow 三者的作用与区别_htmk中visibility的作用

display, visibility, overflow 三者的作用与区别

display

html可以将元素分类方式分为行内元素、块元素和行内块元素三种，
使用display属性能够将三者任意转换

    none 隐藏对象  **隐藏之后，不再保留位置。**
    display:inline;转换为行内元素
    display:block;转换为块元素
    display:inline-block;转换为行内块元素
还有很多值，但不常用，如 table 等

1
2
3
4
5
6
7
8
9

行内块状特征

支持全部样式
可以设置宽高，如果不设置，行内块元素的宽高就是内容撑开的宽高
不会独占一行，与其他行内元素一行显示
默认排列方式为从左到右
代码换行，行内块元素之间会产生间距
元素隐藏

visibility

visibility：visible ; 对象可视

visibility：hidden; 对象隐藏

特点：隐藏之后，继续保留原有位置。

overflow

visible 默认值，溢出内容不会被修剪，会呈现在元素框之外

hidden 不显示溢出的内容

scroll 滚动条来显示元素内溢出的内容，即使没有溢出也显示滚动条

auto 自动地处理溢出，如果溢出则显示滚动条，如果没溢出，则正常显示

overflow: hidden 不显示溢出的内容
overflow: hidden 只隐藏溢出的部分，用于父元素
overflow: hidden 常用于文字溢出，文档流中的元素溢出

display:none 此元素不会被显示
display:none 会隐藏该元素全部，用于元素自己
display:none 常用于下拉框，脱离文档流的盒子，如京东导航下拉框

1
2
3
4
5
6
7
8