前端学习 -- Css -- overflow

简介: 子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小。如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容。父元素默认是将溢出内容,在父元素外边显示,通过overflow可以设置父元素如何处理溢出内容:可选值:visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示。

子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容。
父元素默认是将溢出内容,在父元素外边显示,通过overflow可以设置父元素如何处理溢出内容:
可选值:
visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示。
hidden, 溢出的内容,会被修剪,不会显示。
scroll, 会为父元素添加滚动条,通过拖动滚动条来查看完整内容,该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条。
auto,会根据需求自动添加滚动条,需要水平就添加水平,需要垂直就添加垂直,都不需要就都不加。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .visible {
                width: 200px;
                height: 200px;
                background-color: #bfa;
                overflow: visible;
            }
            
            .hidden {
                width: 100px;
                height: 500px;
                background-color: red;
                overflow: hidden;
            }
            
            .scroll {
                width: 100px;
                height: 500px;
                background-color: #bfa;
                overflow: scroll;
            }
            
            .auto {
                width: 100px;
                height: 500px;
                background-color: red;
                overflow: auto;
            }
        </style>
    </head>

    <body>

        <div class="visible">
            进能有益,纳说有补,人之所知也;或以不补而得佑,或以有益而获罪。且夏时炉以炙湿,冬时扇以火。世可希,主不可准也;说可转,能不可易也。世主好文,己为文则遇;主好武,己则不遇。主好辩,有口则遇;主不好辩,己则不遇。文主不好武,武主不好文;辩主不好行,行主不好辩。文与言,尚可暴习;行与能,不可卒成。学不宿习,无以明名。名不素著,无以遇主。仓猝之业,须臾之名,日力不足。不预闻,何以准主而纳其说,进身而托其能哉?昔周人有仕数不遇,年老白首,泣涕於涂者。人或问之:“何为泣乎?”对曰:“吾仕数不遇,自伤年老失时,是以泣也。”人曰:“仕奈何不一遇也?”对曰:“吾年少之时,学为文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更为武。武节始就,武主又亡。少主始立,好用少年,吾年又老,是以未尝一遇。”仕宦有时,不可求也。夫希世准主,尚不可为,况节高志妙,不为利动,性定质成,不为主顾者乎?
        </div>
        <div class="hidden">
            进能有益,纳说有补,人之所知也;或以不补而得佑,或以有益而获罪。且夏时炉以炙湿,冬时扇以火。世可希,主不可准也;说可转,能不可易也。世主好文,己为文则遇;主好武,己则不遇。主好辩,有口则遇;主不好辩,己则不遇。文主不好武,武主不好文;辩主不好行,行主不好辩。文与言,尚可暴习;行与能,不可卒成。学不宿习,无以明名。名不素著,无以遇主。仓猝之业,须臾之名,日力不足。不预闻,何以准主而纳其说,进身而托其能哉?昔周人有仕数不遇,年老白首,泣涕於涂者。人或问之:“何为泣乎?”对曰:“吾仕数不遇,自伤年老失时,是以泣也。”人曰:“仕奈何不一遇也?”对曰:“吾年少之时,学为文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更为武。武节始就,武主又亡。少主始立,好用少年,吾年又老,是以未尝一遇。”仕宦有时,不可求也。夫希世准主,尚不可为,况节高志妙,不为利动,性定质成,不为主顾者乎?
        </div>
        <div class="scroll">
            进能有益,纳说有补,人之所知也;或以不补而得佑,或以有益而获罪。且夏时炉以炙湿,冬时扇以火。世可希,主不可准也;说可转,能不可易也。世主好文,己为文则遇;主好武,己则不遇。主好辩,有口则遇;主不好辩,己则不遇。文主不好武,武主不好文;辩主不好行,行主不好辩。文与言,尚可暴习;行与能,不可卒成。学不宿习,无以明名。名不素著,无以遇主。仓猝之业,须臾之名,日力不足。不预闻,何以准主而纳其说,进身而托其能哉?昔周人有仕数不遇,年老白首,泣涕於涂者。人或问之:“何为泣乎?”对曰:“吾仕数不遇,自伤年老失时,是以泣也。”人曰:“仕奈何不一遇也?”对曰:“吾年少之时,学为文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更为武。武节始就,武主又亡。少主始立,好用少年,吾年又老,是以未尝一遇。”仕宦有时,不可求也。夫希世准主,尚不可为,况节高志妙,不为利动,性定质成,不为主顾者乎?
        </div>
        <div class="auto">
            进能有益,纳说有补,人之所知也;或以不补而得佑,或以有益而获罪。且夏时炉以炙湿,冬时扇以火。世可希,主不可准也;说可转,能不可易也。世主好文,己为文则遇;主好武,己则不遇。主好辩,有口则遇;主不好辩,己则不遇。文主不好武,武主不好文;辩主不好行,行主不好辩。文与言,尚可暴习;行与能,不可卒成。学不宿习,无以明名。名不素著,无以遇主。仓猝之业,须臾之名,日力不足。不预闻,何以准主而纳其说,进身而托其能哉?昔周人有仕数不遇,年老白首,泣涕於涂者。人或问之:“何为泣乎?”对曰:“吾仕数不遇,自伤年老失时,是以泣也。”人曰:“仕奈何不一遇也?”对曰:“吾年少之时,学为文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更为武。武节始就,武主又亡。少主始立,好用少年,吾年又老,是以未尝一遇。”仕宦有时,不可求也。夫希世准主,尚不可为,况节高志妙,不为利动,性定质成,不为主顾者乎?</div>

    </body>

</html>

注释下各种div就可以看到效果:

overflow: visible:

overflow: hidden:超出部分不会显示

overflow: scroll:可以滑动将内容全部显示

overflow: auto:看下效果:

 

可运行代码文件:

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson18.html

 

 

相关文章
|
17小时前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
13 4
|
2天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
22 0
学习css的clip-path属性
|
8天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
24 8
|
12天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南:** - 明确目标,从HTML/CSS基础开始。 - 深入学习JavaScript,结合项目实战。 - 跟踪技术趋势,选一二框架钻研。 - 多实践,从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力,保持好奇与耐心。 - 加入社区,分享交流,持之以恒,成为优秀前端开发者。
15 2
|
13天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
14 2
|
15天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
18 0
|
15天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
19 0
|
15天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
10 0
|
15天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
11 0
|
15天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
14 0