实际上还是经常遇到的,网上也有好多答案,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?,今天小编就来说说关于代码line-height什么意思?下面更多详细答案一起来看看吧!

代码line-height什么意思(为什么你写的height:100)

代码line-height什么意思

实际上还是经常遇到的,网上也有好多答案,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?

百分比宽高的设定

按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的

完了我们先看看width:100%:

可以看到基本上宽度100%很容易就实现的,但是这里的height却不能设置成百分比的(该元素会消失看不见),这是为什么呢?

浏览器是如何计算高度和宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度(即页面并没有缺省的高度值),除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌(各个浏览器对于宽高的解析也不相同,大家可以自己搜索一下)。

解决

同时设置这两者的height,只设置其中一个是不行的:

这次希望大家从根本上知道这个问题,有什么别的问题也可以在评论区讨论或者私信我。