zoukankan      html  css  js  c++  java
  • CSS基础(二十二)--OverFlow隐藏

    随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML。

    #------------------------------------------------我是可耻的分割线-------------------------------------------

    Overflow属性意思是超过我的范围隐藏,我们写一个div标签在里面设置高度和宽度,标签里面写一个img标签加载一个图片,看代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="300px;height:300px;" >
            <img src="1.jfif">
        </div>
    </body>
    </html>

    效果:

    根据结果可以看出,在div标签设置宽度和高度并没有作用于子级标签img中,我们加入overflow看看:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="300px;height:300px;overflow:hidden;" >
            <img src="1.jfif">
        </div>
    </body>
    </html>

    效果:

    加入overflowdiv标签宽度和高度生效了,并把超出部分隐藏了,但是这种有点不太好,因为看不到剩余部分,我们优化一下hidden换位auto

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="300px;height:300px;overflow:auto;" >
            <img src="1.jfif">
        </div>
    </body>
    </html>

    效果:

    Overflowauto;会使用父级宽度高度并自动添加滚动条,可以查看剩余部分内容

  • 相关阅读:
    MySql给表中某字段插入随机数
    MySql 基本语法_数据操作
    thinkphp中模板继承
    thinkphp中模块和操作映射
    如何让ThinkPHP的模板引擎达到最佳效率
    ThinkPHP访问不存在的模块跳到404页面
    thinkphp中I方法
    thinkphp中field方法
    thinkphp中F方法
    thinkphp中where方法
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11303791.html
Copyright © 2011-2022 走看看