前端课程——显示与隐藏

前端课程——显示与隐藏

显示与隐藏

display

display:none;

这种方式将元素设置隐藏后，该元素不会在占用空间。

设置为以下属性时，会取消display的隐藏。

• block 将元素设置为块级元素
• inline 将元素设置为内联元素
• inline-block 将元素设置为行内块级元素

visibility

visibility:hidden;

这种方式设置元素为隐藏后，该元素依旧占有页面空间

通过将visibility属性值设置为visible将元素显示

visibility.png

display.png

display属性

display不仅仅是作为显示与隐藏。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

内容溢出

盒子放不下时内容就会超出盒子。内容是文本内容、一张图片和其他元素，超出指定容器元素的范围 。如图

• 情况一（容器元素div内容是文本）

情况1

• 情况二（指定元素中的图片超出元素范围）

2.png

• 情况三（指定元素中子级元素超出范围）

3.png

解决方案：overflow

• visible：默认值。内容不会被修建，会显示在父级容器之外
• hidden:内容会被修剪，并且其余内容不可见。 隐藏的部分不会被看到
• scroll:内容会被修剪，浏览器会显示滚动条以便查看其余内容。 始终提示滚动条，效果不好
• auto：浏览器决定 如果内容溢出，提供相应的滚动条；没有溢出不做任何处理

overflow-x属性

水平方向上的溢出

• visible: 默认值。内容不会被修剪，会显示在父级容器之外。
• hidden:内容会被修剪，并且其余内容不可见。.
• scroll: 内容会被修剪，浏览器会显示滚动条以便查看其余内容。
• auto: 由浏览器决定，如果内容被修剪，就会显示滚动条。

overflow-y相似。

text-overflow

text-overflow属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号(…)或显示一个自定义字符串。该属性具有以下几个值:

• clip:将文本内容超出父级容器的部分隐藏。
• ellipsis:将文本内容超出父级容器的部分使用省略号(…)表示。.
• sting:将文本内容超出父级容器的部分使用指定文本内容表示，例如“.”等。

效果

设置此属性必须先设置overflow属性。无法单独使用。