三、使用 CSS 變更 HTML 標籤特性

1. CSS Reset，讓所有瀏覽器長得一致

2. 行內元素 & 區塊元素的差異

  • 這章節談 display 屬性

  • block 元素，會佔滿容器，獨占一行

    • a 預設是 inline，改 block 就會一整行都能按

  • inline 元素

    • list 預設是 block，改成 inline 就可以並排

3. DIV 與 SPAN 的使用時機、CSS 後代選擇器

  • div, span 用來網頁排版，沒有語意

  • div 是 block 元素

  • span 是 inline 元素

  • 後代選擇器，父元素 (空格) 子元素

html

<div class="style1">
    <h2>標題二</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum magni labore soluta error maxime? Repellendus aliquam at esse velit distinctio labore officia neque eius suscipit! Quas placeat eveniet exercitationem. Voluptatem.</p>
</div>
<div class="style2">
    <h2>標題二</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus perferendis aliquam optio quis. Eum est nemo quam, praesentium soluta inventore quae sit nostrum consequatur eligendi reiciendis, rem qui! Quasi, cumque!</p>
</div>

css

.style1{
    color:red;
}

.style2 h2{
    color:blue;
}

4. 使用 margin、padding 來推擠距離

  • padding 內距

    • 文字跟外框太密，想產生留白

  • margin 外距

    • 跟其他元素的距離

5. Box Model (盒模型)

  • 網頁檢視工具會有提供盒模型

  • 由外而內: margin > border > padding > content

  • margin 不是自己人，不會影響元素的寬和高

  • 點擊超連結的時候，padding 和 border 因為是自己人，所以也可以點

6. 使用 margin: auto 讓版型置中

開始進入版型設計惹

.wrap{
    width:600px;
    margin: 0 auto;
}

.header {
    height: 100px;
    background-color: #111;
}

.content {
    height: 300px;
    background-color: pink;
}

.footer {
    height: 50px;
    background-color: blue;
}

7. 作業：優化第二節作業吧

H3-23 作業練習

麻煩老師過目我的 H3-23 作業練習了，謝謝老師

順便想請問幾個問題

  1. .header 裡面的 img，它的下方和 .header 有一點點的間距，不曉得為什麼會有這個狀況？

    • 已使用 CodePen 內建的 css reset

    • 在本機端使用了 css reset 後也有這個狀況

  2. 如果想讓 .footer 的 <p></p> 的文字都垂直置中的話，會推薦使用什麼方式？

    • 我有看到一個用法是，該元素的 height 設定多高，line-height 就設定多高。但感覺沒有很直覺

    • inline 和 block 元素的垂直置中方式好像又不一樣？

    • 附上我使用的部份 css 碼

.footer {
    background-color: rgb(251, 253, 109);
    height: 50px;
    text-align: center;
    line-height: 50px;
}

參考資料

謝謝老師的回覆 ~

我自己有再找了一下，圖片和父元素會產生間距的關係​ 有些文章是說，這和西文(英文)的排版方式有關 因為圖片會對齊父元素的 baseline，而 baseline 到底線還有一點距離

我想老師說的「他會與下方有一小段間隔」 可能就是 baseline 到底線的距離了 我在 CodePen 打了一些測試文字，也確實發現 a, x 等字母的底部和 img 在同一條線 p, g 等字母所多出的距離，剛好和 .header 的 border 切齊

我整理了一下網路上和老師提供的解法，認為有兩個方向 1. 避開 inline 西文排版的影響，在 img 下 float: left 或是 display: block 2. 在 inline 的特殊影響下進行修改 2-1 讓 img 對齊底線，在 img 設定 vertical-align: bottom 2-2 因為這距離和 font 有關，如果 font-size 變零，這間距應該也不在了。所以在父元素設定 font-size: 0 2-3 line-height 好像是根據 font-size 的大小，平均放到字的上方和下方。似乎設定 line-height:0 也不會產生這個間距

參考資料

別人用 pug 和 sass 寫的 demo

https://codepen.io/barbo1942/pen/yoaXQG?editors=1100

8. 第三章測驗

9. 補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！

  • 不想算盒模型的寬度

  • CSS3 新的語法

  • box-sizing: border-box 預設是 content-box

  • can i use

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

10. CODEPEN：線上撰寫網頁服務

線上放 Html, Css, Javascirpt 的服務

Previous二、CSS 常用語法Next四、網頁排版技巧 Part I

Last updated