CSS在限宽容器内实现全宽显示

2017-01-12 19:14:50来源:CSDN作者:lecepin人点击

在web前端的布局中,经常用到内容居中,banner全宽的效果,这种效果实现起来也很简单,但有时我们也会遇到在限宽的容器中想实现宽度为屏幕宽度的效果,接下来我就详细说一下这个。

效果:


常规式(非限宽)

这里先说一下常规方式,就是banner脱离内容的方式。

效果预览:

html

<div class="banner">    <div class="container">        <img src="banner.jpg" alt="">    </div></div><div class="header">    <div class="container">      <p>        Fighting trade protectionism, anti-globalization and boosting confidence in the Chinese economy will be high on President Xi Jinping's agenda as he becomes the first top Chinese leader to attend the World Economic Forum next week, observers said.      </p>    </div></div>

css(LESS)

*{    margin: 0;    padding: 0;    border: 0;}.container {    width: 500px;    margin-left: auto;    margin-right: auto;    p{        background-color: #00CCCC;        padding: 0.5rem;        font-family: Arial;        color: #fff;        line-height: 1.5rem;    }}.banner .container {    width: 100%;}.banner img {    width: 100%;    max-width: 100%}

这种方式是最常用的,将banner单独出来,没有限宽容器,实现起来很简单。


绝对定位式

现在将全屏元素放在限宽容器中,并由.full-width控制:

<div class="header">    <div class="container">      <div class="full-width">        <img src="banner.jpg" alt="">      </div>    </div></div>

修改CSS:

.full-width{    position: absolute;    left: 50%;    transform: translateX(-50%);        width: 100vw;   }.full-width img{    width: 100%;}

首先将全宽内容left:50%,右推到中间,然后,使用translateX(-50%)往左移动全宽内容的一半,通过这两句就能实现全宽内容居中显示,然后通过设置width: 100vw,实现全宽显示。(不不解vw的,可以参考CSS3视窗单位vw、vh、vmin、vmax说明)

这种方式有一个弊端,就是脱离的文档流,所以不太适合。


正式一:相对定位方式

正式开始,页面结构不变,这里我们修改一下.full-width,实现相对定位式全宽

.full-width{    position: relative;    width: 100vw;       left: 50%;    margin-left: -50vw;}

首先定位方式设置为relative,这样就不会脱离文档流,然后将宽度设置为全宽100vw,接着用left: 50%将全宽内容右推到中间位置,再使用margin-left: -50vw将全宽内容拉到最左边实现全宽显示,效果不错。

效果预览:

从动态图中可以看到,效果实现。


正式二:transform方式

这里还可以使用transform

.full-width{    width: 100vw;       transform: translateX(calc((500px - 100vw ) / 2));}

通过屏幕宽度 - 限宽宽度得到剩余部分,然后取剩余部分的一半,往左平移即可实现效果(代码中是500px-100vw,这样就不用再取负了)。

上面的公式可以化简如下:

translateX(calc((100% - 100vw ) / 2))

translateX(calc(50% - 50vw))

正式三:margin方式 ##

translateX的方式同样适合margin-left,看一下实现代码:

.full-width{    width: 100vw;       margin-left: calc(50% - 50vw)}

好啦,上面用三种方式实现了在限宽容器内实现全宽显示效果,试一下吧。


博客名称:王乐平博客

博客地址:http://blog.lepingde.com

CSDN博客地址:http://blog.csdn.net/lecepin


这里写图片描述

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台