关于尺寸和百分比
- 宽/高的百分比计算不是使用父元素的宽/高，而是父元素的content
content、padding、border、margin这几个概念是绝对的，而width、height的概念的相对的。
当box-sizing=border-box时，宽高=content+padding+border，
当box-sizing=content-box时，宽高=content
两个父元素宽高都是100px，子元素都是50%。把父元素的box-sizing设为不同的值，子元素大小却不同，因为它相对的父元素的content。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.parent {
height: 100px;
width: 100px;
padding: 10px;
background-color: rgb(135, 242, 183);
}
.son {
height: 50%;
width: 50%;
background-color: rgb(252, 237, 237);
}
.border-box {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="parent content-box">
<div class="son"></div>
</div>
<br />
<div class="parent border-box">
<div class="son"></div>
</div>
</body>
</html>
现代的浏览默认box-sizng：content-box，所以一般可以直接用父元素的宽高计算
- 使用绝对定位时，子元素的宽高不再是其基准的content，而是padding-box（content+padding）
子元素的基准即第一个position不为static的元素。
将子元素的宽高设为父元素的100%，尺寸并不是和content 一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.parent {
height: 100px;
width: 100px;
padding: 10px;
background-color: rgb(135, 242, 183);
position: absolute;
}
.son {
height: 100%;
width: 100%;
background-color: rgb(255, 192, 192);
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
<br />
</body>
</html>
- 显式指定了min-height，子元素的百分比也会不生效
高和宽不一样，一定要显示的确定父元素的尺寸，才有能生效的百分比。
width、height的默认值是auto，对于块级元素来说，width：auto是充分利用可用空间，height：auto是由子元素撑开
比如现在父元素的高没有设置，子元素1的height200px，子元素2height为20px。这个父元素的高就是靠1撑开的。
如果把子元素2的height设为百分比，就无法生效，因为一定要显示指定父元素的高(就是有一个确定的值，比如一个多少px，或者是一个可以生效的百分比)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.parent {
padding: 10px;
background-color: rgb(255, 200, 200);
}
.img {
height: 200px;
}
.son {
height: 20px;
width: 20px;
background-color: rgb(132, 179, 24);
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<img
class="img"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596882437264&di=e70edbb0544750fdc173a63bd0c93271&imgtype=0&src=http%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT023R750x750M000002kr00c3YLF3h.jpg%3Fmax_age%3D2592000"
alt="小羊"
/>
<div class="son"></div>
</div>
<br />
</body>
</html>
如果只是显示指定了min-heigth(比如多少px)，子元素的百分比依旧不会生效,因为子元素的百分比是基于父元素的宽/高，而不是min/max宽高。(即：子元素宽高=父元素宽高X百分比）
P.S:min子元素宽高=父元素宽高X百分比，而不是:min子元素宽高=min父元素宽高X百分比
- 当min/max/尺寸冲突时，约束力min>max>尺寸
关于弹性布局
弹性布局的子元素通过flex:1可以充分利用父元素的剩余空间。
flex是三个属性的简写 flex-grow、flex-shrink、flex-basis，默认值是0，1，auto,其分别决定了父元素中出现剩余、溢出、基础的尺寸。
- flex-grow相对于剩余空间的分配比例
父元素的宽是200px,子元素1是50px，子元素2是100px。将flex-grow都设置为1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.parent {
width: 200px;
display: flex;
flex-direction: row;
background-color: bisque;
height: 100px;
}
.son1 {
flex: 1 1 50px;
background-color: cadetblue;
height: 100px;
}
.son2 {
flex: 1 1 100px;
background-color: coral;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
<br />
</body>
</html>
- flex-shrink是相对于自身尺寸的收缩比例
父元素宽为200px,子元素1是100px，子元素2是300px，溢出200px。flex-shrink都为1
- flex-basis即宽/高，但优先级更大
