首页 > 其他分享 >11月10日overflow属性以及圆形头像的制作

11月10日overflow属性以及圆形头像的制作

时间:2023-11-10 16:12:47浏览次数:45  
标签:11 10 width overflow 属性 border hidden 90px

目录

overflow属性

什么是overflow属性

overflow是溢出的意思,给属性规定当内容溢出元素框是发生的事情,就是我规定的框无法完全将内容包含起来多出来的部分就会溢出

溢出情况的代码

<!--溢出情况-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 90px;
            height: 90px;
            border: red 1px solid;
        }
    </style>
</head>
<body>
<div id="div1">
    <div>12345678910111213</div>
</div>
</body>
</html>

情况如图

这结果里面就是溢出的情况

overflow属性的值

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承overflow属性的值。

然后就是解决上面的情况

使用hidden属性值解决

代码如下

<!--hidden情况-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 90px;
            height: 90px;
            border: red 1px solid;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="div1">
    <div>12345678910111213</div>
</div>
</body>
</html>

效果如图

使用属性值scroll解决

代码如下

<!--scroll情况-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 90px;
            height: 90px;
            border: red 1px solid;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="div1">
    <div>12345678910111213</div>
</div>
</body>
</html>

效果如图

这里可以拉动滚动条来查看内容

属性值为auto的情况

这个是用于滚动显示已经被修剪过的内容,它和hidden结合就相当于scroll属性值的效果。

代码如下

<!--auto情况-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 90px;
            height: 90px;
            border: red 1px solid;
            overflow: hidden;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="div1">
    <div>12345678910111213</div>
</div>
</body>
</html>

效果如图

利用这个属性制作一个圆形头像

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 90px;
            height: 90px;
            border: red 1px solid;
            overflow: hidden;
            border-radius: 50%;

        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F088b0de7-dd0d-4434-850b-5368a6fa2a74%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702176289&t=c545ddf8ad916847f62d91740a6a5ea6" alt="头像" title="头像">
</div>
</body>
</html>

效果如图

标签:11,10,width,overflow,属性,border,hidden,90px
From: https://www.cnblogs.com/slzjb/p/17824347.html

相关文章

  • 2023年11月10日阅读笔记
    《黑客与画家》 为什么我会去阅读这本书籍呢?因为我最近在学习用java编写网络时感到枯燥和乏味,突发奇想去学习网络安全有关的知识。最初的自己还设想能成为一名黑客,因为他们似乎是高冷、神秘、聪明、无所不能的名词代表。而在阅读《黑客与画家》这本书的第一章内容后我对于黑客,......
  • 10 Tips to Boost Your Productivity with C# and Visual Studio 2008
    http://blogs.msdn.com/johnwpowell/archive/2008/03/23/10-tips-to-boost-your-productivity-with-c-and-visual-studio-2008.aspxhttp://www.microsoft.com/downloads/details.aspx?familyid=E5F902A8-5BB5-4CC6-907E-472809749973&displaylang=enhttp://dotnet.chinait......
  • 面试必刷TOP101:24、二叉树的中序遍历
    题目题解深度优先搜索-递归publicclassSolution{/***代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值即可***@paramrootTreeNode类*@returnint整型一维数组*/publicint[]inorderTraversal(TreeNo......
  • simple-check-100
    代码脚本解开法#include<stdio.h>intmain(intargc,char*argv[]){charflag_data[]={220,23,191,91,212,10,210,27,125,218,167,149,181,50,16,246,28,101,83,83,103,186,234,110,120,34,114,211};charv7[]={84,......
  • 11月10日浮动float以及清除浮动clear
    目录浮动浮动的需要的属性float当float的值为left时当float值为right时当float属性值为none时float属性值为inherit时浮动的特殊情况1.多个浮动在浮动的时候如果包含框太窄,无法容纳对应的浮动元素就会两种情况一种就是其中一个框下降,第二种情况就是其中一个框被卡住了下降的代码cl......
  • 解析Acrel-1000安科瑞变电站综合自动化系统的应用场景——安科瑞李笑曼
    功能:系统提供了完整的SCADA功能,包括主接线图、设备工况、实时数据显示、定值管理、SOE报警/记录/查询/打印、棒图、实时/历史曲线、语音报警、历史信息查询、用户权限管理、各种运行数据统计分析报表等。系统可以协助运维人员快速故障分析、定位和排除问题,对配电系统和用电设备进行......
  • 2023-11-10 习题选讲
    XLKCSP-S2023A给定一个\(01\)矩阵\(a\)。\(a_{x,y}=1\)则\((x,y)\)有点。求有多少个大小为\(4\)的点集,满足点集中的点刚好为一个正方形的四个顶点。\(n\le500\)发现\(O(n^3)\)不好做,直接bitset压位,\(O(\frac{n^4}{w})\)可以通过。constintN=5e2+......
  • 牛客[编程题] HJ107 求解立方根
    HJ107求解立方根中等  通过率:27.15%  时间限制:1秒  空间限制:32M 描述计算一个浮点数的立方根,不使用库函数。保留一位小数。数据范围:|val|\le20\∣val∣≤20 输入描述:待求解参数,为double类型(一个实数)输出描述:输出参数的立方根。保留一位小数......
  • 静态代码分析工具Helix QAC 2023.3:将100%覆盖MISRA C++2023规则
    静态代码分析工具HelixQAC2023.3:将100%覆盖MISRAC++:2023®规则 HelixQAC2023.3预计将于2023年第四季度发布的新MISRAC++®指南,将100%覆盖MISRAC++:2023®规则。 此外,此版本扩展了对C++20语言支持,并改进了PerforceValidate平台和HelixQAC与Validate的集成,包括其他......
  • 华为认证 | 11月底这门HCIP认证即将发布!
    非常荣幸地通知您,华为认证HCIP-StorageV5.5(中文版)预计将于2023年11月30日正式对外发布。为了帮助您做好学习、培训和考试计划,现进行预发布通知,请您关注。01发布概述基于“平台+生态”战略,围绕“云-管-端”协同的新ICT技术架构,华为公司打造了覆盖ICT领域的认证体系,包含ICT基础设施......