通过设置box-sizing的值为border-box让元素盒子不会被撑大

已于 2023-03-01 13:43:42 修改
阅读量1k 收藏 1
点赞数 1
文章标签： css html 前端
于 2023-03-01 13:42:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d81895606/article/details/129279614
版权

CSS盒子模型

CSS盒子模型描述了HTML元素的基本布局规则, 这个盒子由外边距, 边框, 内边距, 内容, 由外到里四部分组成, 通过这几个属性可以控制元素之间/元素和内容之间的相对位置.

img

  • margin, 外边距大小.

  • border, 边框大小.

  • padding, 内边距大小, 边框与内容之间的距离, 设置一个值默认是设置四个方向所有的内边距; 设置两个值第一个值表示上下外边距, 第二个值表示左右外边距; 设置四个值按上右下左的顺序分别进行设置, 如果需要单独设置可以通过padding-left/right/bottom/top; border, margin也是一样的.

设置边框, 主要设置的是边框粗细border-width, 颜色border-color, 线型border-style(实线solid, 虚线dashed, 点线dotted), 设置元素的边框和内外边距会撑大原有元素大小, 容易破坏页面的整体格式,

img

img

我们可以通过设置box-sizing的值为border-box来改变这种特性, 让元素盒子不会被撑大.

img

img

———————————————— 原文链接：https://blog.csdn.net/Trong_/article/details/129240868
渴望成为python大神的前端小菜鸟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。 CSS Code复制内容到剪贴板 box-sizing: content-box|border-box|inherit;   值 描述 conte
CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法
weixin_44341110的博客
07-04 1964
CSS中解决弹性盒子的弹性子元素被文本撑开影响原来宽或高的解决办法
css中的 box-sizing: border-box
m0_51354601的博客
12-11 2851
box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。
CSS系列之内边距 padding
老__L的博客
01-26 6565
本文主要介绍CSS的padding、padding-bottom、padding-left、padding-right、padding-top属性。内边距是指边框与内容之间的距离，内边距不允许有负值。
css中神奇的盒模型-----（box-sizing：border-box）
Amelian的博客
11-26 3450
背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。 注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 box-sizing属性用于更改
CSS3盒子模型border和padding不会撑开盒子
m0_61547956的博客
04-03 1629
box-sizing指定盒子模型，有两个值分别是content-box、border-box/ box-sizing:border-box 这样指定了padding或border后，盒子不会变大。设置了之后，盒子就不用减去border或者padding值了。 之前默认的content-box，盒子大小是padding+border+width。 ...
CSS3 盒子设置border和padding不撑开盒子
西柚2015地信小白GISer
05-05 6532
普通的盒子模型我们设置border会将盒子撑大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
关于box-sizing的全面理解
12-13
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; ...
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
div因为padding属性被撑开
lyx058019的博客
07-26 1018
使用box-sizing属性来控制元素的尺寸计算方式。div的padding被撑开是因为在CSS中，元素的padding（内边距）是包含在其总尺寸内的。也就是说，如果你给一个div设置了padding，那么这个padding会在元素的宽度和高度之间添加空间，从而使元素的总尺寸增加。将div的border设置为其尺寸的一半，这样就可以达到padding的效果，但不会增加元素的总尺寸。以上是几种解决div的padding被撑开的方法，你可以根据具体情况选择适合的方法。
内边距、边框撑大盒子问题
weixin_63712639的博客
11-26 1964
解决内边距撑大盒子模型的问题
加padding、border后盒子被撑大的解决方法
oops
05-16 6268
加上padding和border后盒子被撑大了怎么解决？ 关于盒子被撑大，这就要涉及到盒子模型的知识了，一个盒子由内容、padding、border和margin组成，导致盒子被撑大的主要原因就于padding和border了。 这里有两种解决办法 一、修改盒子的宽高给多少的padding和border值就减去多少的盒子长度，可以解决撑大盒子问题，不过这个方法不太推荐。 二、给盒子添加一条属性可以完美解决盒子撑大问题 “box-sizing” .box { box-sizing:..
CSS中box-sizing: border-box
qq_42009005的博客
04-21 451
CSS中box-sizing: border-box 首先我们先来看一下默认的盒子模型 <div id="">我好累啊</div> div { width: 200px; height: 200px; background-color: #005AA0; border: 10px solid red; padding: 20px; margin: 20px; box-sizing: content-box;//默认的样式,可以
input输入框超出父盒子问题解决
qq_39111074的博客
09-10 1538
问题： 进行网页编辑时，一个盒子里面装了一个input输入框，input输入框给的是父盒子宽度的100%，但是页面中显示超出了父盒子的宽度，如下图，绿色的是给父盒子的背景色： 解决方法： 检查发现是input类型问题，默认input类型是 “text” , 修改为 “search” 后，宽度就正常和父盒子一样宽了： 修改后： ...
css今日学习：弹性盒子
m0_46387864的博客
04-27 1151
弹性盒子（flex） 描述：通过两个轴控制容器内的项目,默认x轴为主轴，y轴为副轴 常用属性： 在容器上的属性 flex-direction 控制主轴方向：默认x轴是主轴 属性： column 纵向，上到下 column-reverse 反纵向，下到上 row 横向，左到右 row-reverse 反横向，右到左 flex-wrap 控制超出的项目进行换行。 属性： nowrap 不换行，项目会等比缩放在一行 wrap 换行，按容器的副轴的宽度等分 wrap-reverse 反wrap换行 flex-flo
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 688
行内元素
CSS盒模型 不会撑大盒子的特殊情况
最新发布
Ssrpn0809的博客
05-28 138
2.此时给子盒子设置左右的padding或左右的border，此时不会撑大子盒子。但是设置上下的padding和上下的border 还是会撑大子盒子。1.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度。
边框盒子 box-sizing 的 content-box 和 border-box属性
qq_45288176的博客
06-15 3696
对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。图示：.........
给所有盒子设置box-sizing: border-box;
02-22
当设置为border-box时，元素的宽度和高度将包括其边框和内边距，而不会被内容所撑开。 在默认的盒模型中，元素的宽度和高度只包括内容的宽度和高度，而边框和内边距会增加元素的总尺寸。这意味着如果给一个元素设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值