CSS 中有趣的百分比值和元素之间莫名其妙的间距

CSS中有趣的百分比值

CSS 中很多值都可以用百分比表示，这次只谈谈 height，因为上一篇文章让我想起某个曾遇见的问题。

有次在学习响应式布局（Responsive Design），发现里面的数值大多是用 em 定义的，而百分比和 em 很相似，用 W3CSchool 的话说，height: xx%; 基于包含它的块级对象的百分比高度 那么晚了，懒得写了，重点就是，如果要使目标元素的百分比高度值生效，那么它的包含对象也需要显式定义一个百分比值，没特殊需要的话就是 height: 100%;。因为大鱼吃小鱼，小鱼吃虾米。所以 html、body 也需要定义这个值。

元素之间莫名其妙的间距

以前用 li 元素包含 a 元素来制作导航条，但是无论如何也去不掉他们自己的那一两个像素的间隔。margin、padding 等都设为零后还是存在间距。后来搜索了才发现，是 HTML 文档的原因，和 CSS 怎么写无关。

下面举个栗子。

<ul class="nav">
   <li><a>HOME</a></li>
   <li><a>HOME</a></li>
   <li><a>HOME</a></li>
   <li><a>HOME</a></li>
</ul>

键盘敲第一个后复制粘贴的，在网页上写文章，懒得用鼠标了，四个 HOME 就四个吧。

设置 margin、padding 为零、添加边框后，会发现边框之间存在一两个元素的距离。

原因我也搞不懂，目测是浏览器的渲染方式就这样的，它会把 HTML 文件中标签与标签的空格显示出来，按理不应该这样对吧，因为无论中间隔了多少空格，就显示固定的像素。

解决办法有几个，我只记得两个了。

第一个

<ul class="nav"><li><a>HOME</a></li><li><a>HOME</a></li><li><a>HOME</a></li><li><a>HOME</a></li></ul>

把 HTML 写成上面的形式，显然这不是人道的做法，那样还怎么看？所以请看第二个

第二个

<ul class="nav"><!--
   --><li><a>HOME</a></li><!--
   --><li><a>HOME</a></li><!--
  --><li><a>HOME</a></li><!--
  --><li><a>HOME</a></li>
</ul>

就这样吧，肚子饿了，去煮个面先。

噢，最后一点，对于 web 开发，我现在的感想就是，这经验占比也太多了吧！

CSS 中有趣的百分比值和元素之间莫名其妙的间距

原文：http://www.cnblogs.com/ferrum/p/3550192.html