可以说页面是由一个个盒模型组成的，html文档中的每个元素都被描绘成盒模型；盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。css盒模型是区分方向的。请记住上右下左这个顺序。css中一些具有四项取值的属性（比如margin，padding等）都是按照这个顺序进行赋值的。
1、由于浏览器兼容的问题，盒模型分为标准（W3C）盒模型和IE盒模型。以下是两者的区别：
*两者最重要的区别是width宽度的定义不同；
标准（W3C）盒模型：
标准（W3C）盒模型的宽度width=content(内容)；
CSS3 BOX-Sizing的详解：
CSS3中新增了一个样式box-sizing，
box-sizing: content-box | border-box | inherit
inherit:规定从父元素继承box-sizing属性的值。
| box-sizing:content-box（W3C）;元素的width=content(内容); |
bor-sizing:border-box（IE6以下）元素的width=border(边框)+padding（内边距）+content（内容）
浏览器兼容问题：
box-sizing属性现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-,webkit内核需要加上-webkit-,presto内核需要加-o-,IE8加-ms-。
注意：
避免触发IE盒模型的方法是使用<!DOCTYPE html>声明，告诉IE采用W3C盒子模型即可。 |
现在我们讨论下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】）。
IE盒模型：
IE盒模型的width（宽度）=border+padding+content；
此处应该怎样具体的设置使用这两种模型呢？
通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果；
2、盒模型在不同情况下的表现：
<1>、在此我们先了解一下块级元素，行内元素两者的区别及，非替换元素，替换元素，根元素等知识点。
块级元素
块级元素包含行内元素与其他块级元素，可以创建更大的结构。
常用的块级元素有: div、ul、li、dl、dt、dd、p、h1~h6、blockquote
块级元素列表：html5中新添加标签：
（1）、<figcaption>：图文信息组标题，
<figcaption> 标签为 <figure> 元素定义标题。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
例如：
<figure>
<img src="/statics/images/course/pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figcaption>标签支持全局属性和事件属性。
（2）、<artical>:文章，
例子：
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (缩写为 IE9)在2011年3月14日21:00发布。</p> </article>
（3）、output：表单输出，
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output></form>
（4）、aside：侧栏内容，<aside>标签定义<artical>标签的额外内容。
（5）、footer：区段尾或页尾，
（6）、audio：音频播放
（7）、video：视频播放，
（8）、section：页面区段，
（9）、canvas：画布、绘制图形，
（10）、header：区段头或页头
<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
（11）、hgroup：标题组，
（12）、address：联系方式信息，
<address> 标签定义文档作者/所有者的联系信息。 如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。 如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。 <address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。注意：<address>标签不能用来描述邮件地址。
（13）、ol：有序列表，
（14）、p：行，
（15）、form：表单，
（16）、pre：预格式化文本，
（17）、blockquote：块引用
<blockquote>标签用来引用大段的内容块，处于该标签内的文本会独自分离出来，并且自动缩进。
（18）、h1-h6：标题，
（19）、table：表格，
（20）、dd：列表中条目描述，
<dd> 标签被用来对一个描述列表中的项目/名字进行描述。 <dd> 标签与 <dl> （定义一个描述列表）和 <dt> （定义项目/名字）一起使用。 在 <dd> 标签内，您能放置段落、换行、图片、链接、列表等等。
例子：
<dl>
<dt>coffee</dt>
<dd>block hot drink</dd>
</dl>
（21）、dl：定义列表，
（22）、div，hr：水平分割线
行内元素
所谓的行内元素就是：只占据它对应的标签的边框所包含内容的空间， 只能包含数据和其他行内元素。不会自动换下一行。
常用的行内元素有：a, b:此标签对文本加粗, span, img, input,strong,select：用于实现下拉列表,label：<label> 标签为 input 元素定义标注（标记）。em：此元素通常只是一个隐式和显示的对比,textarea
块级元素和行内元素之间的区别：
块状元素独占一行，默认情况下，宽度自动填满父元素宽度，行内元素默认是不分行，行内元素宽高不能由css决定，而是由内容决定的，行内元素的margin和padding的垂直方向上不产生边距效果，可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换。
空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img
水平格式化：水平格式化的属性有：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。
其中margin-left，width，margin-right可以设置为auto；
垂直格式化：
垂直格式化属性有：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。 其中margin-top，margin-bottom和height可以设置成auto 。
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。 如果正常流元素的height设置为auto，则其高度将会被设置为其内容元素的高度总和。
以上是我总结的有关盒子模型的知识。有错误的请大家改正，谢谢！
扫一扫
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
