最近根据张克军《近期面试感受》里的 demo 自己试着做了一个。里面是用 inline-block 给 li 做行内排列的，但如果不设置 word-spacing 的话有的 li 就会下沉，一开始我试着减少每个 li 的 width ，发现只要减少 1%～2% li 就不会下沉，排列有一点点的不居中而已，后来我搜索到国外一篇文章里有解释。如果无序列表是这样写的话：
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
每个 li 之间就有一个空隙，li 的总 width 就会比我们设置的要大，容易打破布局，比如我定义祖先元素的 width，每个 li 定义了 25%，那么我期望的是每行刚好容下四个 li ，但是如果不把 li 之间的空隙处理，就会有一个下沉，效果如下：
但是如果这样写就不会有问题
<ul>
<li>test</li><li>test</li><li>test</li><li>test</li>
</ul>
但是我们 coding 不习惯这样写，因此我们只要给ul设置一下 letter-spcing,word-spcing，给 li 设置回normal就好了，还有一些问题需要我们自己解决的，例如 li 默认的vertical-align是baseline，我们一般需要是top对齐
Block Formatting Contexts
为了弄明白块级格式化上下文，我专门用我蹩脚的英语试着翻译一篇文章。
原文是CSS 101: Block Formatting Contexts
下面是我的翻译：
块级格式化上下文是一个盒子，至少满足以下条件之一：
- float 的值不为 “none”
- overflow 的值不为 “visible”
- display 的值为 “table-cell”,”table-caption”,或者”inline-block”,
- position 的值不是 static 也不是 relative.
当谈到visual formatting model（用户代理如何处理视觉媒体文档树），块级格式化上下文是一个重要的角色。所以css作者对它与文档流，浮动，清除还有外边距之间的关系充分理解至关重要。
规范说了什么…
块级格式化上下文如何流动
定位方案已规范块级上下文属于正常的文档流。因此块级上下文的块被定为为页面流如块盒子，内嵌盒的内联格式，相对定位的块或内联盒子，和positioning of run-in boxes。简而言之，他们是页面流的一部分。
什么触发了块级格式化上下文
9.4.1节说以下条件将建立新的块格式化上下文
floats,
absolutely positioned elements,
inline-blocks,
table-cells,
table-captions,
elements styled with “overflow” ( any value other than “visible” )
但根据 CSS3级规范，块格式化上下文（“float根目录”在CSS3讲）被创建符合下列条件：
position 的值就不是 static 也不是 ralative
此定义意味着 position 为 fixed 建立一个新的块格式化的上下文。这不是在9.4.1节的一个错误，虽然 fixed 定位是绝对定位的子类别（9.6.1），在规范中引用绝对定位的元素（或盒）意味着元素的 “position” 属性的子类别值 “sbsolute” 或 “fixed” 。
请注意，display:table 没有建立本质的块级格式化上下文。但是，因为它可以生成匿名盒子， 匿名盒中的 (display：table-cell) 可以建立一个新的块级格式化上下文。换句话说，触发块级格式化上下文的是匿名框，不是 display:table. 这是作者应该牢记，因为即使两种风格建立新的块格式化上下文（或明或暗地），clear 作用在 display：table 和在 display:table-cell 是不相同的。
最后一个触发器是 fieldset 元素。奇怪的是，在 www.w3.org 上没有有关的信息直到 HTML5 规范。有浏览器的 bug（Webkit，Mozilla）提到这一点，但没有”官方“说明。事实上，即使在大多数浏览器中建立新的块格式上下文字段集，每节3.2（UA一致性），作者并没有认为这是理所当然的事：
CSS 2.1 没有定义的哪种属性适用于 form controls 和 frames，或如何使用 CSS 样式。用户代理可能适用于这些元素的 CSS 属性。作者建议，这种支持视为实验。未来的 CSS 水平进一步可能指定这。
块级格式化上下文作用是什么
块级格式化上下文正如它流动的方式，包含浮动，在9.4.1节他们阻止外边距坍塌和浮动不重叠：
在一个块级上下文中，盒子是一个跟着一个放置的，在一个包含块的顶部开始垂直。两个同级盒子的垂直距离确定通过 “margin” 的属性。块格式化上下文的情况下相邻块盒子之间的垂直边距崩溃。
在块格式化上下文中，每个盒子的左边缘与所包含块左外缘的接触 （格式设置从右到左，右边缘触摸）。这是真实甚至在场的浮动 （ 虽然一个盒子的线箱可能缩小由于浮动 ），除非盒子中建立新块格式上下文 （这种情况下盒子本身可能成为由于浮动变得更窄）。
足够的空间，这意味着什么在现实世界中？
块级格式化上下或多或少类似于任何的块盒子，除了这些重要的部分：
块级格式化上下文阻止外边距（margin）坍塌
相邻的块盒子垂直外边距坍塌，除非他们在同一块格式化上下文中。换句话说，如果相邻的块盒子不属于同一块级格式化上下文，他们的外边距就不会坍塌。
Example:
上述两者之间第一个蓝色方框，段落的底部和第二个蓝框的顶部外边距叠加（差距等于20像素，不是40像素），但由于最后的 DIV 创建一个新的块格式化上下文，第三个段落的外边距不坍塌，因此外边距不伸出所包含的容器，而成为这个容器的一部分。
注：在 IE6 中，没有明确的边距的DIV将无法添加的外边距。
当涉及到坍塌外边距，创建一个新的块格式化上下文与应用 border 或 padding 的元素作用一样。
块格式化上下文包含浮动
我相信你已经听说过的一句话，“一个 float 总是包含floats”，或者听到 FNE（浮动几乎所有）的方法。但是，这个方法的基础上是浮动是块格式化的上下文，所以用一个更好的说法叫，“块格式上下文始终包含浮动”。
例如：
第一个段落是一个浮动，所以它从文档流中脱离，从包含它的容器中坍塌，因此容器的背景没有显示。
第二个段落也是一个浮动。但是被包含在一个创建块格式化上下文的 DIV 中，因此容器包含子类的外边距。你也应该注意到，与第一个段落不一样，没有需要清除之前的盒子。这通常被称为“自我清除”，这使得块格式化上下文是一个正常文档流的一部分。
注意：clear 仅仅清除在同一块格式化上下文内的浮动
块格式化上下文不重叠浮动
这是我最喜欢。根据规范，块格式化上下文的 border-box 不能重叠浮动的 margin-box 在同一个块元素本身的格式上下文。这意味着浏览器在块格式化上下文创建隐式的 margin，以防止它们重叠的浮动 margi-box。正是由于这个原因，负边距应该没有影响当应用于块格式的上下文下浮动（ WebKit 和 IE6 有一个问题 – 这虽然测试案例）。
因为这种行为附属在 “border-box”（而不是 “margin-box”），在粉红色的框和它的兄弟元素之间的创造空间（例如，一个20像素的差距）作者要么需要：
float 上设置20像素的 margin
设置粉红色的框的 margin 大于浮动的宽度（即margin：0 220px）
是的，你使用了 220px（而不是20像素。因为它是 border-box 试图以适应之间的浮动，不是 margin-box。如果我说尝试，它是因为该容器将下浮如果没有足够的空间放置两个浮动。
换句话说，如果粉红色的盒子被赋予了宽度为400像素，该盒子应下浮时如果父容器是窄于770px（180px+180px+400px+10px）。作为一个侧面说明，在少数情况下，这种行为出现在 Firefox 中被打破（至少在v.3.5.9）（即，当上述构造是 body 的第一个child – 看测试用例）。
注：在粉红色的盒子和两个浮动盒子之间的空间是E6显示由于三个像素慢跑错误的。
hasLayout 相比块格式化上下文
正如你可能已经注意到，所有前面的例子中使用 overflow：hidden;zoom：1。而后者则在Internet Explorer（IE5.5/6/7）触发 hasLayout，前者声明创建新的块格式化上下文在现代浏览器中。这是因为这些渲染是非常接近（ CSS 规范的异同）。像块格式化的上下文，给出了一个布局的元素出现，以防止坍塌外边距，包含浮动，不重叠浮动的 。
属性/元素布局的声明
下面的列表表明，建立一个新的块格式化上下文的属性也触发 hasLayout，至少被现代浏览器支持的，除了在 IE<7溢出异常。
In Internet Explorer 5 and 6
position:absolute
position:fixed
float (any value other than ” none “)
display:inline-block
width (any value other than ” auto “)
height (any value other than ” auto “)
zoom (any value other than ” normal “)
writing-mode:tb-rl
-ms-writing-mode:tb-rl
In Internet Explorer 7
min-width (any value)
min-height (any value)
max-width (any value other than none )
max-height (any value other than none )
elements styled with overflow (any value other than visible )
overflow-x and overflow-y (any value other than visible )
zoom and writing-mode 专有的属性并没有验证。
IE 5.0 does not support zoom
内联元素的 height 和 width 触发 hasLayout，只有当这些属性适用于这些元素（即 IE6 的 quirks 模式）。
overflow-x and overflow-y 是 CSS3 盒模型模块的一部分
当布局流跟父布局流不一样时也会触发 hasLayout(i.e., rtl to ltr )
在 Quirks 模式和 IE7 模式（所有版本）
当元素的 overflow 被设为除 visible,table-cell 之外的值不会创建块格式化上下文
当元素的 overflow 被设为 visible，table-cell 时将会创建块格式化上下文。
始终有 layout 的 HTML 元素
在 Internet Explorer 中，这些元素 – 默认 – 布局。
<body> (as well as <html> in Strict mode)
<table> , <tr> , <th> , <td>
<img>
<hr>
<input> , <button> , <select> , <textarea> , <fieldset> , <legend>
<iframe> , <embed> , <object> , <applet>
<marquee>
收官
现代浏览器和Internet Explorer（<8）之间的问题，以减少风险，作者可能会选择放弃布局，建立新的块格式化上下文盒。这样的流式是相同的，同样的方式元素避免浮动，clear清除相同的浮动，其中期望margin崩溃。此外作者一定要注意使用的hasLayout触发器（例如width）等样式盒子，可能需要使该元素以及一个新的块格式化上下文。
wordpress主题设计报告
wordpress(以下简称 wp)，作为一个全世界范围内优秀的博客框架，其简单易用的特点使其在国外已经流行许久，在国内似乎只有专业人员用得比较多。近年来，用的人越来越多，作为个人独立博客，个人网站，中小团体的媒体平台。这也得益于个人新媒体的发展，每个人都可以发挥传统媒体的一些作用参与到社会活动中，这正是驱动我去研究这框架的直接动机.
wp 作为一个开源平台，搭配PHP+MYSQL+APACHE都是开源的，任何人都可以免费使用它。其体积小，只有 3M 多，源代码具有诗一样的优美。另外它拥有很多开发者给它开发的优秀主题和插件，当然如果你拥有一定的编程知识，也可以为自己设计一个具有个性的主题，这也是许多设计师和程序员使用它的原因之一。以下我就 wp 主题设计设计的一些领域进行分点概括.
一.前端技术驱动
● html:利用 XHTML 标准或 HTML5 标准构建文档布局，尽量从标记的语义性去编写符合 W3C 标准的网页.
● css:将使用标准的 CSS2.1 、适当的增加一些 CSS3 的效果设计网页样式，尽量减少图片的载入。做到网页的内容，表现，行为分开.
● javascript:在不影响网页的可读性的情况下，主题的一些行为将又 js 实现.
● 插件：一些针对个人的效果，将有插件实现.
二.界面设计
● 网页内容将涉及到字体的选择，使用，版面的文字排版，这是影响到网页主题可读性很重要的一步.
● 主题风格将使用到配色的知识，例如主色调，按钮的用色，logo的用色等.
● 主题的布局，是栅格布局还是流体布局，或是固定布局？这也是网页设计的一块知识.
三.作用和意义
● ”新媒体“这是一个很有创意的词，身在web2.0的时代，每个人或团体都可以发表自己观点或见闻，再也不受限传统媒体的限制，wp也是一个web2.0的产品.
● 在信息时代，每个人都在网上冲浪，大部分企业的办公都离不开互联网，每个人都很需要一个平台来管理的自己的虚拟资产，如果你愿意，你都可以拥有自己的个人网站来展现你的风采.
● wp是一个易用的产品，将可以驱动更多的中小团体或企业用它来展现自己的团体的或企业的资讯，而这付出的代价是很小的，将有益于信息的流通，加快信息化的历程.
对我来说，一个主题的设计，将是一个深入学习的机会。