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

很多人在使用 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;}

效果如下:

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

文章插图

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;}

效果如下:

文章插图

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;}

效果如下:

文章插图

Visibilityvisibility 属性用来设置或检索是否显示对象。与 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;}

效果如下:

文章插图

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

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;}

效果如下:

文章插图

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;}

效果如下:

文章插图

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;}

效果如下:

文章插图

overflow: auto

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

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

推荐阅读

『进展』江苏路延长线项目建设进展快了！预计5月1日通车

「家乡体育」造美版C罗不是梦，中超却乱象升级，美国足球人才输出高居拉美第5

红茶怎么能泡几次,女人喝金骏眉红茶好吗

北青网综合|恶劣！四川崇州一面包车倒车撞伤11人，司机仅持三轮车牌照

怎么样通过一年的训练击败一个服役两年的士兵

9月12日是什么星座

亭长是什么官职亭长是什么官

喜爱|女相上官婉儿被黥面，却毫不抗拒，为何更得女皇喜爱？

同花顺财经|双良节能入局大硅片产业

英国政府|强烈要求停止与中关系后，英媒威胁：若英国不珍惜，自然有人补位

河北省衡水市枣强县委书记田理明接受纪律审查和监察调查

新机发布iPhone 12 发布日期、售价曝光：买高配得等等

崇祯失败的根本原因?崇祯是不是无能

手工制作孔明灯的方法怎么做手工孔明灯

衣服跑棉怎么处理！衣服跑棉怎么办，面包服跑棉恢复小窍门

牛奶和芋头能一起吃吗

平板电脑平板怎么记录备忘事情？

幼犬适合什么样的牵引绳?如何正确的给狗狗戴上牵引绳

虎牙如何直播和平精英，和平精英视频解说攻略

面霜|宝宝面霜怎么选才不伤脸？5款“零差评”宝宝面霜，安全、保湿