CSS盒子模型的溢出处理----overflow的用法

最新推荐文章于 2023-11-10 18:14:22 发布
最新推荐文章于 2023-11-10 18:14:22 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端 文章标签： css css3 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45912061/article/details/122426345
版权

当CSS的子元素占位比父元素大时会产生溢出现象，这时一般使用overflow 进行处理：
overflow： visible ：默认值：子元素会从父元素溢出，在父元素外部显示

overflow： hidden：溢出内容被裁减不会显示

overflow：scroll：生成两个滚动条，通过滚动条查看完整内容

overflow：auto：根据需要生成滚动条，yyds

overflow-x：自己按需设置水平方向

overflow-y：自己按需设置竖直方向

marko.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
接下来，我们来看看它的使用方法和组合的属性。要实现-webkit-line-clamp效果，需要与其他几个WebKit特有的属性一起使用，主要包括： 1. display: -webkit-box; 这个属性将元素设置为弹性伸缩盒子模型。 2. -webkit...
在HTML5和CSS中，当内容超出其容器的大小时，我们可以使用overflow属性来处理盒子的溢出
BLOG域名:programb.blog.csdn.net
07-03 1909
在HTML5和CSS中，当内容超出其容器的大小时，我们可以使用overflow属性来处理盒子的溢出。在这个例子中，我们创建了四个具有相同尺寸和样式的盒子，但是每个盒子的overflow属性设置不同。请注意，如果你想单独控制水平溢出和垂直溢出，你可以使用overflow-x和overflow-y属性。scroll：溢出的内容会被隐藏，但是会显示滚动条来查看剩余的内容。hidden：溢出的内容会被隐藏，并且不会引发滚动条。visible：默认值，溢出的内容会显示在盒子之外。溢出的内容会被隐藏。
盒子模型、溢出的知识
一无是处的博客
03-27 644
盒子模型、溢出
css阴影的box-shadow
qq_45117943的博客
08-09 450
** box-shadow是css3里面新增的属性 ** 在开发中通常的配置参数说明： h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。默认outset 通常配置为box-shadow：1px 1px 2px 2px red 。 参数顺序为：水平偏移，垂直偏移，模糊
前端学习11 | 盒子模型以及溢出属性
printfbaozw的博客
02-28 562
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒子模型。长文本溢出盒子时，我们就要用到溢出属性，来避免。
CSS学习笔记五---盒子模型 & 溢出属性
Flora_hsx的博客
07-24 430
学习笔记五
html盒子里的内容溢出,[经验] HTML页面中子盒子溢出了怎么办
weixin_39644377的博客
06-09 816
背景: 在查询数据记录的一个页面上使用bootstar 框架的分页插件作为显示数据表格的工具.问题: 当查询的范围在一个较短的时间内时, 子元素是乖乖的呆在父元素内部的, 但是一但将查询的时间范围扩大, 装着数据表格的DIV 盒子就会溢出 父元素盒子这就很尴尬了思路一: 对元素的控制还不够精确但是经过排查, 盒子的控制范围是正确的, 不存在错误, 而且该元素的父级盒子并不是动态拼接生成的, 所以...
用CSS实现超长字段被省略的简单方法.rar
07-04
以上就是在IE浏览器中使用CSS实现超长字段被省略的简单方法。尽管这种方法针对的是IE浏览器，但随着现代浏览器的普及，我们建议同时考虑其他浏览器的兼容性，使用如`-webkit-`、`-moz-`等前缀来确保在更多浏览器中的...
牛客-前端布局与事件高频考点
04-03
盒子模型是CSS布局的基础，盒子模型包括content area、padding、border和margin四个部分。盒子模型的宽度是通过计算content area、padding、border和margin四个部分的宽度来计算的。 二、margin纵向折叠 margin...
1.07 css3新特性
10-07
CSS3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 CSS3属性前缀 由于CSS3标准还未确定，因此各大浏览器厂商使用了自己的私有前缀与标准进行区分。主要流行的浏览器...
CSS Border高级使用实例分享(三角等形状)
09-25
在深入探讨CSS Border高级使用实例之前，首先要了解CSS盒模型的基础知识。CSS盒模型是由margin（外边距）、border（边框）、padding（内边距）和content（内容）组成的。在边框交界处，由于边框的平滑过渡效果，我们...
CSS（四）溢出、盒子模型
商务合作 | 共同学习 | 携手共进
08-24 1087
CSS：溢出、盒子模型
五种css溢出隐藏的方法----亲测可用
一个努力不被优化的程序员
09-06 5924
以上就是CSS实现文本溢出和多行省略的方法，对于不同的需求可以根据实际情况选择不同的实现方式。在实际开发中，我们需要根据不同的浏览器的兼容性来使用相应的CSS前缀以及注意不同属性之间的兼容性。
CSS盒子模型、溢出处理、浮动、高度坍塌问题
czxvzxzczcc的博客
08-17 2114
盒子模型 1.内容区 width 盒子内容区宽度height 盒子内容区高度background-color 背景颜色盒子可见大小由内容区，内边距和边框共同决定为元素设置边框，必须指定3个样式（宽度，颜色，样式）border-width 宽度可以同时指定四个边框大小4个值 上 右 下 左3个值 上 左右 下2个值 上下 左右一个值 4边除了border-width，CSS还提供了border-...
CSS垂直方向布局中，子元素溢出父元素，如何处理？
王春燕的博客
04-11 5889
默认情况下，父元素的高度是被子元素撑开的，若父元素设置了，就是设置多少就是多少 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出, 使用overflow属性设置父元素如何处理溢出的子元素 可选值： visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出的内容将会被裁剪不会显示 scroll 生成两个滚动条，通过...
【CSS】关于CSS盒子模型中的溢出处理方式overflow属性
土元欧巴的博客
12-10 5022
关于CSS盒子模型中的溢出处理方式overflow属性
CSS盒子塌陷常用解决方案
m0_51277853的博客
07-08 611
css盒子塌陷方法介绍。一、使用overflow是触发父元素的BFC；二、利用：after伪元素选择器取消浮动
css元素溢出问题
weixin_49344258的博客
10-12 1704
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式， 设置的方法是通过 overflow 属性 来设置。 问题如下： overflow 属性: 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。如上图所示！ 2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top 塌陷的功能。 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内.
解析css中的overflow属性
最新发布
m0_68845148的博客
11-10 7379
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值