box-sizing -- 盒模型

　　项目开发中，在浏览同事的代码，发现他经常用一个属性--box-sizing，很好奇是什么，于是乎，上网查阅资料学了起来。
　　首先我们先复习一下盒模型的组成：一个div通常由 content(内容) margin padding border组成。

　　
　　浏览器有两种盒模型：w3c说的标准模型和ie下的传统模型。也就是css3中box-sizing中对应的属性值。

　　拿盒子的尺寸来说: box-sizing
　　　　w3c的标准模型：　content-box　　　　　
　　　　　　盒子的高度= conent的height padding margin border 　
　　　　　　盒子的宽度= content的width padding margin border
　　　　ie下的传统模型： border-box
　　　　　　盒子的高度= content的height margin (height 包含了padding border content)
　　　　　　盒子的宽度= content的width margin （width 包含了padding border content）

　　看这理论感觉很乱，动手实践才是真道理。
　　　　看一下w3下的标准模型：box-sizing：content-box

　　　　这意思就是你给div本身的宽度和高度是100px，但是因为margin，padding和border的添加，导致这个div的宽度和高度随之变大。可以想象一下，一排上正好可以放5个等大的div，但是半路上给一个div添加了margin或padding或border，一排还能放下5个div吗，也许是3个或者2个，总之放不下5个。　　　　
　　box-sizing:content-box 是浏览器默认的样式，即使不添加，也会遵遁content-box。
　　看一下ie下的传统模型： box-sizing：border-box

　　　　　　这意思就是你给div的高度和宽度是100px，不管你加了padding和border，其宽度和高度不会改变，改变的是里面（content）内容的高度和宽度。举个例子：一排上可以放5个等大的div，你给其中的一个div添加了padding或者border（没有margin），这一排上还是5个div，只不过你添加padding或border的div里的内容缩小了。

　　关于这两者的区别，只要仔细观察一下layout图，就会恍然大悟，原来是这样啊。在项目开发中，我们经常遇到一行上放等大的li时，只要添加了padding或者border时，容易往下排，右边一片空白，我们不得不调一下li的height和width，现在不用啦，通过box-sizing：border-box就可以直接解决了。
　　box-sizing：border-box主要用于：布局以及表单元素，表单中不同类型type的默认宽度不一致，可以通过border-box解决。

　　兼容性：
　　box-sizing是css3的新属性，会有兼容性问题。

　　　　
　　　box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀。例如：

div{-moz-box-sizing: content-box;  -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box;
}div {-moz-box-sizing: border-box;  -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

　　css3的计算属性calc（）的意思和box-sizing=border-box一样。简单用box-sizing，复杂可以用calc（）

　　另外，有一位大神对box-sizing的理解以及讲解特别好，我也是看他的文章才搞明白的，如果想了解更深，可以去访问他的文章 http://blog.sina.com.cn/s/blog_877284510101kt87.html

box-sizing -- 盒模型相关推荐

什么是盒模型(Box Model)
什么是盒模型(Box Model) 盒模型规定了网页元素如何显示以及元素间相互关系,它本质上是一个盒子,封装周围的HTML元素.css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区 ...
CSS2.1 盒模型
8 Box model盒模型 8.1 Box dimensions 盒子的大小 Each box has a content area (e.g., text, an image, etc.) and ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
网页中的盒模型css属性,详解CSS中的Box Model盒属性的使用
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
盒模型、盒子模型、框模型（box model）
盒模型.盒子模型.框模型(box model) --css将页面中的所有元素都设置为一个矩形的盒子 --将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置 --每一个盒子都由 ...
css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...
CSS之盒模型（九）
CSS 盒模型 1.盒子模型简介 2.盒子模型属性 2.1.width和height属性 2.2.border边框属性 2.3.padding内边距 2.4.margin外边距 2.5.盒子模型占位计 ...
【web前端HTML5+CSS3】03CSS--layout（布局）之盒模型
目录 1.文档流 2.盒模型 3.盒模型--边框 4.盒模型--内边距 5.盒模型--外边距 6.盒子的水平布局 7.盒子的垂直布局 8.外边框的折叠 9.行内元素的盒模型 10.默认样式 11.练习 ...

box-sizing -- 盒模型

box-sizing -- 盒模型相关推荐

最新文章

热门文章