做个app好还是做网站好,给媳妇做的网站,收录网站排名,屏幕分辨率 网站开发1. box-sizing
box-sizing是改变盒子宽高的计算方式#xff0c;一般使用bor-box#xff0c;消除padding和border对整个盒子的影响#xff0c;但在没有明确给出宽高的情况下#xff0c;box-sizing是没有效果的
1.1 box-sizing不生效的情况
1.1.1块级盒子嵌套
宽度继承…
1. box-sizing
box-sizing是改变盒子宽高的计算方式一般使用bor-box消除padding和border对整个盒子的影响但在没有明确给出宽高的情况下box-sizing是没有效果的
1.1 box-sizing不生效的情况
1.1.1块级盒子嵌套
宽度继承父盒子的宽度高度不继承
!-- box盒子默认继承过来的是宽和父盒子保持一致高度为0 --
div classcontainerdiv classbox/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-sizingborder-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 classcontainerdiv classbox/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 classcontainerdiv classbox-left/divdiv classbox-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;
}在flex布局中align-items属性的默认值为normal也就是默认拉长到交叉轴的高度而我们又给box-right设置了flex-grow:1
则flex-right会默认占据剩下的宽度所以宽高都是auto不会受到padding和border的影响
