请列出页面上影响网站排名的因素网站开发建站
css 父元素宽度随子元素
抱歉，标题很长，但这是CSS布局中经常遇到的问题。 通常，我们需要一个元素扩展到超出（居中的）页面宽度以填充浏览器窗口。 考虑一个典型的页面设计：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SiteName</title>
</head>
<body>
<article><header></header><nav></nav>…content…<footer></footer>
</article>
</body>
</html>最外面的页面元素使用CSS代码居中，例如：
article
{width: 70%;margin: 0 auto;
} 那么，如何应用重复的水平背景填充整个窗口呢？ 页面顶部的元素很容易，因为我们可以在body标签上定义图片，例如
body
{background: url(header.png) 0 0 repeat-x;
} 但是我们无法对页脚执行此操作，因为页脚位于article内部，并且位置由内容量决定。 最明显的解决方案是包装器元素，即，将footer移到article外部并添加一个内部标签：
…content…
</article><footer><div class="content"><p>Footer content.</p></div>
</footer>然后，我们可以相应地修改CSS：
footer
{width: 100%;background: url(footer.png) 0 0 repeat-x;
}div.content
{width: 70%;margin: 0 auto;
} 这是一个我们所有人都使用的解决方案，即使它冒犯了语义HTML诸神。 内部div是不必要的-我们出于CSS样式的目的添加了它。
幸运的是，有一些跨浏览器解决方案不需要其他标签。 最简单的方法是添加大量填充，然后以负边距将元素移回其原始位置。 这是一种常用于创建等高列的技术，但是在这种情况下，我们将其应用于宽度：
body
{overflow-x: hidden;
}.extendfull, .extendleft
{padding-left: 3000px;margin-left: -3000px;
}.extendfull, .extendright
{padding-right: 3000px;margin-right: -3000px;
} 当将“ extendleft”类应用于元素时，它将扩展到浏览器的左边缘。 同样，“ extendright”将其扩展到右侧边缘，而“ extendfull”将两者都扩展。 为了防止水平滚动，我们对body应用了overflow-x: hidden 。
查看演示页面…
该技术可在IE8，IE9，Firefox，Chrome，Safari和Opera中运行。 它不是包装标签的替代品，但确实为某些布局问题提供了替代解决方案。
但是我绝对必须支持IE6和IE7！
真？ 你确定吗？ 这项技术不会破坏您的设计，但是IE6拒绝显示超出外部元素限制的背景。 IE7尽力而为，但是，尽管“ extendright”通常可以工作，但“ extendright”却并非如此。
就个人而言，我会保留原有的浏览器，但…… 我不是你的老板 。 幸运的是，您可以使用一些CSS技巧来解决此问题：
/* IE6/7 fix */
.extendfull, .extendleft, .extendright
{position: relative;display: inline;float: left;width: 100%;
}如果幸运的话，这不会对现代浏览器中的布局产生有害影响。 如果确实如此，则需要相应地调整样式，使用条件样式表或添加一些可怕的IE6 / 7 hacks。 祝你好运！
翻译自: https://www.sitepoint.com/css-extend-full-width-bars/
css 父元素宽度随子元素