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;
}