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