box-sizing

说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦，几户每个需要定义尺寸的 box 都要思量一下：是否触发了“盒模型 bug”？ 同时，由于另一撮浏览器对标准的遵从，我们在精确定义一个在有限空间内显示的 box 时，也需要计算一下：留给它的空间只有那么大，刨去 border 和 padding，我们该把它的 width 写成多少呢？ 这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，它具有“content-box”和“border-box”两个值。 定义 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准； 定义 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 相同； 为什么说这个属性“迟来”呢？IE 对于盒模型的解释固然不符合 W3C 的规范，但是也有它的好处：无论如何改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。而在 Firefox 等现代浏览器下，如果我们要改变一下 padding 的值，就不得不重新计算 box

适用范围：所有接收width和height的元素 默认值：content-box 取值：content-box | border-box 理解 content-box: padding和border不被包含在定义的width和height里面，对象的实际宽度等于设置的width的只和border，padding之和， element width = width + border+padding 2. border-box: padding和border包含在定义的width和height里面，对象的实际宽度就是width，即时定义了border和padding也不会改变对象的实际宽度，element width = width ps: border-box属性表现为怪异模式下的盒模型 来源： oschina 链接： https://my.oschina.net/u/1037170/blog/541861

box-sizing 是 CSS3 的box属性之一。一说到CSS的盒模型（ Box model ）我想很多人都会比较烦，特别是对于新手，然而这个 Box model 又是我们CSS运用中比较重要的一个属性。那么 CSS3 的 Box-sizing 跟盒模型有什么关系呢？第一句话就说了，Box-sizing是 CSS3 的Box属性之一，那他当然也遵循CSS的 Box model 原理，为了能更好的学习和理解这个 Box-sizing 属性，我们有必要先了解一下CSS中 Box model 的原理。 CSS中B ox model 是分为两种，第一种是 W3C 的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；他们不同之处呢？两者的计算方法不一至： 1、W3C的标准Box Model: /盒尺寸计算（元素空间尺寸） Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /盒尺寸计算（元素大小） Element Height = content height + padding +

恍然大悟又 --可以用CSS3的box-sizing来设置下文中的"正常盒子"和"不正常盒子/怪异盒子" * 正常盒子 box-sizing:content-box * 不正常盒子 box-sizing:border-box; 缘由 我们经常要写一个<input type="text"><input type="button">的搜索框,因为已经写习惯了,总是拿来就写,没有注意一些特殊的地方.今日,女神学CSS的时候遇到问题,拿来问我,一开始我觉得就那样写就是了,不那样写肯定出问题,但是细究之下,毛骨悚然... 几个值得注意的地方 我们知道,两个input之前是有间隙的,所以,如果不想让他俩手拉手,而是肩并肩的挨着的话,你需要这样写两个挨着的input <input type="text"><input type="button"> <!--也可以这样--> <input type="text"><!--这行注释拉近了他们的距离/笑 --><input type="button"> input[type = button/reset/submit]这三个家伙是有默认的padding,border,margin值的.但是一般的我们在开始都是清除默认样式,例如最简单的这样 *{ padding:0; margin:0 } 这里就清除了button三兄弟的默认padding值

内容区域（content area ）是包含元素真实内容的区域。 内边距区域（padding area） 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片，这些样式将会延伸到padding上。 边框区域（border area ）是包含边框的区域，扩展了内边距区域。 外边距区域（ margin area） 用空白区域扩展边框区域，以分开相邻的元素。 1 /* 关键字 值 */ 2 box-sizing: content-box;/*默认值*/ 3 box-sizing: border-box; 4 5 /* 全局 值 */ 6 box-sizing: inherit; 7 box-sizing: initial; 8 box-sizing: unset; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 Chrome浏览器box-sizing默认是content

@charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,

在css盒模型默认的定义里，对一个元素设置width和height只会应用到该元素的的内容区，如果这个元素有任何的border或padding，绘制到屏幕上的宽度和高度会加上border和padding，所以当你调整一个元素的宽度和高度时要时刻注意这个元素的边框和内边距，特别是在做响应式布局时，这个特点更为明显。 box-sizing有两个属性值： 　　① content-box：默认值，标准盒子模型。width和height只包含内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。 计算公式： 　　　　width = 内容的宽度 　　　　 height = 内容的高度 　　② border-box： width和 height 属性包括内容，内边距和边框，但不包括外边距。注：border-box不包含margin。 　　计算公式： 　　　　width = border + padding + 内容的宽度 　　　　height = border + padding + 内容的高度 示例 效果 来源： https://www.cnblogs.com/cyfeng/p/11907378.html

该属性的两个值：content-box ， border-box，默认为content-box 1.默认情况，给div设置的宽高就是内容区的大小，不包括padding和border 2.border-box时，div的宽高等于border+padding+content 来源： https://www.cnblogs.com/lzqiao/p/11794249.html

比如设计图盒子大小为850px*170px，由前端页面浏览器显示出来即会被子级盒子多出来2px，清除多出来2px的解决办法是 在style标签里面最上面即可 *{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */火狐浏览器 -webkit-box-sizing:border-box; /* Safari */浏览器兼容问题 } 来源： https://www.cnblogs.com/zmxyl-1437/p/11793017.html

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden). I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box." I tested this on a rather simple dummy page viewed in various browsers. My problem is that on two pages in our production application the default