css布局溢出 overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值:

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染(内容仍然会显示,但是会在边框外显示) 

  • hidden - 溢出被剪裁,其余内容将不可见

    溢出部分会被裁剪掉,看不到。

  • scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
      在规定的边框范围内滚轮显示全部内容
  • auto - 与 scroll 类似,但仅在必要时添加滚动条

    不如,若加一个垂直滚定条能解决的,就不会添加水平滚动条。

注释:overflow 属性仅适用于具有指定高度的块元素。

      • overflow-x 指定如何处理内容的左/右边缘。
        overflow-x:hidden;  //隐藏水平滚动栏
        overflow-y:scroll;    //添加垂直滚动条
         
  • overflow-y 指定如何处理内容的上/下边缘。
    overflow-x失效的问题,
    解决办法:在目标div外再套一层div即可。需要注意的操作如下:
    1、目标div即子div,设置的overflow-y属性会管用。

    2、父div,设置的overflow-x属性会管用。

    3、子div的宽度要大于父div才会使得overflow-x属性管用(important)。
    原文链接:https://blog.csdn.net/u013513178/article/details/87602218
posted @ 2022-09-26 18:45  孙凯a  阅读(87)  评论(0编辑  收藏  举报