iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
0
Modern Web

菜鳥網頁基礎系列 第 21

菜鳥網頁基礎DAY21

這次要介紹跟排版有關係的 CSS,那就是 display,在最初顯示下我給 div 和 a 它們寬、高、背景顏色、框線,他們都是套同一個 class,但是 a 卻沒有跟 div長得一樣,為甚麼會這樣呢?接下來就帶你認識 display。

 <section>
      <h1>最初顯示</h1>
      <div class="display-box">div</div>
      <a class="display-box">a</a>
    </section>
 
.display-box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    border: 1px solid black;
}

https://ithelp.ithome.com.tw/upload/images/20200930/20129535o2P8sYqGAG.png
---------------------我是分割線---------------------

div 和 a 的預設顯示模式不一樣,所以我們使用 display:block 讓 a 變成區塊,這樣他就會有寬高,可以變得跟 div 一樣。

 <section>
      <h1>區塊元素(block)</h1>
      <ul>
        <li>預設h1~h6,p,div,section...</li>
        <li>會換行</li>
        <li>有寬跟高</li>
      </ul>
      <div class="display-box">div</div>
      <a class="display-box d-block">a</a>
    </section>
 
.display-box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    border: 1px solid black;
}
 
.d-block {
    display: block;
}

https://ithelp.ithome.com.tw/upload/images/20200930/20129535nis8yT9Fhh.png
---------------------我是分割線---------------------

而這個 display-inline 有甚麼功用呢?在下面圖有說明。
如果要撐大區塊的話只能填入文字或是其他東西。
https://ithelp.ithome.com.tw/upload/images/20200930/20129535Il2OzaTLHs.png

<section>
      <h1>行內文字元素(inline)</h1>
      <ul>
        <li>預設a,span,label,:before,:after</li>
        <li>不會換行</li>
        <li>沒有寬跟高</li>
        <li>擺在一起時,中間會有空格</li>
      </ul>
      <div class="display-box d-inline">div</div>
      <a class="display-box">a</a>
    </section>
 
.display-box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    border: 1px solid black;
}
 
.d-inline {
    display: inline;
}

---------------------我是分割線---------------------

display: inline-block 他包含了前兩個的特性,說明在下面


    <section>
      <h1>行內區塊元素(inline-block)</h1>
      <ul>
        預設img,input,textarea,button
      </ul>
      <ul>
        不會換行
      </ul>
      <ul>
        有寬高
      </ul>
      <ul>
        中間會有空格
      </ul>
      <div class="display-box d-inline-block">div</div>
      <a class="display-box d-inline-block">a</a>
    </section>
 
.display-box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    border: 1px solid black;
}
 
.d-inline-block {
    display: inline-block;
}

https://ithelp.ithome.com.tw/upload/images/20200930/20129535NiEOkPvpKH.png

---------------------我是分割線---------------------

因為上面兩個方法中間都會有空格問題,所以之後又研發出了新的,他叫 flex,他也是解決網頁排版問題,但是他更新、更方便。

https://ithelp.ithome.com.tw/upload/images/20200930/20129535om5qKWI2sc.png

這是一開始打好程式碼,排出來的樣子。

   <section>
      <h1>Flex元素(flex)</h1>
      <div class="row">
        <div class="col">
          <h3>1st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>2st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>3st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
      </div>
    </section>
 
.row {
    border: 1px solid black;
}
 
.col {
    border: 1px solid black;
}

之後我要讓他們變成三個排在一起,那必須要每人都取三分之一這樣才能擠得下,所以我們使用一個函數,他叫 calc,他可以幫助我們自動算出平均,之後我們要讓它們三個排在一起,所以要使用 display:flex,他要設在外層,要設定在容器,我們要讓容器能伸縮,不過它有個問題就是它會刻意去縮放內容然後讓它放在同一排,但我們想要讓他寬度固定,塞不下時會換行,這時候我們可以使用 flex-wrap: wrap,這樣他就會三個一排。

 <section>
      <h1>Flex元素(flex)</h1>
      <p>flex>block*n</p>
      <div class="row">
        <div class="col">
          <h3>1st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>2st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>3st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>1st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>2st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
        <div class="col">
          <h3>3st col</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
            cupiditate fuga ex voluptas repellat tempora.
          </p>
        </div>
      </div>
    </section>
 
.row {
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}
 
.col {
    border: 1px solid black;
    width: calc(100% / 3);
    box-sizing: border-box;
    /* 不會因為框線而去影響到寬跟高,假如我的方塊它是300*300,那他就是300*300 */
}

https://ithelp.ithome.com.tw/upload/images/20200930/20129535xOtQCbnVM9.png
上圖是算出平均後
下圖是已經完成後
https://ithelp.ithome.com.tw/upload/images/20200930/20129535J92oXwNz0O.png
下圖是 display:flex 的問題,會刻意排在一起
https://ithelp.ithome.com.tw/upload/images/20200930/20129535iZXrtw8Wg0.png
下圖是使用 flex-wrap: wrap 後,讓他三個一排
https://ithelp.ithome.com.tw/upload/images/20200930/201295358calVFT3sm.png


上一篇
菜鳥網頁基礎DAY20
下一篇
菜鳥網頁基礎DAY22
系列文
菜鳥網頁基礎30

尚未有邦友留言

立即登入留言