有关 overflow:hidden

最新推荐文章于 2022-06-04 19:11:15 发布

weixin_46032763

最新推荐文章于 2022-06-04 19:11:15 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/108098415

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: visible;
            /* overflow: hidden; */
            height: 50px;
            line-height: 50px;
            background-color: pink;
        }
        
        .box1 {
            height: 20px;
            background-color: skyblue;
        }
        
        .box2 {
            height: 200px;
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="">你好</a>
        <input type="text">
        <div class="box1"></div>
    </div>
    <!--   <div class="box2">

    </div> -->
</body>

</html>

在这里插入图片描述
以下把overflow:visible换成overflow:hidden显示结果：

如把overflow:visible，再加一个灰色盒子成以下代码，同样能把从粉色盒子里溢出的蓝色盒子遮盖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: visible;
            /* overflow: hidden; */
            height: 50px;
            line-height: 50px;
            background-color: pink;
        }
        
        .box1 {
            height: 20px;
            background-color: skyblue;
        }
        
        .box2 {
            height: 200px;
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="">你好</a>
        <input type="text">
        <div class="box1"></div>
    </div>
    <div class="box2">

    </div>
</body>

</html>

在这里插入图片描述
overflow:hiddden解决如下问题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            /* 块sk_con由给定行高撑开无需再清除浮动，为了不使大于nav.width的a.line-height影响到下边的盒子，包住a的li，包住li的ul，三者高度都是a从nav继承来的行高，而三者的高度大于了装他们三的nav从而越过nav下界，又越出部分的最外层ul有浮动所以nav下边的装文本元素里边的文字势必会围绕nav越过nav下界的部分，使nav下边盒子不受到影响的是给nav加：overflow
            hidden注：是给nav而不是sk_con加overflow:hidden; 因为sk_con.width本来就是48px,并不会切掉越过nav低端的部分*/
            /* 此种类似于下边盒子里的文本不去环绕上边浮动盒子办法就是给环绕浮动的盒子加overflow:hidden构造BFC，而此种相当于将BFC构建到了浮动的盒子上，加了BFC父亲独占一行，将环绕浮动的元素挤到下一行 */
            /* overflow: hidden; */
            height: 47px;
            border-bottom: 2px solid red;
        }
        
        .sk_con {
            /* overflow: hidden; */
            line-height: 48px;
            padding-right: 56px;
        }
        
        .sk_con ul {
            float: left;
        }
        
        .sk_con ul li {
            float: left;
        }
        
        .sk_con ul li a {
            /* float: left; */
            display: block;
            padding: 0 25px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="sk_con fr">
            <ul>
                <li>
                    <a href="#">女装 </a>
                </li>
                <li><a href="#">女鞋</a></li>
                <li><a href="#">男装 </a></li>
                <li><a href="#">男鞋 </a></li>
                <li><a href="#">母婴童装</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">智能数码</a></li>
                <li><a href="#"> 运动户外</a></li>
                <li><a href="#">更多分类 </a></li>
            </ul>
        </div>
    </div>
    <!-- nav下方的行内 行内块 块都会受影响本应该在最左边后转去围绕越狱的浮动部分 -->
    <div>哈哈</div>
    <input type="text" value="你好">
    <span>
     哈哈
 </span>
</body>

</html>

在这里插入图片描述

在nav写入overflow:hidden;结果如下：
在这里插入图片描述
以下来自up黑马程序员pink老师 web前端入门基础教程，最适合零基础小白前端的视频教程html5+css3 p345

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .w {
            margin: 0 auto;
        }
        
        .box {
            /* overflow:hidden清除浮动不让box1到box底部
            2.截掉第四个li和第八个li超出版心的margin-right */
            overflow: hidden;
            /* 290*4+15*4=1220box.width宽度小于1220px，一排就不能容下四个 upload/list_03.png*/
            width: 1220px;
            background-color: skyblue;
        }
        
        .box ul li {
            float: left;
            margin-right: 15px;
        }
        
        .box ul li a {
            width: 290px;
            height: 460px;
        }
        
        .box1 {
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box w">
        <ul>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
            <li><img src="upload/list_03.png" alt=""></li>
        </ul>
    </div>
    <div class="box1">

    </div>
</body>

</html>

以上代码结果如下：
在这里插入图片描述

weixin_46032763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关 overflow:hidden

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
复制链接

扫一扫