如何解决解决响应式设计中的CSS填充问题
|| 这种简单的HTML5布局旨在在左侧具有一个导航栏，并在其旁边浮动正文（使用百分比而不是像素进行流畅的响应式设计-计算在CSS内的注释中）。 http://www.wturrell.co.uk/stackoverflow/20110615-01.html \'page \'div中元素的宽度精确地相加为100％。我想向某些元素（在本例中为导航）添加填充。如果我删除所有填充，它们将正确浮动，但是填充超过1或2像素（无论指定了什么单位），它就会中断。我不明白为什么这会破坏布局，因为它不能填充块，因此肯定不应该改变块的整体大小吗？ 我错过了什么？ 更新-解决方案： http://www.wturrell.co.uk/stackoverflow/20110615-02.html （元素显示宽度=宽度加上边框加上填充。导航应该是名义上总共200像素，右侧有20px填充，因此对于流体设计，宽度= 180/900 * 100或20％，填充= 20/900 * 100或2.222 ％，正文仍为700/900 * 100或77.777％。）解决方法
在CSS盒子模型中，将ѭ0添加到ѭ1中以获取盒子的整体大小。在您的情况下，如果宽度百分比总计为100％，则即使1px也意味着内容溢出。
尝试以百分比设置填充，并在将它们相加时考虑在内，或者在边缘保留1％或2％的缓冲区，并以像素为单位添加小的填充。
, 首先，您需要添加一个文档类型来触发标准模式。否则，您的页面将使用“怪癖模式”，这将在Internet Explorer中特别引起严重的问题。
添加为您的第一行：
<!DOCTYPE html>
padding
width
box-sizing: border-box
width
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width
padding
#page nav {
clear: both;
display: inline;
float: left;
padding: 0 10% 0 0;
width: 12.2222%;
}
box-sizing: border-box;
max-width:100%
max-height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。