满幅的背景,定宽的内容

来源:互联网 发布:超级优化各人结局 编辑:程序博客网 时间:2024/06/04 19:02

国外网站得意技,这叫满幅的背景,定宽的内容。css揭秘里面说的主要是单单通过footer的padding配置做到内容居中的效果,再引申出calc的作用。免除需要2层dom来做到的效果(第二层是margin来做)

<footer>    <P>        Consectetur et t-bone pork loin. Tri-tip cupim in, spare ribs velit exercitation in. Tempor cillum fugiat, nisi leberkas reprehenderit anim laboris proident cow. Eu fatback kevin sint, ad shoulder in venison picanha. Sausage drumstick capicola, culpa boudin pork belly minim aute ipsum biltong picanha venison nulla adipisicing.    </P>    <div class="wrapper">        anbini    </div></footer>

footer{    /*max-width: 100px;*/    /*450为内容的占位宽*/    padding:1em calc(50% - 450px);    background: #333;}footer p{    border: 1px solid #fff;    border-radius: 3px;    padding: 1em calc(50% - 350px);    color: #fff;}
现在我们已经用 calc() 替代了这个神奇的 auto,而且这个新值实际上可以作 为一个通用的 CSS 长度值应用到任何一个接受长度值的属性上。这意味着 如果我们愿意,还可以把这个长度值应用到父元素的 padding 上,而整个效 果是保持不变的。

原创粉丝点击