zoukankan      html  css  js  c++  java
  • overflow:hidden用法

    1、当父元素设置了height值时,则设置overflow:hidden后,子元素超出父元素部分隐藏

    2、当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。

    作用1示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #div1{
    500px;
    border: 1px solid red;
    height: 50px;
    overflow: hidden;
    }
    #div2{
    100px;
    height: 100px;
    border:1px solid blue;
    float: left;
    }
    </style>
    </head>
    <body>
    <div id="div1">
    <div id="div2"></div>
    </div>
    </body>
    </html>

    作用2示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #div1{
    500px;
    border: 1px solid red;
    overflow: hidden;
    }
    #div2{
    100px;
    height: 100px;
    border:1px solid blue;
    float: left;
    }
    </style>
    </head>
    <body>
    <div id="div1">
    <div id="div2"></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    ranorex
    vue.js
    逻辑思维
    laravel-luntan
    python学习--基础
    git
    Laravel-高级篇-Auth-数据迁移-数据填充
    Laravel-高级篇-Artisan
    Laravel-表单篇-零散信息
    Laravel-表单篇-controller
  • 原文地址:https://www.cnblogs.com/jayfeng/p/12149208.html
Copyright © 2011-2022 走看看