Html 如何修复赢得'；I don’我走得不好

当我尝试制作一个响应性导航条时，我遇到了宽度问题

下面是HTML代码

正文{
保证金：0；
}
.导航{
背景颜色：浅绿色；
高度：40px；
宽度：100%；
}
.页脚{
背景色：#333；
字号：18px；
填充：20px；
宽度：100%；
}

文件
测试
测试
测试
测试
测试

您遇到的问题是页脚。默认情况下，填充将添加到元素的总宽度和高度。所以当你给页脚一个100%的宽度，加上20px的填充，宽度实际上变成了100%+20px+20px

通过向页脚类添加

框大小：边框框

，可以很容易地克服这一问题。或者很多人只是将它设置为每个元素，比如

*{box size:border box}

，这样就不会再有这个问题了

“边框框”告诉浏览器考虑中的任何边框和填充 为元素的宽度和高度指定的值。如果你设定 元素的宽度为100像素，这100像素将包括任何 添加边框或填充，内容框将收缩以吸收 那个额外的宽度。这通常使其更容易确定大小 元素

正文{
保证金：0；
}
.导航{
背景颜色：浅绿色；
高度：40px；
宽度：100%；
}
.页脚{
背景色：#333；
字号：18px；
填充：20px；
宽度：100%；
框大小：边框框
}

文件
测试
测试
测试
测试
测试

您需要删除页脚上的填充，并将其放在上的子元素上。