zoukankan      html  css  js  c++  java

  • 元素外边距溢出（塌陷）

    想要达到这样的效果：

    如果是实现这样的源代码：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="UTF-8">  
    5.         <title>demo</title>  
    6.         <style type="text/css">  
    7.             .big{  
    8.                 height:300px;  
    9.                 500px;  
    10.                 background:#EEEEEE;  
    11.             }  
    12.             .small{  
    13.                 height:100px;  
    14.                 100px;  
    15.                 background:red;  
    16.                 margin-top:50px;  
    17.             }  
    18.         </style>  
    19.     </head>  
    20.     <body>  
    21.         <div class="big">  
    22.             <div class="small">  
    23.                   
    24.             </div>  
    25.         </div>  
    26.     </body>  
    27. </html>  

    会出现这样的效果：


    加了margin设置导致了溢出问题。解决方式有两个：

    ①.给div加边框border；

    [html] view plain copy
     
    1. .big{  
    2.     height:300px;  
    3.     500px;  
    4.     background:#EEEEEE;  
    5.     border:1px solid black;  
    6. }  

    效果：

    ②.使用overflow:hidden;隐藏溢出

    [html] view plain copy
     
    1. .big{  
    2.     height:300px;  
    3.     500px;  
    4.     background:#EEEEEE;  
    5.     overflow:hidden;  
    6. }  

    效果：
  • 相关阅读:
    乌龟棋
    Cut the Sequence
    [NOI2001]炮兵阵地
    Fence
    环路运输
    查找并替换字符串 Find And Replace in String
    最大交换 Maximum Swap
    丑数问题 Ugly Number
    二叉树最大宽度 Maximum Width of Binary Tree
    距离为K的节点 All Nodes Distance K in Binary Tree
  • 原文地址：https://www.cnblogs.com/huancheng/p/8514989.html
Copyright © 2011-2022 走看看