css min-height是什么意思
当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果。 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。
需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果:
父元素css: position: relative/absolute; left: 50%;
子元素css: position: relative; left: -50%;
但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样式,我们可以这样解决(假设最外层的div需要设置百分比高度样式):
html, body {
height: 100%;
}
.outDiv {
height: 50%;
}
不过这里有个需要注意的,若div里的内容超出了div的高度,在IE7+的浏览器是无法将div撑起来的(IE6则可以),如果要顾及这一点,可以使用min-height解决(当然也要考虑IE6不支持min-height的问题):
html, body {
height: 100%;
}
.outDiv {
min-height: 50%;
}
* html .outDiv {
height: 50%;
}
最后说通俗点,如果你想把高度设为百分比,那么父级必须设置高度。
min-height就是你的层的最小高度,如果该层中的元素内容高度小于这个高度,就将层显示为min-height的值,超过的话,就撑破层,使层的高度与元素内容高度一样。
max-height就是和这个相反了,不超出的话,层高度就和层中内容元素高度一样,否则就截断内容,显示max-height的高度。
line-height是行高,就是针对文本的,即一行文字的行高,是以该标签中文字大小font-size做比较的,例如line-height=200%;就是让行高是文字大小的两倍。(不同浏览器默认的行高不一样哈~~)
min-height就是你设置的这个元素的最小高度,因为在浏览器里容器的大小可能会被其中的内容撑大,设置这个属性后就能保证你的布局一直正确,因为它最小不会小于你设的那个值 max-height就上最大高度了。不过IE不支持这两个属性,max-width和min-width也一样。而line-height就是控制段落的行高,也就是每一行文字的高度。这些属性不难理解,只要多上机自己多实践下就会明白了。
min-height表示你的块元素的最小的高度
max-height则表示你的块元素的最大的高度!
这2个样式仅对IE 7.0和firefox2.0以上版本的浏览器有效!如果你是IE6.0就不起作用的!
line-height表示的是行高,可以影响文本,表单,图片等!
最小高度
标签:css,min,height