CSS-在`有限宽度的`父级内部时，创建一个`全浏览器宽度`的容器

1. 解决问题

当我们在有限宽度的父级内部时，如何创建一个全浏览器宽度的容器？

2. 例子

2.1 文字区域 宽度固定 居中, 图片 全屏展示

知道你们懒, 可直接复制看效果

HTML:

<!-- 有限宽度的父容器 -->
<main>

  <p>无用文字几分电视剧方了解到失联飞机莱德斯基发了端上了电视剧方了解到失联飞机淡蓝色
积分的哭声接发大水了发牢骚的积分莱德斯基了发简历到设计费了是善良劫匪的了圣诞节发劳动竞赛雷锋精神对了福利大书法家李</p>

  <!-- 我们想要全屏展示的容器 -->
  <figure class="full-width">
    <!-- a. 可以放任何东西, 需要全屏展示的图片 -->
    <img src="http://img1.imgtn.bdimg.com/it/u=101810596,1964023077&fm=23&gp=0.jpg">
    
    <!-- b. 利用伪类设置全屏背景也可以了, 常见需求 -->
  </figure>
   
    <p>的积分来得及了附近的失联飞机莱德斯基发了多少级发了绝对是了房间里的类似的机房里的世界疯了
    倒计时来莱德斯基发了多少级发了绝对是了房间里的手机发塑料袋积分了电视剧方了解到失联飞机三打两建
    大幅度三六九等发了多少级发了多少级了发简历到设计费</p>

</main>

CSS:

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

/* 有限宽度的 父容器 */
main {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 想要全浏览器宽度展示的 子容器, 突破父容器的限制 */
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

img { 
  width: 100%;
  height: 500px;
}