overflow-x和overflow之间的区别

Question

overflow-x: hidden和overflow:hidden;之间的区别是什么

我所知道的是overflow-x:隐藏；禁用水平滚动，但当我使用它时，它并不只在firefox上工作，所以我用overflow更改了它，它工作得很好。

Answer 1

overflow-x和overflow-y是相同的(水平和垂直)，但是：‘overflow-x’和‘overflow-y’的计算值与它们的指定值相同，除了一些与‘visible’的组合是不可能的:如果其中一个被指定为‘visible’，而另一个是‘scroll’或‘auto’，则‘visible’被设置为‘auto’。如果‘overflow-y’相同，‘overflow’的计算值等于‘overflow-x’的计算值；否则它是‘overflow-x’和‘overflow-y’的计算值对。

请访问以下网站：http://www.w3.org/TR/css3-box/#overflow-x

Answer 2

在CSS2.1中，只有overflow

此属性指定块容器元素的内容在溢出元素的框时是否被剪裁。它影响所有元素内容的裁剪，除了包含块是视口或元素祖先的任何后代元素(以及它们各自的内容和后代元素)。

然而，CSS basic box model引入了overflow-x and overflow-y，并将overflow重新定义为它们的简写：

这些属性指定当内容溢出元素的content area时是否对其进行剪切。它影响所有元素内容的裁剪，除了包含块是视口或元素祖先的任何后代元素(以及它们各自的内容和后代元素)。‘Overflow-x’决定左边缘和右边缘的裁剪，‘overflow-y’决定上边缘和下边缘的裁剪。

‘Overflow’是一种速记。如果它只有一个关键字，则将“overflow-x”和“overflow-y”都设置为该关键字；如果有两个，则将“overflow-x”设置为第一个关键字，并将“overflow-y”设置为第二个关键字。

Answer 3

• overflow: hidden;隐藏水平和垂直scrollbars.
• overflow-x: hidden;隐藏水平scrollbars.
• overflow-y: hidden;隐藏垂直滚动条。

确保将该属性设置为隐藏水平滚动条，如下所示：

body {
   overflow-x: hidden;
}