css复习:Overfrow属性,100%，300%，很多个子元素在父元素中横行展开_css 父元素设置了margin 并且设置了overfloe-x:auto ,子元素还想横向全部显示-CSDN博客

本文链接：https://blog.csdn.net/qq_51813155/article/details/121193293

本文详细解读了CSS中的Overfrow属性，介绍了其在内容溢出处理中的作用，并讲解了100%宽度的应用，以及如何使用浮动让子元素水平排列。通过实例演示了如何使用`overflow`属性隐藏溢出内容和添加滚动条，以及如何利用百分比布局实现灵活的子元素布局。

摘要由CSDN通过智能技术生成

Overfrow属性

1.css中Overfrow属性是什么？

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

overflow 属性可设置以下值：
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条.

例子：轮播图实现：
在一盒子：放入了几张图片：使里面大于盒子，需要用：hidden溢出盒子外的不可见

没加overflow属性时：里面内容在盒子外也显示了
在这里插入图片描述

加overflow属性：overflow: hidden;
隐藏了盒子内元素溢出（外面）的内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<style>
div{

width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;  /*  这个属性可以隐藏*/
}


li{

width: 300px;
height: 300px;
background-color: purple;

}


</style>
<body>
    

<div>
<ul>
    <li></li>
<li></li>
<li></li>

</ul>



</div>








</body>
</html>

overflow:scroll;//加了滑动条

在这里插入图片描述

2.100%在css是什么？

我们可以看到元素的 width 和 height 是分别基于父元素 width 和 height 的，所以：
子元素设置：
width: 100%;
height: 50%;
以最近的父元素为标准：
子元素的宽度是父元素宽度的100%
子元素的高度是父元素高度的50%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>




<style>



    .one{



        width: 300px;
        height: 300px;
        background-color: pink;
    }


    .two{


        width: 100%;
        height: 50%;
        background-color: skyblue;
    }
</style>





<body>
    





<div class="one">

<div class="two"></div>




</div>







</body>
</html>

效果图：
在这里插入图片描述

如果设置：width：300%：
宽度就是父元素的宽度的300%，
这个可以应用于：轮播图

在这里插入图片描述

3.如何让很多个子元素在父元素中横行展开？

增大父元素的宽度
加float：left//左浮动，排列一起（或者设置右浮动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>




<style>



    .one{



        width: 300px;
        height: 300px;
        background-color: pink;
    }


    .two{


        width: 400px;
        height: 50%;
        background-color: skyblue;
    }



    li{
        float: left;
width: 300px;
height: 100%;
background-color: tomato;
    }
</style>





<body>
    





<div class="one">

<ul class="two">
<li></li>
<li></li>
<li></li>



</ul>




</div>







</body>
</html>