前端课程——显示与隐藏

显示与隐藏

display

1
display:none;

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

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

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

visibility

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