border-box相关内容

为什么填充会扩展弹性项目?

在下面的代码片段中,第一行有两个带有 flex-grow: 1 的 div.正如预期的那样,每个 div 占据屏幕的 50%. 向左 div 添加填充时,情况不再如此.有人能解释一下原因吗? body >div {高度:50px;显示:弹性;}身体 >div >div {弹性:1;box-sizing: 边框框;}#一个 {背景颜色:红色;}#b {背景颜色:绿色;}#C {填充:10 ..
发布时间:2021-12-31 12:48:05 前端开发

<input type="submit"/>之间不一致的框模型和 <input type="text"/>

我意识到 有一个 border-box 框模型,而 有一个 content-box 盒子模型.此行为存在于 IE8 和 FF 中.不幸的是,这使我无法将这种样式应用于大小均匀的输入: 输入,文本区域{边框:5px 实心 #808080;填充:0px;背景颜色:#C0C0C0;宽度:20em;} 这是 IE 和 FF 的正确行为吗?有没有跨浏览器的方 ..
发布时间:2021-12-21 18:02:05 前端开发

尽管单元格大小调整,但表格单元格仍溢出:border-box

我想在表的单元格中添加填充,但这会导致表内的文本,输入等溢出.从其他Stack Overflow讨论中,我收集到答案是设置 box-sizing:border-box ,但这对我不起作用. 下面是一个说明问题的最小示例. * {框大小:border-box;-webkit-box-sizing:边框框;-moz-box-sizing:边框框;}桌子,,td {边框:1px纯黑色;填充 ..
发布时间:2021-05-15 18:42:44 前端开发

为什么选择框大小:border-box仍显示宽度为0px的边框?

在CSS中使用box-sizing:border-box时,我假设元素的总宽度将在其"width"值中定义.因此,如果我说分隔的宽度是20px,右边框是10px,则我将得到一个占用20px空间的框,其中一半是右边框.将其也推到我将宽度设置为10px和右边框的位置,例如: #box{ overflow: hidden; width: 10px; box-sizing: ..
发布时间:2020-07-19 04:29:07 前端开发

使用box-sizing:border-box来计算百分比填充的奇怪行为:

使用小提琴来设置测试用例: http://jsfiddle.net/5M7X7/2/ 我有一个宠物项目,展示了一些border-box布局.我看到分层块元素具有奇怪的行为(至今仍是跨浏览器一致的). 根据示例,共有3个div:第一个div具有固定的高度和宽度,其子级具有100%的高度和宽度,加上两侧的%填充,其子级具有100%的高度和宽度. 使用宽度计算垂直填充.这是border ..
发布时间:2020-05-23 20:20:50 前端开发

为什么填充扩展一个flex项目?

在下面的代码片段中,第一行有两个div,其中 flex-grow:1 。正如所料,每个div占用了屏幕的50%。 在向左div添加填充时,情况不再是这样。有人可以解释为什么吗? body> div {height:50px; display:flex;} body> div> div {flex:1; box-sizing:border-box;}#a {background-colo ..
发布时间:2018-06-14 18:27:49 前端开发

* {Box-sizing:border-box; }:到边框框还是不边框框所有元素?

我将开始开发一个新网站,我准备好处理浏览器用来计算元素宽度和高度的不同方法( box model stuff )。不知怎的,它在我心中:如果我只是应用盒子大小到网站中的所有元素如何? 我是其中一个相信 box-sizing:border-box; 是CSS中最好的命令之一,具有所有的限制。但是,这些限制是那些让我想知道我是否应该应用 box-sizing 到所有元素的限制: * {- ..
发布时间:2017-02-18 22:09:08 前端开发

border-left-width返回jQuery中的NaN

我忙于编写一小段代码,应该允许跨浏览器使用边框盒子模型。到目前为止基本功能工作正常,但我不能得到工作的边际。它应该适应可用的空间,但控制台返回一个NaN,我不知道它来自哪里。 这里是一个小提琴。 console.log甚至不记录任何东西,我不知道为什么。非常感谢任何帮助。 解决方案 在你的小提琴的很多部分你有这种模式: ($(this).css(“border-left- ..
发布时间:2017-02-13 09:26:01 前端开发

什么导致“用户代理样式表”使用“边框”而不是“内容盒”盒尺寸?

我的印象是,浏览器(如Safari,Chrome和Firefox)中的用户代理样式表是浏览器内部的,不能直接修改(而是需要重写样式属性)。 / p> 由于各种网站(包括Mozilla的),Webkit和Mozilla的 box-sizing 属性的默认值为“内容框“。 我在一个相当简单的在各种浏览器中查看的虚拟页面上测试了这个页面。 问题是,在我们的生产应用程序的两个页面上,默认 ..
发布时间:2017-02-06 13:09:18 前端开发

* {Box-sizing:border-box; }:到边框框还是不边框框所有元素?

我将开始开发一个新网站,我准备好处理浏览器用于计算元素宽度和高度的不同方法(框模型素材)。不知怎的,它在我心中:如果我只是应用盒子大小到网站中的所有元素如何? 我是其中一个相信 box-sizing:border-box; 是CSS中最好的命令之一,具有所有的限制。但是,这些限制是那些让我想知道是否应该应用 box-sizing 到所有元素的限制: * {-moz-box-sizin ..
发布时间:2017-01-20 01:35:02 前端开发

Chrome对比大小调整:显示中的边框:表格

我使用 display:table 做一个小的双窗格布局。对于间距(也从背景图像),我使用 padding 。因为我需要孩子从可用空间有一个精确的宽度:50%(考虑到父 div ),我使用 box-sizing:border-box 。 在Chrome中, box-sizing:border-box 或者甚至 -webkit-box-sizing:border-box 忽略。 我做了一 ..
发布时间:2017-01-19 08:27:02 前端开发