6.overflow:hidden和设置边框解决外边距溢出的问题

最新推荐文章于 2023-09-07 18:03:04 发布
原创 最新推荐文章于 2023-09-07 18:03:04 发布 · 3.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#外边距 #溢出

本文介绍了在CSS布局中遇到的元素溢出问题，并提供了两种解决方案：一是通过为外部容器添加边框(border)来调整布局；二是使用overflow:hidden属性来隐藏溢出的内容，确保页面布局的正确性。

想要达到这样的效果：

如果是实现这样的源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<style type="text/css">
			.big{
				height:300px;
				width:500px;
				background:#EEEEEE;
			}
			.small{
				height:100px;
				width:100px;
				background:red;
				margin-top:50px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="small">
				
			</div>
		</div>
	</body>
</html>
会出现这样的效果：


加了margin设置导致了溢出问题。解决方式有两个：

①.给div加边框border；

			.big{
				height:300px;
				width:500px;
				background:#EEEEEE;
				border:1px solid black;
			}
效果：

②.使用overflow:hidden;隐藏溢出

			.big{
				height:300px;
				width:500px;
				background:#EEEEEE;
				overflow:hidden;
			}

效果：



Css：overflow: hidden截断条件‌及如何避免截断
q1003675852的博客
04-01 1917
本文主要讨论了overflow: hidden截断条件‌及如何避免截断
关于overflow为hidden后border不会被子级覆盖的问题
id_dimu的博客
06-17 2010
预期：从第一张图到第二张图，但是结果为第三张图。 html代码： <div class="box"> <div class="ball"></div> </div> css代码 .box{ width:100px; height:100px; po...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
Shawn的博客
06-28 304
https://blog.csdn.net/qq_41638795/article/details/83304388
Dreamweaver 8 设置层的属性(转)
ciya3282的博客
08-13 449
Dreamweaver 8 设置层的属性(转)[@more@] 　　这篇教程为“Dreamweaver 8 入门经典教程”的一部分。查看全套教程>>>>>。 　　 选中要设置的层，就可以在属性面...
overflow及父级边框塌陷问题4种解决方案
kalimera的博客
01-26 1798
最近在学习前端知识，看了狂神的课，做一点笔记记录知识点 代码准备 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> /* 设置内外边距 */ div{ margin: 10px; p
边框、overflow属性、字体属性、怪异盒模型、父子外间距塌陷
weixin_69474097的博客
07-14 150
边框、overflow属性、字体属性、怪异盒模型、父子外间距塌陷
div 左右排列 高度自适应_CSS中三大坑-外边距的重合、外边距溢出，、高度坍塌...
weixin_39930252的博客
11-21 349
1.先说外边距的重合如何产生的：2个div垂直排列时，上面的div1设置了10px下外边距，下面的div2设置了20px的上外边距，这个时候div1和div2垂直方向的边距就会重合在一起，他们之间垂直方向的距离就会以边距大的值为准，所有这时垂直距离为20px，而不是10px+20px=30px。<!DOCTYPE html> <html lang="en"> <hea...
css中position:relative和overflow:hidden的问题
03-28
在CSS布局中，`position:relative`和`overflow:hidden`是两个非常重要的属性，它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先，我们来看`...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。本文将详细解释这三个方面。 1. **隐藏溢出** 当元素的内容超出了其指定的...
css之使table也能overflow:hidden
10-30
为了隐藏溢出的部分，我们需要将overflow属性设置为hidden。 为了确保上述样式能正确应用，还需要一个关键的CSS规则table-layout:fixed。这个属性规定了如何计算列宽。当使用fixed值时，表格的布局将固定，列宽将...
IE8 css overflow:hidden不起作用
09-25
盒模型定义了元素的内容、内边距、边框和外边距如何布局。`overflow`属性包括几个可能的值，如`visible`（默认值，溢出内容可见）、`hidden`（溢出内容被裁剪隐藏）、`scroll`（溢出内容被裁剪，但提供滚动条）、...
CSS margin外边距塌陷、合并问题
piaoliangj的博客
02-15 1525
16.解决外边距塌陷——软设问题总结16.1 外边距塌陷1.父子关系的块元素2.兄弟关系的块元素16.2 解决外边距塌陷的方法1.解决父子关系的塌陷2.解决兄弟关系的塌陷 16.1 外边距塌陷 1.父子关系的块元素 如果一方有margin-top，则父子盒子一起有同样值上外边距； 如果两方都有margin-top，则父子盒子取较大值的上边距； 效果图如下： 2.兄弟关系的块元素 如果相邻兄弟有单独的margin-top / margin-bottom 是不会塌陷的 相邻兄弟的上面一个块元素使用了ma
页面布局之盒子模型——内容与边框（overflow，border：none，border-collapse）
Ahua_Core的博客
08-14 788
页面布局之盒子模型——梗概看透页面布局的本质盒子模型的组成元素一、content 内容content的必要性content的属性元素二、border 边框border相关属性border：none与border:0border-collapse：collapse 看透页面布局的本质 经常听说，网页布局实际上就是一个又一个盒子堆砌排列起来。这些盒子里面装了我们要用的东西。CSS则是给盒子加上修饰包装，让盒子变得好看美观。 任何元素都可以看作是一个盒子。 盒子模型的组成 首先了解盒子模型的组成，包括以下四部分
overflow:hidden用法
henry的博客
06-16 9726
最近学习css的overflow元素的hidden属性，总结2点作用： 1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏 2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。 作用1示例: <!DOCTYPE html> &lt...
解决border-radius溢出问题以及overflow:hidden隐藏失效问题
weixin_42637336的博客
12-12 5705
今天在开发项目时遇到了border-radius的溢出问题，当我给外层ul设置一个border-radius时，内层li的内容就出现了溢出问题，会超过外层的border-radius。 解决方案1：在父元素ul的样式中添加overflow:hidden，这样超过ul的元素就会被隐藏。 效果： 解决方案2：给子元素li添加与外层ul相同弧度的border-radius。 效果： 就变成了...
overflow:hidden 和 border-radius失效的问题
jinxinlive的博客
03-08 623
问题描述： 当父元素存在border-radius 时。父元素的overflow：hidden 在ios端会失效 解决方案： 给父元素增加 transform:rotate(0deg) 更新： 给父元素增加 transform:rotate(0deg) ios上机型会解决此问题，但是部分安卓机型（小米6）仍然失效，因此需要在父元素同时设置transform: rotate(0deg) 或 transform: scale(1) 或 transform:translateZ(0.01px); 可以设置 tra
关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）
学习笔记，不喜勿喷！！勿喷！！
10-26 401
1.overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden ，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 代码如下： 运行结果如下： 2. overflow:hidden 清除浮动 一般而言，父级元素不设置高度时...
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
sssssnmmm的博客
09-07 4875
对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。当父div有固定高度时，如果子div的高度超过父div的高度，那么子div会超出父div的束缚，这种情况就叫溢出。默认情况下，父div没有设置高度，它的高度可以被子div任意撑大。浮动的div不会坍塌。
css-overflow以及overflow:hidden的理解与使用
weixin_41993525的博客
11-09 2862
css-overflow的概念理解 overflow是css样式类布局中一个非常常见的概念，它是用来规定当内容溢出目标框时需要如何处理的一种手段。 该属性定义溢出固定内容区域内的子节点元素内容会如何做处理。 overflow： 词名 值 是否默认值 作用 overflow visible 是 overflow设置该值或不设值的默认值。内容不会被修剪，会呈现在元素目标框之外 overflow hidden 否 内容会被修剪隐藏，超出目标框的内容不可见 overflow scroll 否
隐藏溢出文本：设置文本框溢出内容隐藏（使用 overflow: hidden）
最新发布
07-24
为了保证容器的宽度计算准确，建议使用 `box-sizing: border-box` 来确保内边距和边框不会影响整体宽度[^1]。 --- ### 关键属性说明 - `width: 200px;`：容器必须具有明确的宽度，否则无法判断文本是否溢出[^2]。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值