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 开发，我现在的感想就是，这经验占比也太多了吧！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
