min-height、min-width、max-width、max-height的理解中的重点
在学习css的min-height、min-width、max-width、max-height这四个属性时,又遇到了一些问题和疑惑。参考了以下三个博客后把它们搞清楚了。
如何理解CSS的min-height、min-width、max-width、max-height
【css】max-height,min-height,height一起使用时,优先级问题
min-height和min-width的用法总结
一、min-width不生效的问题
<div class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>
.test{
min-width: 100px;
height: 60px;
background-color: #E5B783;
}
结果如图:
会发现min-width并没有生效。
问题原因是:
min-width会继承父元素的width,而min-height不会。
如果无父元素,也就是最外层是body,则默认100%。 ——摘自xi-2130博客
解决方法:浮动,定位,使之脱离文档流
(1) position: absolute:
.test{
min-width: 100px;
height: 60px;
background-color: #E5B783;
position: absolute;
top: 0;
left: 0;
}
(2) position: fixed:
.test{
min-width: 100px;
height: 60px;
background-color: #E5B783;
position: fixed;
top: 0;
left: 0;
}
(3) float进行元素浮动:
.test{
min-width: 100px;
height: 60px;
background-color: #E5B783;
float: left;
}
二、同时使用时的优先级问题
MDN说法:
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
max-height 重载(覆盖掉) height, 但是 min-height 又会重载(覆盖掉) max-height.
实际效果:
当 height 和 max-height一起使用时,谁小听谁的
max-height < height 元素高度: max-height
height < max-height 元素高度: height
当 height,max-height,min-height一起使用时
height > max-height > min-height 元素高度:max-height
height > min-height > max-height 元素高度:min-height(虽然这里的height没有小于min-height,但是它大于了max-height,因此导致height失效;而max-height又小于min-height,导致max-height失效,因此最后对元素高度起作用的就只是min-height)
min-height > height > max-height 元素高度:min-height