Written by on CSS Wizardry.
Independent writing is brought to you via my wonderful Supporters.
This is a tiny little blog post that a lot of you will already be aware of, however in my experience I’ve found that for every one person that does realise this, there are about two who don’t.
A lot of developers will have a wrapper <div> in their markup in which the page is contained. It might look something like this:
<code><span class="code-comment"><!-- Markup --></span>
<body>
<mark><div id="wrapper"></mark>
[content]
</div>
</body>
<span class="code-comment">/* CSS */</span>
body{
font-family:sans-serif;
background:#fff;
color:#333;
}
<mark>#wrapper{</mark>
width:940px;
margin:0 auto;
}</code>
It most situations this could be simply rewritten:
<code><span class="code-comment"><!-- Markup --></span>
<body>
[content]
</body>
<span class="code-comment">/* CSS */</span>
body{
font-family:sans-serif;
background:#fff;
color:#333;
width:940px;
margin:0 auto;
}</code>
You <body> is a container.
Obviously there will be some instances where this won’t be suitable–and you’ll spot what those are as you come across them–but for the most part, you can drop that unnecessary wrapper <div> and use the <body> element as a wrapper.
Hat-tip to Simon Wiffen for showing me this a while ago.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。