【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;
}