CSS面试：overflow 属性的常见值及其含义

overflow 属性的常见值及其含义

1. visible（默认值）：

   • 效果: 内容不会被裁剪，超出的内容将会渲染在元素框之外。
   • 使用场景: 当希望内容超出容器范围时依然可见。默认情况下，overflow 的值是 visible。

2. hidden：

   • 效果: 内容会被裁剪，超出的部分不可见，也不提供滚动条。
   • 使用场景: 用于需要限制内容显示在容器范围内的情况，但不希望用户滚动查看超出的部分。
   • 常见场景题：超出部分省略号显示

/*只适用于单行文本*/ 
div{ 
    width: 150px; 
    overflow: hidden; /*溢出隐藏*/ 
    white-space: nowrap; /*规定文本不进行换行*/ 
    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ 
}

1. scroll：

   • 效果: 无论内容是否超出容器的范围，浏览器都会提供滚动条。用户可以通过滚动条查看所有内容。
   • 使用场景: 适用于希望总是显示滚动条的情况，无论内容是否溢出。例如，确保界面一致性或用户体验的一致性。

2. auto：

   • 效果: 如果内容超出容器范围，浏览器会自动添加滚动条；否则不会显示滚动条。
   • 使用场景: 通常用于当内容可能溢出时自动添加滚动条，不溢出时保持界面简洁。

3. inherit：

   • 效果: 元素继承其父元素的 overflow 属性值。
   • 使用场景: 当希望子元素的溢出行为与父元素一致时使用。

结合 overflow-x 和 overflow-y

你可以分别控制水平和垂直方向的溢出行为：

• overflow-x：控制水平（x 轴）的溢出行为。
• overflow-y：控制垂直（y 轴）的溢出行为。