[鼠年全马铁人挑战] Week11 - 超新手学习笔记：CSS-container容器标籤

Hi~大家这周过的好吗?

上週开始参加六角学院切版直播班，希望让自已的切版能力越来越好但现在的程度还算是很新~
所以希望能把在这八週学到的写成笔记更加深印象~
这週要来写写 Container 容器的概念，这是我第一次听到原来 CSS 可以这样命名，了解到了以后发现在这样的命名方式比较方便也更好维护了，以下整理成笔记：

什么是 container

container 在中文的字面上是容器的意思，可以把底下子层所有的标籤全部包起来，在给 CSS 命名的时候父层可以用 container 让标籤语意化。

在 HTML 5 出来之前，排版最常用的标籤是 div span，但我们如果想要对div做更进一步的语意化，那就对其做添加 class，如 <div class="header"></div>标示当前的div里需要写的是有关头部的结果。
那时候还没有相关常用的 h5 标籤，h5的出现让标籤语意化更进一大步。
正因为业界前端工程师，已习惯这种编码习惯，所以即便加上 container 的 class并没有写上具体的 css 代码也会让排版更加统一方便。
使用 container 的 class也是业界已默认的排版命名方式，可以更加方便的维护，也比较看的懂别人写的 code进而加速排版品质。

container 的 写法

这次的範例就来用这次的版型作业吧XDD

 <div class="container">​    <div class="title-bottom-line">      <h1>Joanne<br />Chen</h1>    </div>​    <div class="photo">      <img src="images/photo-1536180931879-fd2d652efddc.png" alt="">    </div>​    <div>      <div class="title-bottom-line">        <h2>个人资料</h2>        <span class="title-en">PROFILE</span>      </div>      <div class="mb-72">        <ul>          <li class="personal">            <div class="edu">              陈久安 Joanne Chen<br />              1997- <br />              应届毕业生／接案设计师／UI 设计实习生            </div>            <div class="exp">              UI 设计修行中／立志当斜槓青年<br />              独立接案，内容涵盖：<br />              品牌规划、视觉设计、编辑设计、标準字、物件及印刷品设计等。            </div>          </li>        </ul>      </div>      <div class="title-bottom-line">        <h2>学历</h2>        <span class="title-en">EDUCATION</span>      </div>      <div class="mb-72 item-wrap">        <ul class="school">          <li class="school-item time-line">国立六角师範大学 视觉设计学系 学士学位 | 2016－2020</li>          <li class="school-item">国立六脚高级中学 美术班 | 2013－2016</li>        </ul>      </div>    </div>​  </div>

这里可以看到，外层使用 container 容器把所有以下的程式码都包起来，就像一个容器能装各种不一样的东西样式，在使用上也更有弹性，如果有 bug 的时候我们也能轻易找到程式码所在的地方，加速处理bug的速度。

container 容器是我第一次遇到的方法，也开始使用 container 来写 css，发现真的方便很多呢，程式码的品质也提升了:) 希望能更了解 container 的用法，让排版可以越来越好

​