这应该是前端的基础了，但也是最容易引起困惑的地方。
同样给一个元素的宽度和高度都赋值50%, 往往会发现，只有宽度能够按照预期变成父元素的一半，高度还是没有变化。
#target {
width: 50%;
height: 50%;
}
这就牵扯到css 宽高 的计算方式了。
默认情况下，元素的 宽 取决于父元素，而 高 则是由其内容决定。
当我们用百分比来作为宽高属性的值时，这种默认行为对 宽 的计算没有问题，但 高 的计算就有问题了。
子元素：父亲，我的高是你的50%。
父元素：什么？我的高就是你的高，你的高又是我的一半，你可是把我搞糊涂了。
看见了吧，正是这种默认行为的差异，导致高度无法正常计算。
我们再深入的思考一下，为什么会有这样的差异
本质上，这种行为差异来源于人书写阅读的习惯。
想象一下，如果我们书写文字时，像古中国那样是从上到下竖排版，而不是现在这样从左至右，css 的宽高默认行为恐怕就要颠倒一下了。
这时候，用户浏览网页都是默认左右滚动窗口，那样浏览器的高度有个确定值，宽度则会根据内容动态变化。
正是因为横向排版，才导致了浏览器 宽高 的计算方式产生这种差异。
再往下思考，就要引入为什么横向排版成为主流这个话题了。
网友评论