开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有办法让边框中的内容停留在原处，而背景框的边框却在改变宽度？

是的，可以使用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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

哪些你知道或不知道的css，在这里或许都齐全

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

02

哪些你知道或不知道的css，在这里或许都齐全 css编码技巧 css小技巧

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

01

一种统计ListView滚动距离的方案

ListView做为Android中最常使用的列表控件,主要用来显示同一类的数据，如应用列表，商品列表等。ListView的详细使用与介绍可查阅官方文档ListView。这里不再展示叙述。

02

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏，这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》，翻译活动由http://www.wpmind.com/ 的站长小指发起，最终版本将会在http://www.wpmind.com/ 发布。希望更多的人参与到Windows Phone开发中来。之前，Jake已经在他的Blog中发布了他翻译的部分：Windows Phone 7用户界面框架。本人负责翻译的是W

07

【CSS 学习笔记】CSS元素和布局

其中 margin 称为外边距，在计算元素整体宽高的时候一般不包括它。CSS3 中新增了一个属性 box-sizing，可以用来指定使用的盒模型计算方式。下面是 CSS3 中支持的盒模型计算方式（CSS2种只支持默认的）

02

html css编码规范

有人建议编码规范这种东西应该落实到ESlint这类工具上去，而不是停留在文档层面。

01

超强的纯 CSS 鼠标点击拖拽效果

而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。

01

扫码与中文输入法

扫码输入就是用扫码枪或者其他设备扫描图形码（条形码或其他码）后将其内容识别为文本输入的操作。扫码能减少降低成本，降低输入出错率，提高输入效率。比较常见场景有的快递取货、入库、出库等。

01

[译]这几个CSS小技巧，你知道吗？

在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧：

02

【移动端bug】iOS 下 Input 和 fixed 的问题

最近在项目中碰到了移动端 IOS 下的一些问题，就打算完整总结一下，以便后续碰到相关问题就不用浪费时间了

06

ABAP随笔-简单DEBUG

有时候我们遇到业务程序报错消息，想要通过程序消息报错前后文查看原因时(比较适合比较复杂的程序或者标准程序)，

02

HTML中怎么做悬浮框？

悬浮框是什么？大家不一定清楚，但是说网站上怎么都关不完的小广告，估计人人都被它恶心过，不管你怎么滚动网页，这些小广告始终会出现在你的屏幕上。今天我们就来聊聊这些小广告背后的原理——悬浮框。

04

HTML5+CSS3

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

02

编写难于测试的代码的5种方式

什么是弹框? 弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于

08

100个弹框设计小结

最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框? 弹框是一种交互方式，用作提醒，做决定或者解决某个任务

03

在设计了100个弹框之后，这些是我的心得

什么是弹框? 弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于

09

每天10个前端小知识【Day 15】

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

01

响应式图像

将picture元素和srcset,sizes属性纳入html5规范，新规范意在解决：

01

Android的View动画

View动画其实就是使ImageView上的图片在隐藏、旋转、缩放、平移通过动画的过程显示。

03

无框界面

什么是无框界面纵使几大设计风格已形成寡头垄断（如苹果的圆角玻璃、谷歌的层级、微软的方块…），但界面设计的进化历程才刚刚开始。我曾在之前的《[译文] 去形式化——移动设计新趋势化》( http://www.jianshu.com/p/a4451588ea72 )写过关于去形式化的话题。在这个新趋势中，界面上的内容越来越重要，相对的，一切与内容无关的都被大大削减。去形式化是一张非常模糊的全景图，在演化中一些新的设计风格逐渐清晰起来，例如——无框界面。也许你已经发现了，今年来越来越多的网站和应用，尤其是

06

腾讯没有掉队

「掉队」这个词，其实一直都是在伴随着腾讯的。无论是在以前的互联网时代，还是在现在的后互联网时代，几乎都是如此。没有办法，正所谓树大招风，更何况是处于名符其实的头部地位的腾讯呢？那么，腾讯究竟有没有掉队呢？至少从现在的情况来看，腾讯是没有掉队的。因为无论从哪个方面来看，腾讯依然处于中国互联网行业的「第一阵营」。既然腾讯没有掉队，那么，为什么它还始终都和「掉队」这个词联系在一起呢？我认为，在很大程度上，这源自于人们对于腾讯的成见以及过高的期待。

01

javafx框架tornadofx入门30_类型安全的样式-使用样式类

style-class.gif image.png class MyStyle : Stylesheet() { companion object { val leftBox by cssclass()// View中通过 addClass(MyStyle.leftBox) 使用此样式 val labelOne by cssid()// View中id为"label-one"的控件使用此样式 val two by cssclass()// View

03

《101 Windows Phone 7 Apps》读书笔记-Groceries

课程内容 Ø Panarama控件 Groceries是一个简易的购物清单应用程序，我们可以用它来一步一步建立自定义的购物清单。根据个人的喜好，我们可以命名并添加尽可能多的购物页面。能够方便地添加记录，这是本应用程序的特点，比如，批量添加、选择最喜欢的商品以及选择最近购买的商品等等。 Groceries应用展示了Panorama控件，这是Windows Phone平台上具有标志意义的用户控件，它被广泛地应用于手机上的“hub”界面（例如人脉、图片等等）。粗略地说，Panorama控件的

05

终极指南：如何成为一名优秀设计师？

开启任何职业生涯，都非常像第一次去吃自助餐的感觉。摆在你面前的，有无数种可能的选择。

02

Android开发者进退两难的出路；转行还是进阶？

著名国学大师王国维先生，曾经在他的名作《人间词话》中说，人生的三个境界是：“昨夜西风凋碧树，独上高楼，望断天涯路，此第一境也，衣带渐宽终不悔，为伊消得人憔悴，此第二境也，众里寻他千百度，蓦然回首，那人却在灯火阑珊处，此第三境也。”

02

1小时学会不打代码制作一个网页精美简历（1）

作者名：1_bit 简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。

03

IE浏览器Ajax请求时304错误

作者：matrix 被围观: 3,723 次发布时间：2014-04-24 分类：Wordpress | 11 条评论 »

02

Android补间动画基本使用（位移、缩放、旋转、透明）

本文讲述了Android补间动画基本使用（位移、缩放、旋转、透明）。分享给大家供大家参考，具体如下：

02

CSS伪类：CSS3鼠标滑过按钮动画

按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。

02

iOS 解决微信h5支付无法直接返回APP的问题

由于公司的业务需要，为了节省申请开通微信支付的时间和人力，公司决定使用微信h5支付。这样即节省了时间，同时以后所有的APP都能使用h5支付，既方便又快捷。

01

HTML、CSS、JavaScript学习总结

– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序

02

Android如何自定义EditText光标与下划线颜色详解

最近在写些小Demo复习基础，在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色，于是花了不少时间，看了不少博客，现在就来总结和分享一下收获，话不多说了，来一起看看详细的介绍：

05

css应知应会第二集

h-shadow v-shadow blur spread color inset

02

JetBrains出品，一款好用到爆的数据库工具，惊艳到了！！！

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。DataGrip是一款数据库管理客户端工具，方便连接到数据库服务器，执行sql、创建表、创建索引以及导出数据等。之前试用的客户端工具是dbvisualizer，但是在试用了DataGrip以后，我就决定抛弃dbvisualizer。

01

CSS3 圆角边框阴影浮动详解

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length;

02

如何实现这样一款代码图片生成器

要学好一门技术，最好的方式就是实践。上面这样一个代码图片生成器，就是当初为了学习 React 技术开发，特地找的一个功能不是很复杂，但是涉及的技术点又不至于太单一，于是找了这样一个工具型的项目（UI 参照 ray.so[2]），代码从零开始实现来检验自己学的知识是否牢固。

01

【CSS】禅意花园--心得分享

当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath

03

发现一款好用到爆的数据库工具，被惊艳到了！

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。

02

IDEA 的 DataGrip 太吊了

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。

03

关于无障碍设计的七件事

作者简介：Jesse Hausler，Salesfoce无障碍设计专家。旨在通过教育大家「通用设计」来实现为所有用户而设计。

03

程序员学什么才会被小姐姐问问题！！！

之前写的大都是偏向于长篇大论的技术文章，很多人看完心中毫无波澜，甚至还觉得有点浪费时间。于是我痛定思过，决心写一些贴近生活、有意思、篇幅短的文章。

01

【AI产品】产品小姐姐分析抖音背后的计算机视觉技术

抖音提供的功能很多，照片视频处理都不在话下，搞笑如各式贴纸、妆容术、换头换脸、图像风格迁移等，浪漫如“吹蒲公英”，严肃如后台的“鉴黄”，以下对抖音里与计算机视觉相关的产品功能点进行体验与分析。

04

如何快速上手基础的CSS3动画

说起CSS3动画，就必须说说 transform，translate，transition，animation这4个属性，transform主要定义元素的动作，比如旋转、倾斜、位移等，translate是transform里面的属性，用于2D/3D位移。后2个主要对动作进行描述，动画时间、速度曲线、次数等。

04

前端运用图片的技巧总结

原文 | https://ishadeed.com/article/image-techniques/

02

传统企业大数据应用难落地？说穿了还是因为这3点

在中国，从2013年大数据元年始，上至国家总理，下至普通平民，大数据的词汇已经深入人心，大家都觉得大数据是个好事，但基本上都是叫好不叫坐，尤其是在传统企业中。现今的中国，大数据在互联网、电商、金融等行业都得到了很好的发展应用，而在传统企业举步维艰，究其原因，一般都有如下几点问题：一是数据量太少的困扰。一般传统的大中型企业都已经进行了信息化的过程，也有了企业的完整的ERP系统，数据都已经采集到结构化数据库中，但这些结构化数据的量级和大数据PB级的量级相比，差之甚远。面对这种小量的数据，企业的DBA的解决方案

07

Refactoring UI

03

【Web技术】610- Web上的图片技巧

前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。

03

深度学习在自动驾驶感知领域的应用

本次直播课程是由深度学习资深研究者-杨阳博士从百度Apollo自动驾驶感知技术出发，讲解环境感知中深度学习的实用性与高效性。

02

基于iframe的跨域与更新父窗体地址栏的解决方案

管理平台前端页面需要在当前前端框架结构基础上，在顶级导航中增加两个模块：首页、运维管理模块，以此接入运维平台提供的页面。在访问到内部某个页面后，希望父窗体的地址栏跟随子窗体内部src，同时更新父窗体的地址栏，再刷新页面可以保持在当前访问的页面，同时可以分享链接。

CSS(三)

本篇将讲解盒模型以及外边距折叠的相关知识。 “CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。 CSS 将 HTML 文档中的每个元素视为一个”框”或”盒”，其中包含一系列不同的属性，用于确定它在页面上的显示位置。本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。在以后的章节中，我们将更多地了解 HTML 结构和 CSS 框模型如何组合以形成各种复杂的页面布局。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭