前端学习DAY31（子元素溢出父元素）

 

        .box1{width: 200px;height: 200px;background-color: chocolate;}

 

 

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从

        父元素中溢出，使用overflow属性设置父元素如何处理溢出的子元素

        可选值：visible  默认值，子元素会从父元素中溢出，在父元素外部的位置显示

        hidden 溢出的内容将会被裁剪不会显示

        scroll 生成两个滚动条，通过滚动条来查看完整的内容

        auto 根据需要生成滚动条（根据父元素设置横向或纵向滚动条）

       

        额外俩个属性（了解）

        overf-x   生成X轴的滚动条

overflow-X: scroll;

        .box1{width: 200px;white-space: nowrap;/*设置不换行*/height: 200px;background-color: chocolate;overflow-x: scroll;}

 

        overf-y  生成Y轴的滚动条(一般默认就有）

overflow-Y: scroll;

      hidden溢出的内容将会被裁剪不会显示

        .box1{width: 200px;height: 200px;background-color: chocolate;overflow: hidden;}

 

    scroll 生成两个滚动条

        .box1{width: 200px;height: 200px;background-color: chocolate;overflow: scroll;}

 

        .box1{width: 200px;height: 200px;background-color: chocolate;overflow: auto;}