CSS 中 display,visiblity及 overflow 的作用和区别

其他 2020-04-10 17:13:03 阅读次数: 0

感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53255.html

很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

  • display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
    display: none;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4KXrxtm-1586506151273)(http://p9.pstatp.com/large/pgc-image/209ea6f41f5b4dfb99acb5d78845cf81)]

  • display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>  
<span id="b">B</span>  
<span id="c">C</span>

CSS代码:

span{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
}  
#c{  
    background-color: blue;  
    display: block;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5TW77e85-1586506151278)(http://p9.pstatp.com/large/pgc-image/941431a177e54ddb91279eba6ae767ad)]

  • display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
    display: inline;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BfOiA4nb-1586506151282)(http://p1.pstatp.com/large/pgc-image/95996edf67b44d8fbebd9b6d483dc146)]

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

  • visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
    visibility: hidden;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6Snhl3w-1586506151285)(http://p3.pstatp.com/large/pgc-image/f3c506b89a884735b209059741f966e9)]

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

  • overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: visible;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skHLSBKL-1586506151287)(http://p1.pstatp.com/large/pgc-image/f13240ba9ac7465687d342b83c7a7996)]

  • overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: hidden;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yW17v6Ad-1586506151288)(http://p9.pstatp.com/large/pgc-image/1ad09a8ea5304cfb855431f8bd87f596)]

  • overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow:  scroll;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wiOZLZ5j-1586506151292)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

  • overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: auto;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9usgXNSH-1586506151293)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

总结:

  1. display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
  2. 使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
  3. 使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
  4. overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53255.html

很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

  • display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
    display: none;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjgjUH3p-1586506151579)(http://p9.pstatp.com/large/pgc-image/209ea6f41f5b4dfb99acb5d78845cf81)]

  • display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>  
<span id="b">B</span>  
<span id="c">C</span>

CSS代码:

span{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
}  
#c{  
    background-color: blue;  
    display: block;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lF3wPxb-1586506151582)(http://p9.pstatp.com/large/pgc-image/941431a177e54ddb91279eba6ae767ad)]

  • display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
    display: inline;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ep8bLeR-1586506151583)(http://p1.pstatp.com/large/pgc-image/95996edf67b44d8fbebd9b6d483dc146)]

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

  • visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
    visibility: hidden;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EnBCGCg-1586506151586)(http://p3.pstatp.com/large/pgc-image/f3c506b89a884735b209059741f966e9)]

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

  • overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: visible;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVGuuE7O-1586506151588)(http://p1.pstatp.com/large/pgc-image/f13240ba9ac7465687d342b83c7a7996)]

  • overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: hidden;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTlYAZVO-1586506151590)(http://p9.pstatp.com/large/pgc-image/1ad09a8ea5304cfb855431f8bd87f596)]

  • overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow:  scroll;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJAchpfw-1586506151592)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

  • overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: auto;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2FEJgYS-1586506151595)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

总结:

  1. display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
  2. 使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
  3. 使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
  4. overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53255.html

很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

  • display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
    display: none;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gds6hUVp-1586506151870)(http://p9.pstatp.com/large/pgc-image/209ea6f41f5b4dfb99acb5d78845cf81)]

  • display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>  
<span id="b">B</span>  
<span id="c">C</span>

CSS代码:

span{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
}  
#c{  
    background-color: blue;  
    display: block;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bKEYQFCI-1586506151871)(http://p9.pstatp.com/large/pgc-image/941431a177e54ddb91279eba6ae767ad)]

  • display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
    display: inline;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SvBKC6nj-1586506151873)(http://p1.pstatp.com/large/pgc-image/95996edf67b44d8fbebd9b6d483dc146)]

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

  • visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
    visibility: hidden;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DllKdTxB-1586506151875)(http://p3.pstatp.com/large/pgc-image/f3c506b89a884735b209059741f966e9)]

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

  • overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: visible;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEQcV4cK-1586506151877)(http://p1.pstatp.com/large/pgc-image/f13240ba9ac7465687d342b83c7a7996)]

  • overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: hidden;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E3ROeY0V-1586506151878)(http://p9.pstatp.com/large/pgc-image/1ad09a8ea5304cfb855431f8bd87f596)]

  • overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow:  scroll;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJBrUdGp-1586506151881)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

  • overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: auto;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctdFtMdD-1586506151882)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

总结:

  1. display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
  2. 使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
  3. 使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
  4. overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53255.html

很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

  • display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
    display: none;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DwN3sSZy-1586506152235)(http://p9.pstatp.com/large/pgc-image/209ea6f41f5b4dfb99acb5d78845cf81)]

  • display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>  
<span id="b">B</span>  
<span id="c">C</span>

CSS代码:

span{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
}  
#c{  
    background-color: blue;  
    display: block;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qR7RYKhe-1586506152237)(http://p9.pstatp.com/large/pgc-image/941431a177e54ddb91279eba6ae767ad)]

  • display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
    display: inline;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1EWIgOCl-1586506152238)(http://p1.pstatp.com/large/pgc-image/95996edf67b44d8fbebd9b6d483dc146)]

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

  • visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
    visibility: hidden;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M8jzeZbi-1586506152240)(http://p3.pstatp.com/large/pgc-image/f3c506b89a884735b209059741f966e9)]

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

  • overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: visible;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ghtyjgsn-1586506152243)(http://p1.pstatp.com/large/pgc-image/f13240ba9ac7465687d342b83c7a7996)]

  • overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: hidden;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eo39JqSF-1586506152245)(http://p9.pstatp.com/large/pgc-image/1ad09a8ea5304cfb855431f8bd87f596)]

  • overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow:  scroll;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qC8F9zMM-1586506152246)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

  • overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: auto;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYEtaPKM-1586506152247)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

总结:

  1. display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
  2. 使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
  3. 使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
  4. overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。感谢平台分享-http://bjbsair.com/2020-04-10/tech-info/53255.html

很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

  • display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
    display: none;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngtJ3OoK-1586506152562)(http://p9.pstatp.com/large/pgc-image/209ea6f41f5b4dfb99acb5d78845cf81)]

  • display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>  
<span id="b">B</span>  
<span id="c">C</span>

CSS代码:

span{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
      
    background-color: green;  
}  
#c{  
    background-color: blue;  
    display: block;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAvBPuJw-1586506152563)(http://p9.pstatp.com/large/pgc-image/941431a177e54ddb91279eba6ae767ad)]

  • display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
    display: inline;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLucKbQg-1586506152564)(http://p1.pstatp.com/large/pgc-image/95996edf67b44d8fbebd9b6d483dc146)]

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

  • visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>  
<div id="b">B</div>  
<div id="c">C</div>

CSS代码:

div{  
    width: 200px;  
    height: 100px;  
    font-size: 50px;  
    color: gray;  
}  
#a{  
    background-color: red;  
}  
#b{  
    background-color: green;  
    visibility: hidden;  
}  
#c{  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGogcMt8-1586506152566)(http://p3.pstatp.com/large/pgc-image/f3c506b89a884735b209059741f966e9)]

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

  • overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: visible;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRb6phOl-1586506152567)(http://p1.pstatp.com/large/pgc-image/f13240ba9ac7465687d342b83c7a7996)]

  • overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: hidden;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APUZsnCA-1586506152569)(http://p9.pstatp.com/large/pgc-image/1ad09a8ea5304cfb855431f8bd87f596)]

  • overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容 。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow:  scroll;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSoCBjbc-1586506152571)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

  • overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">  
    <div id="b"></div>  
</div>

CSS代码:

#a{  
    width: 300px;  
    height: 100px;  
    background-color: red;  
    overflow: auto;  
​  
}  
#b{  
    width: 200px;  
    height: 300px;  
    background-color: blue;  
}

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSrgWYdW-1586506152572)(http://p3.pstatp.com/large/pgc-image/5d93364824b3480296c5389946561e72)]

总结:

  1. display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
  2. 使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
  3. 使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
  4. overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。
HDX柿子
发布了0 篇原创文章 · 获赞 0 · 访问量 2430
私信 关注

猜你喜欢

转载自blog.csdn.net/zxjoke/article/details/105435955
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022