位置: IT常识 - 正文

CSS中的overflow,(Css中的color属性用于设置html元素的背景颜色)

编辑:rootadmin
CSS中的overflow, 1.总结(overflow只用于指定高度的块级元素上)1.overflow:visible;文本内容不会被修剪,会溢出到元素框外。2.over:hidden;文本内容会被裁剪,并且元素框外的内容是不可见的。3.over:scroll;内容会被裁剪,但浏览器会显示滚动条以便查看其他内容。4.over:auto;和over:scroll;类似,但是over:scroll;默认形成滚动条,而over:auto;只在需要时形成滚动条,当文本不出现溢出时便不会形成滚动条2.代码实践

推荐整理分享CSS中的overflow,(Css中的color属性用于设置html元素的背景颜色),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:Css中的选择器不包括,Css中的高度,Css中的选择器包括,CSS中的overflow属性用于,css中的overflow是什么意思,CSS中的overflow属性用于,CSS中的overflow,css中的overflow是什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS中的overflow,(Css中的color属性用于设置html元素的背景颜色)

1.overflow:visible 我们先定义一段代码,这里文本内容会超出元素框:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; overflow: visible; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>

运行结果: 这里是overflow的基本默认属性,文本不会被修剪,直接超出元素框。 2.over:hidden; 这个属性内容会被修剪,但是溢出的内容是无法看到的。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; /*overflow: visible;*/ overflow: hidden; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>

运行结果: 这里比较上面的属性,同样的元素框,但是溢出部分却已经被裁剪且无法显示。 3.over:scroll; 相比于1,2的属性,over:scroll;会裁剪内容,浏览器会形成滚动条便于查看超出元素框的文本内容。 代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 50px; background-color:#eee ; border: 1px dotted black; /*overflow: visible;*/ /*overflow: hidden;*/ overflow: scroll; } </style></head><body><div> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p> <p>这里的文本内容会溢出元素框</p></div></body></html>

运行结果:

本文链接地址:https://www.jiuchutong.com/zhishi/297683.html 转载请保留说明!

上一篇:YOLOv5源码逐行超详细注释与解读(4)——验证部分val(test).py(yolov5源码讲解)

下一篇:【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏(前端yck)

  • opporeno6息屏显示在哪设置(oppp息屏显示)

  • 小米8人脸识别失灵(小米8人脸识别模块坏了)

  • 佳能光圈怎么调(佳能光圈怎么调M)

  • 获取店铺失败或搬走什么意思(获取店铺失败或请求异常)

  • iphone se 2是单卡还是双卡(苹果se二代单卡双卡)

  • 华为bln-tl10是什么型号手机(华为blntl10什么机型)

  • 爱奇艺刚续的费能退不(爱奇艺会员交费之后还可以取消吗)

  • 小米9手机一直循环重启(小米9手机一直闪屏怎么办)

  • 交管12123实名认证刷脸失败是什么原因(交管12123实名认证怎么改)

  • 小米6x黑屏无法唤醒(小米6x黑屏无法重启)

  • 开启双重认证什么意思(开始双重认证)

  • 华为手机出现一个小人怎么关闭(华为手机出现一个圆圈怎么关掉)

  • 为什么苹果商店更新不了软件(为什么苹果商店一直在转圈圈)

  • 华为原相机怎么关美颜(华为原相机怎么设置)

  • 华为mate30出厂膜是什么膜(华为mate30pro出厂膜)

  • 微信朋友圈双击头像抖动(微信朋友圈双击无法回到顶部)

  • 底部任务栏怎样恢复(底部任务栏怎样隐藏)

  • iphonex抬头灯怎么设置(iphonex抬头灯不亮)

  • wps文档怎么查找文字(wps文档怎么查找重复项)

  • 苹果11有什么新功能(苹果11系列有什么)

  • 拼多多小刀多长时间一个(拼多多小刀多长时间过期)

  • a9相当于骁龙多少(a9等于骁龙几)

  • 咻电怎么退押金(咻电怎么退押金微信)

  • vivoy93怎么在桌面显示时间(vivo y53s怎么设置桌面)

  • 叨叨记账怎么打字聊天(叨叨记账打赏)

  • 苹果手机怎么转接电话(苹果手机怎么转移通讯录)

  • 华为hmscore通知关闭方法(华为手机hms提醒)

  • 电脑学习网免费分享2022年6月14日国外苹果iphone应用商店AppStore账号和密码(哪个网站可以免费学电脑)

  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设 电脑维修 湖南楚通运网络