min-width,max-width,min-height,m
2022-02-28 本文已影响0人
skoll
简介
1 .这些属性值一定是出现在自适应布局或流体布局中,如果是固定width，height的布局，不需要使用这个属性
2 .和width,height最不一样的地方:默认值
3 .优先级比较，比important的优先级都大，在min-width和max-width之间挑大的显示。比如说min-width:1400,max-width:1200，那么最后的宽度是1400px
max-width使用场景
1 .无法确定图片大小的时候，做一个最大限制
img{
max-width:100%,
height:auto !important;
}
max-height使用场景
1 .任意高度元素的展开收齐动画技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.element{
max-height: 0;
overflow: hidden;
transition:max-height 0.25s;
}
:checked ~ .element {
max-height: 666px;
/* 这里的height值取得是auto */
/* max-height是要一个足够大的值，一定要超过本来的大小 */
/* 这个值最好还是和真的高度差不多，不然收回去的时候会有问题，因为看不见的空间也在占据着时间 */
}
</style>
</head>
<body>
<input id="check" type="checkbox">
<div class="element">
<p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
</div>
<label for="check" class="check-in">更多↓</label>
<!-- 这种方式可以完全把input这种东西解放出来，不需要做覆盖了。 -->
<label for="check" class="check-out">收起↑</label>
</body>
</html>
min-width,min-height
1 .初始值是auto
max-width,max-height
1 .初始值是none
2 .如果初始值是auto，那么我们的width永远不能设置为比auto更大的宽度值了.max-width值就永远都是auto算出来的值了.同理最后表现出来的也是max-width的值
