zoukankan      html  css  js  c++  java
  • 第二十五节 overflow元素溢出

     1 <!-- CSS元素溢出:当子元素的尺寸超过父元素时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overfl属性来设置的。
     2      overflow的设置项:
     3          1、visible默认值:内容不会被修剪,会呈现在元素框之外
     4          2、hidden:内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动,margin-top塌陷的功能
     5          3、scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容,不管会不会溢出都会有滚动条显示。
     6          4、auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。
     7          5、inherit:规定应该从父元素继承overflow属性的值。 -->
     8 <!DOCTYPE html>
     9 <html lang="en">
    10 <style type="text/css">
    11     
    12     .box{
    13         width: 300px;
    14         height: 200px;
    15         border: 1px solid #000;
    16         background-color: gold;
    17         line-height: 30px;
    18         margin: 50px auto 0;  /* 这时候会产生元素溢出 */
    19         overflow: hidden;  /* 将多余的直接剪除 */
    20         overflow: scroll;  /* 将多余的内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 */
    21         overflow: auto
    22     }
    23 </style>
    24 <head>
    25     <meta charset="UTF-8">
    26     <title>Document</title>
    27 </head>
    28 <body>
    29     <div class="box">CSS元素溢出:当子元素的尺寸超过父元素时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overfl属性来设置的。
    30      overflow的设置项:
    31          1、visible默认值:内容不会被修剪,会呈现在元素框之外
    32          2、hidden:内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动,margin-top塌陷的功能
    33          3、scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。
    34          4、auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。
    35          5、inherit:规定应该从父元素继承overflow属性的值。</div>
    36 </body>
    37 </html>
  • 相关阅读:
    创建一个Flex工程
    WebORB手动配置要点
    热血三国地图增强版
    vs2008 sp1无法加载实体模型工具的解决办法
    Berkeley DB for .NET使用
    FluorineFx使用自定义VO(实现IExternalizable接口)
    PD生成数据表时出现“未能准备语句”
    替换AsWing的JTree组件中的图标
    参数传递
    c# 32位16位MD5加密
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12420671.html
Copyright © 2011-2022 走看看