在css中，一个独立的css盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）四个部分组成，css盒子模型的概念非常容易理解。但是如果需要精确的排版，有的时候1px都不能差，这就需要非常精确的理解其中的计算方法。
并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质上都是以盒子的形式存在的。
一个盒子实际所占的宽度（或高度）是由”content+margin+padding+border”组成的，在css盒子模型中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的margin、padding和border。因此只要利用好这些属性，就能实现各种各样的排版效果。
其盒子模型效果如下图所示：
原创文章，转载请注明： 转载自谢锋的博客
每个单元格都可以设置各自的边框颜色、样式和宽度等属性，那么相领边框在合并时将以谁为准？在css2中规定其边框在合并时的标准如下
一：如果边框的border-sytle设置为hidden，那么它的优先级高于任何的其他相冲突的边框，何任边框只要有该设置，其它的设置都无效。
二：如果边框的属性中有none，那么它的优先级是最低的，只有在该边重合的所有元素的边框属性都是none时，该边框才会被省略。
三：如果重合的边框中没有被设置为hidden的，并且至少有一个不是none那么重合的边框中粗的优先级先于细的，如果几个边框的border-width相同那么样式的先级次序高到低依次为”double”、”solid”、”dashed”、”ridge”、”ouset”、”groove”、”inset”.
四：如果边框样式的其他设置均相同，只是颜色上有区别那么单元格的样式最优先，然后是行、行组、列、列组的样式，最后是表格的样式。（IE还没有执行上面这个规定）。
原创文章，转载请注明： 转载自谢锋的博客
本文链接地址: http://www.onlycss.cn/2009/11/border-unite-standard/
<div>标记早打HTML3.0时代就已经出现，但那时并不常用，直到css的普及，才逐渐发挥出它的优势。<span>标记打HTML4.0时才被引入，它是专门针对样式表而设计的标记。
div是个块级(block-lever)元素，相当于一个容器，可以容纳段落、标题、表格、图片、摘要等各种HTML元素。可以把<div>与</div>中的内容视为一个独立的对象，用于css的控制。声明时只需对<div>进行相应的控制，其中的各标记元素都会随之改变。<span>标记与<div>标记一样，作为容器标记被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素，从而形成独立的对象。div包围的元素会自动换行，而span是个行内元素，它的前后不会换行。span没有结构上的意义仅仅是应用模式，当其他行内元素都不合适时就可以使用span元素，此外span标记可以包含于div标记中成为它的子元素，而反过来则不成立，即span标记不能包含div标记。
例如在以下xhtml代码中：
<p>span标记在同一行</p>
<span><img src=”div-differ-span.jpg” /></span>
<span><img src=”div-differ-span.jpg” /></span>
<span><img src=”div-differ-span.jpg” /></span>
<p>div标记不在同一行</p>
<div><img src=”div-differ-span.jpg” /></div>
<div><img src=”div-differ-span.jpg” /></div>
<div><img src=”div-differ-span.jpg” /></div>
原创文章，转载请注明： 转载自谢锋的博客
块级元素（block level）与行内元素（inline）,可以说这两个是用css常遇到的两个家伙。
总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满的，这样的就叫“块级元素”。对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是“行内元素”。
例如在下面的xhtml代码中：
<ul>
<li >第1个列表的第2个项目内容，<strong>内容</strong>更长一些，目的是演示自动折行的效果。</li>
</ul>
在上面这段代码中，ul、li都是块级元素，以及我们经常用的div也是块级元素，strong、span，还有最常用的a，这些都是行内元素。
原创文章，转载请注明： 转载自谢锋的博客
本文链接地址:http://www.onlycss.cn/2009/11/block-differ-from-inline/
css标准文档流，简称“标准流”，指的就是在不使用其他的与排列和定位相关的特殊css规则时，各种元素的排列规则。
举个例子：
<body>
<ul>
<li>第1个列表的第1个项目内容</li>
<li>第1个列表的第2个<stong>项目内容</stong>，内容更长一些，目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li>第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
</ul> </body>
在上面这段代码中，其内容是body中有两个列表（ul），每个列表中又各有两上列表项目（li）。一共有四层，顶层为body，第二层为ul，第三层为li，第四层为文本。ul和li都为块级元素，而<strong>则为行内元素，从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点，而从css的角度来看，二者就有很多的区别，块级元素有属于自己的区域，而行内元素没有！标准流就是css规定的默认的块级无素和行内元素的排列方式。
从body标记开始，依次把其中的子元素放到适当的位置。如果一个html更为复杂，层次更多，那么也这个一样，直至所有的元素被检查一遍，分配到相应的区域。在这个过程，一个一个盒子自然地形成一个序列，同级别的盒子依次排列在父级盒子中，就像一条河流有干流和支流一样，这就是被称为“流”的原因。
原创文章，转载请注明： 转载自谢锋的博客
本文链接地址: http://www.onlycss.cn/2009/11/css-standard-doc-flow/
返回顶部 © All Rights Reserved. 谢锋的博客
