【CSS疑难点汇总】1.bor-box失效情况总结以及高宽设置为auto的情况

1. box-sizing

box-sizing是改变盒子宽高的计算方式，一般使用bor-box，消除padding和border对整个盒子的影响，但在没有明确给出宽高的情况下，box-sizing是没有效果的

1.1 box-sizing不生效的情况

1.1.1块级盒子嵌套

宽度继承父盒子的宽度，高度不继承

<!-- box盒子默认继承过来的是宽和父盒子保持一致，高度为0  -->
<div class="container"><div class="box"></div>
</div>

.container {width: 300px;height: 300px;margin: 100px auto;background-color: pink;
}.container .box {height: 100px;background-color: purple;border: 20px solid orange;
}

在这里插入图片描述

如上图，我们并没有给box设置box-sizing：border-box，但box的高度被撑开了，宽度依旧和父元素相同，并没有被撑开，因为box继承了父亲的宽度，wdith为auto

很多同学不明白auto和100%的区别，那么我们给box的宽度设置和父元素一致为100%

.container .box {height: 100px;width: 100%;background-color: purple;border: 20px solid orange;
}

在这里插入图片描述

现在明白宽度的继承和设置100%的区别了吧，设置了100%相当于明确给了子元素的宽度的数值

1.1.2 定位元素的宽高为auto时

<div class="container"><div class="box"></div>
</div>

.container {position: relative;width: 300px;height: 300px;background-color: purple;margin: 100px auto;
}.container .box {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: purple;border: 20px solid orange;
}

在这里插入图片描述

如上图，很明显，当box的宽度和高度为auto时

绝对定位父盒子的宽度 = margin-left + margin-right + left + right + 子元素的宽度

而默认的margin为0，所以子元素的宽度和高度为auto，不会受到border和padding的影响

1.1.3 flex布局中的bor-box失效情况

<div class="container"><div class="box-left"></div><div class="box-right"></div>
</div>

.container {display: flex;width: 300px;height: 300px;margin: 100px auto;background-color: pink;
}.container .box-left {width: 100px;background-color: purple;
}.container .box-right {flex-grow: 1;background-color: orange;border: 20px solid skyblue;
}