• 技术文章 >Web开发 >css教程

    css overflow属性有什么用

    小妮浅浅小妮浅浅2021-09-15 09:34:21原创5633

    1、配合浮动父容器,解决父容器高度塌陷的问题。

    2、利用overflow扩展盒子高度,overflow属性可以触发浏览器重新计算父元素盒子高度。

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <style>

    #wrap2 {

    width: 55px;

    border: 3px solid red;

    overflow: hidden;

    }

      

      

    .class1 {

    width: 20px;

    height: 40px;

    background: blue;

    float: left;

    }

      

      

    .class2 {

    width: 20px;

    height: 30px;

    background: yellow;

    float: left;

    }

      

      

    .class3 {

    width: 20px;

    height: 30px;

    background: fuchsia;

    float: left;

    }

      

      

    .class4 {

    width: 20px;

    height: 20px;

    background: chartreuse;

    float: left;

    }

    </style>

    <title></title>

    </head>

    <body>

    <div id="wrap2">

    <div></div>

      

    <div></div>

      

    <div></div>

      

    <div></div>

      

    </div>

    </body>

    </html>

    以上就是css overflow属性的作用,希望对大家有所帮助更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css overflow
    上一篇:css中flex是什么 下一篇:css中z-index属性

    相关文章推荐

    • CSS超链接a标签的状态• CSS背景颜色的表示方法• css中有哪些类型的样式表• css module解决命名冲突• css global在类名的应用• CSS设计模式之ITCSS的介绍• css边距重叠是什么• css中a标签伪类如何使用• css中背景定位有哪些方法• css首行缩进text-indent的实现• css文本修饰text-decoration的使用• css文字间距的使用• css中flex是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网