【CSS入门】理解css中min-width和max-width,width与它们之间的区别联系
16lz
2021-03-25
css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系:
min-width 最小宽度 当窗口小于最小宽度时,将出现滚动条
max-width 最大宽度 顾名思义,最宽只能这么宽
1、min-width,max-width的权重高
当元素设置了这2个属性的时候,即使在width后面使用了!important,如果元素实际宽度没在min-width,max-width的范围内,也不会显示width中的值,例如:
div{
min-width: 600px;
width: 400px !important;
}
该div任然显示600px的宽度。
div{
max-width: 400px;
width: 600px !important;
}
这里显示400px的宽度。
2、min-width与max-width值的大小出现冲突
当min-width的值大于了max-width的值的时候,元素最终的宽度显示min-width的值,例如:
div{
max-width: 400px;
min-width: 600px;
}
这里元素将显示600px的宽。
3、利用max-width可以实现元素逐渐变宽的效果
当我们不知道元素的具体宽度,可以结合transition来实现动画延迟效果,如下:
div{
max-width: 0;
overflow: hidden;
transition: max-width 0.25s;
}
div.active {
max-width: 600px;
}
总结:
min-height和max-heigth也同样类似, 在不知道元素具体区域宽高的时候,使用这些属性能很好让网站实现自适应效果。
更多相关文章
- box-sizing
- 0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中
- css之盒模型与定位
- 【CSS入门】CCS基本语法和常用选择器的使用方法
- box-sizing功能,相对定位/绝对定位
- 【CSS入门】学习CSS盒模型及常用样式属性详解(整理)
- 浅谈Java:Stack浅析
- css元素选择器
- HTML选择器和JS基础