border-box相关内容
在下面的代码片段中,第一行有两个带有 flex-grow: 1 的 div.正如预期的那样,每个 div 占据屏幕的 50%. 向左 div 添加填充时,情况不再如此.有人能解释一下原因吗? body >div {高度:50px;显示:弹性;}身体 >div >div {弹性:1;box-sizing: 边框框;}#一个 {背景颜色:红色;}#b {背景颜色:绿色;}#C {填充:10
..
我意识到 有一个 border-box 框模型,而 有一个 content-box 盒子模型.此行为存在于 IE8 和 FF 中.不幸的是,这使我无法将这种样式应用于大小均匀的输入: 输入,文本区域{边框:5px 实心 #808080;填充:0px;背景颜色:#C0C0C0;宽度:20em;} 这是 IE 和 FF 的正确行为吗?有没有跨浏览器的方
..
我想在表的单元格中添加填充,但这会导致表内的文本,输入等溢出.从其他Stack Overflow讨论中,我收集到答案是设置 box-sizing:border-box ,但这对我不起作用. 下面是一个说明问题的最小示例. * {框大小:border-box;-webkit-box-sizing:边框框;-moz-box-sizing:边框框;}桌子,,td {边框:1px纯黑色;填充
..
在CSS中使用box-sizing:border-box时,我假设元素的总宽度将在其"width"值中定义.因此,如果我说分隔的宽度是20px,右边框是10px,则我将得到一个占用20px空间的框,其中一半是右边框.将其也推到我将宽度设置为10px和右边框的位置,例如: #box{ overflow: hidden; width: 10px; box-sizing:
..
使用小提琴来设置测试用例: http://jsfiddle.net/5M7X7/2/ 我有一个宠物项目,展示了一些border-box布局.我看到分层块元素具有奇怪的行为(至今仍是跨浏览器一致的). 根据示例,共有3个div:第一个div具有固定的高度和宽度,其子级具有100%的高度和宽度,加上两侧的%填充,其子级具有100%的高度和宽度. 使用宽度计算垂直填充.这是border
..
我有3个嵌套div:
.inner div是绝对位置,它们每个都有1px边框: .outer { width:50%; height:100px; border:1px纯红
..
在下面的代码片段中,第一行有两个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
..
正如标题所说: $ b .cnr {display:flex;身高:100%背景颜色:灰色;位置:绝对; border:1px red solid;}。cnr> div {box-sizing:border-box;填充:1em;边界:1em固体; overflow:hidden;}。cnr> .closed {width:0; flex-basis:0; flex-shrink:1; f
..
在第一行中,有两个div flex-grow:1 。正如所料,每个div占用了屏幕的50%。 当向左边div添加填充时,不再是这种情况。有人可以解释为什么吗? body> div {height:50px; display:flex;} body> div> div {flex:1; box-sizing:border-box;}#a {background-color:red;}#b
..
我将开始开发一个新网站,我准备好处理浏览器用来计算元素宽度和高度的不同方法( box model stuff )。不知怎的,它在我心中:如果我只是应用盒子大小到网站中的所有元素如何? 我是其中一个相信 box-sizing:border-box; 是CSS中最好的命令之一,具有所有的限制。但是,这些限制是那些让我想知道我是否应该应用 box-sizing 到所有元素的限制: * {-
..
我有以下代码: * {box-sizing:border-box;} container {width:100% ; max-width:60rem; / * 960 * / margin:0 auto;}。item {width:100%; overflow:hidden; margin-bottom:5rem; / * 80 * /}。item__img,.item__info {wi
..
此问题是由于此相关问题的修复建议而产生的。 我有3个嵌套的div:outer,inner和item。 ; div class =“outer”>
给定以下基本CSS: .outer { width:50%; hei
..
我忙于编写一小段代码,应该允许跨浏览器使用边框盒子模型。到目前为止基本功能工作正常,但我不能得到工作的边际。它应该适应可用的空间,但控制台返回一个NaN,我不知道它来自哪里。 这里是一个小提琴。 console.log甚至不记录任何东西,我不知道为什么。非常感谢任何帮助。 解决方案 在你的小提琴的很多部分你有这种模式: ($(this).css(“border-left-
..
请考虑以下示例:
..
我使用的是 box-sizing:border-box 模型。当最小宽度的 inline-block 元素包含在 inline-block 元素(容器)中时,容器太宽Internet Explorer 9.按预期在FF 10.0,Chrome 17.0,Opera 11.5和Safari 5.1.2中运行。 请参阅此jsfiddle 顺便说一下,宽度 解决方案 任何想法?嗨遇到
..
我的印象是,浏览器(如Safari,Chrome和Firefox)中的用户代理样式表是浏览器内部的,不能直接修改(而是需要重写样式属性)。 / p> 由于各种网站(包括Mozilla的),Webkit和Mozilla的 box-sizing 属性的默认值为“内容框“。 我在一个相当简单的在各种浏览器中查看的虚拟页面上测试了这个页面。 问题是,在我们的生产应用程序的两个页面上,默认
..
我将开始开发一个新网站,我准备好处理浏览器用于计算元素宽度和高度的不同方法(框模型素材)。不知怎的,它在我心中:如果我只是应用盒子大小到网站中的所有元素如何? 我是其中一个相信 box-sizing:border-box; 是CSS中最好的命令之一,具有所有的限制。但是,这些限制是那些让我想知道是否应该应用 box-sizing 到所有元素的限制: * {-moz-box-sizin
..
我使用 display:table 做一个小的双窗格布局。对于间距(也从背景图像),我使用 padding 。因为我需要孩子从可用空间有一个精确的宽度:50%(考虑到父 div ),我使用 box-sizing:border-box 。 在Chrome中, box-sizing:border-box 或者甚至 -webkit-box-sizing:border-box 忽略。 我做了一
..
我意识到 有一个 border-box , 有一个 content-box 框模型。此行为存在于IE8和FF中。不幸的是,这阻止了我将这种风格应用于均匀大小的输入: input,textarea { border:5px solid#808080; padding:0px; backg
..
在表单上,我有一个选择和两个输入字段。这些元件是垂直对准的。不幸的是,我不能得到这些元素的宽度相等。 这是我的代码: value1 value2
..