前端课程——显示与隐藏

显示与隐藏

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属性。无法单独使用。