有没有办法让边框中的内容停留在原处，而背景框的边框却在改变宽度？
是的，可以使用CSS的box-sizing属性来实现这样的效果。box-sizing属性用于设置元素的盒模型，其中content-box表示使用标准的盒模型，即元素的宽度和高度不包括边框和内边距，而border-box表示使用另一种盒模型，即元素的宽度和高度包括边框和内边距。
为了实现边框中的内容停留在原处，可以将边框的宽度作为padding应用到父元素上，然后将背景框的边框宽度设置为0。这样，背景框的边框会在改变宽度时，不影响内容的位置。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
border: 10px solid #000;
padding: 10px;
box-sizing: border-box;
background: #f00;
}
.content {
width: 100%;
height: 100%;
background: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
内容区域
</div>
</div>
</body>
</html>在上述代码中，.container表示父元素，设置了宽度、高度、边框、内边距和盒模型；.content表示内容区域，使用了100%的宽度和高度，并设置了背景色。
这样，即使改变.container的边框宽度，.content的内容仍然会停留在原处，而背景框的边框宽度则会改变。
推荐的腾讯云产品：腾讯云云服务器（CVM）和腾讯云内容分发网络（CDN）。腾讯云云服务器提供了可扩展的云计算能力，为您的应用程序提供高性能的计算资源。腾讯云内容分发网络可以加速静态内容的传输，提供更快的访问速度和更好的用户体验。
腾讯云云服务器产品介绍：https://cloud.tencent.com/product/cvm
腾讯云内容分发网络产品介绍：https://cloud.tencent.com/product/cdn
相关·内容
有没有办法让边框中的内容停留在原来的位置，而背景框的边框却在改变宽度？我正在使用单选按钮的旋转木马，现在我正在装饰它看起来像框按钮。目前，我有一个左边框变成右边框(就像抽屉打开一样)，但是当边框移动时，图
浏览 36提问于2021-01-10得票数 1
边框应该超出div的宽度x高度。但是，这个jsfiddle -- --显示当边框透明时，边框被添加到div的宽度x高度。当给定透明的1 1px边框时，我希望jsfiddle中的行是1 1px，但它是3 1px。
有人明白这是怎么回事吗？我正在用Chrome看它。
浏览 4提问于2013-12-12得票数 0
回答已采纳
今天我在玩盒子模型，改变盒子的大小来看结果。我们都知道，内容框的值是默认的。这意味着当我们为一个元素声明一个宽度时，它认为宽度仅适用于内容，因此填充和边框将增加元素的总大小。然后，我们可以使用边框的值，它告诉浏览器在声明内容的宽度时必须考虑边框宽度和填充宽度
浏览 3提问于2015-09-18得票数 1
回答已采纳
1回答
Pygtk:更改小部件的边框颜色
、、、、
我到处都找过了，但似乎找不到改变边框颜色的方法。例如，我需要一个这样的按钮：gb.set_border_width(50)gb.set_border_color('red')
我试过gb.modify_bg(...)但它只改变按钮的背景，而不改变它周围的
浏览 2提问于2011-04-28得票数 6
回答已采纳
2回答
创建不规则边框
、、
我试图在div周围创建一个不规则的边框，div将包含文本。我目前正在使用两个不同的图像，并将它们放在div的顶部和底部作为背景。这种方法效果很好，但问题是div可以增长，即它可以根据内容的不同而具有可变的宽度和高度。因此，在这种情况下，使用图像作为背景来实现此效果不再可行。有没有办法用CSS和javascript创建不规则的边框
浏览 1提问于2015-03-24得票数 3
我有一个固定宽度的页面，我希望使用“边框CSS”命令为其添加一个简单的边框。但是，我不希望这个边框使页面膨胀，并导致较小的屏幕具有水平滚动条。我对CSS不是很在行，但我知道我考虑过使用负边距来抵消边框的宽度，因为我已经做了一些类似的操作，为我不想移动的其他元素添加边框。但是当我在我的主容器div上这样做时，所有的东西都被抛离中心，并被打碎到页面的左侧。我使用<em
浏览 3提问于2011-01-29得票数 2
回答已采纳
我的目标是渲染带有边框的字段集和位于顶部的带有背景颜色的图例。图例的背景颜色应扩展到字段集的全宽。内容看起来不错，但标题不再扩展字段集的宽度。如果我用div将内容括起来，
浏览 0提问于2013-01-19得票数 3
回答已采纳
我需要一个带边框的div来包装任意大小的固定宽度的内容(这意味着我不知道固定宽度是什么，它会随着页面的不同而变化)。下面的<p>做了我在IE6中所期望的事情，也就是说，如果您将浏览器窗口的大小缩小到小于内容的宽度(在本例中是固定宽度的div，但它可以是任何固定宽度
浏览 1提问于2009-12-24得票数 3
回答已采纳
4回答
想要建立一个这样的网格，其中div/节是百分比。任何地方的保证金都是一样的。
如果我将页边距设置为1px，但我希望使用1em或10 1px左右，下面的代码可以工作。我该怎么做？
浏览 5提问于2014-01-21得票数 0
回答已采纳
我想有一个文本区，它是500px，这是我对文本区使用的CSS：padding: 0px;我注意到IE和Chrome默认情况下有一个1px边框，而FF有一个2px边框，导致文本区域是502px而不是500px，有什么解决办法吗？只需注意，我可以显式指定texarea边框宽度，即。边框宽度：1px，但这里的问题是，它不能很好地与IE一起工作(当<
浏览 1提问于2008-12-27得票数 6
2回答
我有一个具有固定宽度和高度以及边框的HBox。在HBox中，我有一个带有几个不同视图viewStack。当viewStack更改视图时，我希望HBox容器根据其内容不断调整大小。目前它停留在固定的宽度。有没有办法通过HBox设置来做到这一点呢？
浏览 4提问于2009-08-08得票数 1
回答已采纳
我有一个输入框：$('#bizzname').change(function() {
$('#bizzname').css({"background":"",&qu
浏览 0提问于2011-08-30得票数 1
回答已采纳
1回答
我正在使用进行页面布局，并希望在列中插入一个。
我遇到的唯一问题是框阴影有一个1px的边框，这足以使我的第二列换到下一行。如果我去掉边框，它可以很好地对齐。如果我从列宽中减去2px，它看起来就像我想要的那样。然而，我想利用Bootstrap的流畅布局(它是基于百分比而不是像素)，所以没有简单的方法可以简单地使<div> 2像素比其他任何情况下更窄。我真的不喜欢边
浏览 0提问于2012-05-05得票数 0
回答已采纳
4回答
当我查看我创建的盒子的实际宽度和实际高度时，大小由我在计算中一直知道的情况来确定：高度=边框+填充+内容的高度
但是在w3.org上，它说:框的宽度是由左右边距、边框和填充以及内容宽度之和决定的高度由顶部和底部边距、边
浏览 11提问于2016-10-17得票数 2
回答已采纳
有没有办法在Symbian上用Qt显示QDialog而不带边框？我通过这种方式显示对话框：dialog.setWindowState(Qt::WindowFullScreen);但是在屏幕上有一个可怕的边界，这就是我想隐藏的。我尝试过使用Qt::Splashscreen，但是有一个带有透明背景的qdialog，这并没有达到我的目的。
Qt::Frame
浏览 1提问于2011-12-05得票数 0
回答已采纳
我正在尝试设置一个图像作为自定义UIButton的背景。我可以在界面构建器中为“四舍五入的矩形”UIButton设置背景图像，但现在边框消失了。有没有办法保留边框？另外，我想让边框显示为矩形而不是圆形。
浏览 1提问于2009-05-12得票数 12
回答已采纳
2回答
我遇到了一个问题，在这个问题上，任何把内容放到专栏中的内容都会溢出到旁边的一个专栏中。ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p></div><
浏览 0提问于2013-09-08得票数 0
回答已采纳
我有一个流畅的布局，但我不确定如何让背景与内容的行为方式相同。我有一个使用scroll-y css调用创建的图像。在全屏上，它看起来很棒，并创建了一个有边框的白色方框，所有主要内容都进入其中，并直接位于页面的中间。然而，当我调整我的窗口大小时，背景图像停留在相同的位置，因为我所有的内容都被移动以适应窗口的大小。有没有</
浏览 0提问于2010-05-31得票数 0
1回答
我想使用PNG (或SVG)背景图像(background-fit：'contain')，然后动态更改节点边框(基于数据)。除了一件事:节点边框围绕节点“居中”呈现，因此线的一半在节点的维度之外，另一半在节点内部。这将剪辑背景图像(请参见下面的nodes.jpg )。作为一种变通办法，我尝试使用“背景宽度”和“背景高度”(设置为60%)在CSS中创建类似填充的东
浏览 12提问于2017-01-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
