前言
当我们在进行页面设计时，经常会出现容器宽高百分比失效的情况，原因可能是由于我们在使用 CSS Reset 时，将页面元素的默认样式全部清除，导致页面元素宽高等属性受到影响而失效。那么，如何在使用 CSS Reset 后处理好百分比宽高失效问题呢？
解决方法
1. 使用 box-sizing 属性
box-sizing 属性用于设置元素的盒模型，不同取值会对元素宽高等属性产生影响。我们可以设置 box-sizing 属性的值为 border-box，让元素的宽高包括边框和内边距在内。
/* 我们可以在全局设置 box-sizing 的取值 */
* {
box-sizing: border-box;
}2. 使用 calc() 函数
calc() 函数可以用于进行数学运算，并返回计算结果，我们可以利用这个函数来计算出元素的宽高的实际取值。
/* 计算元素宽高的实际取值 */ /* 宽度占父元素 50%，减去 50px */ width: calc(50% - 50px); /* 高度占父元素 50%，减去 50px */ height: calc(50% - 50px);
3. 使用纯 CSS 布局
如果我们使用纯 CSS 布局的话，可以利用 flex 或者 grid 布局，它们都能够相对自适应地计算元素宽高的实际取值。
/* 使用 flex 布局 */
.container {
display: flex;
}
.child {
/* 每个子元素占据 25% 宽度 */
flex: 1 1 25%;
}-- -------------------- ---- ------- -- -- ---- -- -- ---------- - -------- ----- ---------------------- -------- ------ - ------ - -- ------- --- -- -- ------------ ---- -- -
总结
在使用 CSS Reset 后，我们可以采用以上三种方式处理好百分比宽高失效的问题。其中，box-sizing 属性是应用最广泛的方式之一，也是最简单的方式之一；calc() 函数可以自定义计算公式，自适应地计算出元素宽高的实际取值；而纯 CSS 布局则是在使用 flex 或 grid 布局时，自适应地计算出元素宽高的实际取值。希望通过本篇文章，可以帮助大家更好地解决 CSS Reset 后的百分比宽高失效问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647446a9968c7c53b01a96b1