W3C的标准盒模型：

IE的传统盒模型：

实例：

1.W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

2.IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

用内外盒来说的话，W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度

下面开始我们今天的主题——CSS3的Box-sizing：

取值说明：

1.content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height

2.border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）

3.为了更能形像看出box-sizing中content-box和border-box两者的区别，我们先简单来看一人示例图，如下所示

从图上可以看出来，给W3C盒模型的元素设置的width属性值208px就只指定content的宽度，并不包括padding和border。而给IE盒模型的元素设置相同的width值208px是包涵了padding和border的

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

实例1：

上面主要介绍了box-sizing的理论知识，我们还是理论和实践结合吧，下面就一起先来看一个简单点的例子

上面效果图让大家很明显的区分开了content-box和border-box的区别了，为了更好的理解，我截了一份他们在Firebug下的一layout分析图

结论：Layout分析图再次证明了box-sizing:content-box是维持了W3C的标准Box Model，而box-sizing:border-box是维持了IE传统（IE怪异模式）下的Box Model。

那么box-sizing主要运用在哪些方面呢？我总结了一下，第一点就是我们布局上，第二点就是表单元素上。为什么呢？我想大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题，但当你在其中一个块加上padding或border时（哪怕是1px）整个布局就会完全打乱，因为其总宽度超过了父元素的宽度。第二点表单元素，前面我提到过，form有很多元素还是使用的IE传统Box Model，针对这两点，box-sizing将在其身上发挥强大的作用

实例2：box-sizing拯救我们的布局

为了能更好的说明问题，我们先来模仿一个两栏布局，先来看其HTML Code

简单的分析一下，这里把LayoutDemo的div当作我们页中的body，而div#header是页面头部，div#left是页面左边栏，div#main-content是页面主内容，div#footer是页面的页脚，下面我们来模仿一个960的布局(比例缩小一半)，我们加上平时布局的样式上去

到目前布局来说一点问题都没有，那是因为我们子元素宽度加起来刚好与元素的是相等，那么我们现在来变动一下，如果根据设计需要，每个块中内容都离边缘有10px的距离，那么我们先来看看基header,left,main-content,footer这几个块加一个padding:10px，看看有什么变化

上图清晰告诉我们，加了一个padding,恶梦就开始来了，header,footer撑破容器伸出去了，main-content也被掉到left的下面了。跟刚才当初的效果可是完全不一样的呀，有人可能会问，如果我不使用padding我只使用border什么怎么样呢？大家猜猜会怎么样？不用猜了，马上换个代码给大家看看，我们只要把刚才的padding注掉换成border，如下所示

上图是去掉了padding只加了10px的边框,同样把布局给打乱了。接着把padding和border同时加进去，反正都撑破了布局，就破罐子破摔。加上的效果如下

不上我说，大家都知道上图是因为加上了padding和border把布局给打乱了，下面主要看如何用box-sizing来修复这个撑破的布局，前面介绍了，上图中box-sizing是取了其默认值content-box，其Box Model完全符合W3C的标准，为了修复这样的布局，我们需要把Box Model改用IE传统下的解析，这样一加，我们给他加上下面box-sizing属性

CSS之Box-sizing相关推荐

html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
css圆角box(网上流行用b标签)
css圆角box备忘 <style type="text/css"> div.box{} div.boxtitle{background-color:#888; hei ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
css圆角box(宽度自适应)(百度知道挖出)
css圆角box(百度知道挖出) 1.css .zhidao_box { position: relative; width: 100%; } .zhidao_box .rg_1, . ...
php中框是什么代码,css中box是什么文件
css中box是指CSS盒子模型,即Box Model:在CSS中,"box model"这一术语是用来设计和布局时使用:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包 ...
css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性前提:使用如下属性,必须在父代设置displ ...
如何使用 CSS flex box 和 Javascript 设计棋盘
在这篇文章中,我将展示如何使用 css 和一些 JavaScript 来设计棋盘. 为此,你需要对 CSS Flex-box 和 nth-child() 属性有基本的了解. 所以让我们开始吧..... ...
CSS中BOX模型的属性有,在CSS中，下面不属于BOX模型属性的有（）。
摘要: 密技与对钥加比称密术相,下面密技钥加称密非对术(.模型属性... 密技与对钥加比称密术相,下面密技钥加称密非对术(. 化最年该重变民人均消大的出比费支省居是(,不属人口该省占4城镇,不属个消在 ...

CSS之Box-sizing

W3C的标准盒模型：

IE的传统盒模型：

实例：

1.W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

2.IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

用内外盒来说的话，W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度

下面开始我们今天的主题——CSS3的Box-sizing：

取值说明：

3.为了更能形像看出box-sizing中content-box和border-box两者的区别，我们先简单来看一人示例图，如下所示

从图上可以看出来，给W3C盒模型的元素设置的width属性值208px就只指定content的宽度，并不包括padding和border。而给IE盒模型的元素设置相同的width值208px是包涵了padding和border的

实例1：

上面主要介绍了box-sizing的理论知识，我们还是理论和实践结合吧，下面就一起先来看一个简单点的例子

上面效果图让大家很明显的区分开了content-box和border-box的区别了，为了更好的理解，我截了一份他们在Firebug下的一layout分析图

结论：Layout分析图再次证明了box-sizing:content-box是维持了W3C的标准Box Model，而box-sizing:border-box是维持了IE传统（IE怪异模式）下的Box Model。

实例2：box-sizing拯救我们的布局

为了能更好的说明问题，我们先来模仿一个两栏布局，先来看其HTML Code

上图是去掉了padding只加了10px的边框,同样把布局给打乱了。接着把padding和border同时加进去，反正都撑破了布局，就破罐子破摔。加上的效果如下

CSS之Box-sizing相关推荐

最新文章

热门文章