检验你的前端基础——Sit the test
最近有时间，想把酝酿的几篇博客都写出来，今天前端小学生带着10个问题，跟大家分享一下学习CSS的一些体会，我觉得想学好CSS，必须保持一颗好奇心和刨根问底的劲头，而不是复制粘贴，得过且过。本人能力有限，这篇文章从构思加完成用了四五天，如果你和我一样是前端小白，不妨仔细斟酌体会，以期领悟到一些东西；如果你是业界大牛，也请你驻足随意瞄上两眼，把言辞内容不妥的地方指出来，我们共同讨论。 时刻保持好奇心 第一问：当margin的值为百分比形式时，为什么浏览器会根据父容器宽度得出计算值？ 在我之前一篇博客 检验你的前端基础——Sit the test 中，聊到了margin值为<percentage>时的计算方法。假如有一个父容器宽度400px，高度600px，其子元素设置margin:20% 20%后的计算值应该为“margin:120px 80px”还是“margin:80px 80px”呢？按照那篇博客中的理论，第二个是正确答案。但是在今天这篇文章中，我给出的答案是第一个肯定错，第二个也不一定对。一个符合W3C标准的浏览器会根据父容器的宽度进行计算，但是这个仅限于书写模式为横向的时候。因为在横向排版时，宽度“有迹可循”，可以把浏览器宽度作为参考，但是高度是不固定的，所以margin百分比值在计算时会参考父容器的宽度。 当书写模式改为纵向，其计算参考便会变为父容器的高度了。