tags: 2019年鐵人賽 、 css

前言

開始是先看文件，怎麼都不理解 padding 和 margin，後來是靠google的DevTools來理解觀念後，再看一次文件。

學習來源

• Chrome 開發者工具文件
• udemy線上免費課程-六角學院Chrome 網頁除錯功能大解密
• MDN-The box model
  
• w3.org-box model

Box Model

動起來

範例
HTML

<div class="box">Hi，我是mangoSu</div>

CSS

.box{
  width: 300px;
  height: 300px;
  padding: 30px;
  border: 25px solid grey;
  margin: 40px;
}

如果由內層依序往外點選(content > padding > border > margin)，可以看到跟 Box Model 相對應的範圍與顏色。

我理解的Box Model

1. content
   • content是element 的內容，可以撐起element的height
   • 可以放文字
   • 可以放 HTML Tags
2. padding
   • content和border之間的空間
3. border
   • box的邊框，預設大小是0跟無樣式
4. margin
   • 每個element間的留白距離

範例1
只有HTML，沒有設定CSS

<p>Lorem ipsum dolor <mark>sit amet</mark>, consectetur adipisicing elit. 
Accusamus nesciunt voluptatum numquam pariatur iste doloribus magni harum!
</p>

<p> element 沒有設定 height，content 由文字撐起

box-sizing屬性

上面提到的Box Model是默認下的 content-box 型態，而 box-sizing 可以設定不同型態。

1. content-box
2. border-box

範例
HTML

 <div class="box box1">box1</div>
 <div class="box box2">box2</div>

CSS

.box{
  width: 150px;
  height: 150px;
  margin:20px;
  padding:40px;
}
.box1{
  background-color: pink;
  border:30px solid red;
}
.box2{
  box-sizing:border-box;
  background-color: lightblue;
  border:30px solid blue;
}

	webpage畫面	Box Model
box-sizing：content-box(預設值)
box-sizing：border-box

• 在 content-box 下，content 的寬不會被壓縮
• 在 border-box 下，content 的寬會被壓縮

眉眉角角小技巧

• 開啟Chrome DevTools除了按右鍵外，一樣有快捷鍵
  command+shift+C
• Emmt
  Emmt的縮寫語法很像CSS Selectors，幫助縮短打字時間(我懶我驕傲！)，讓我可以浪費生命在學程式上(咦？)

  • 範例1

    .box
    

    
    不打HTML Tag預設是<div>，一樣按下tab鍵

  • 範例2

    #container>h4{hello}+.item${$}*5
    

    

    1. 若太複雜可以分別拆開試試#container、 h4{hello}、item${$}*5
    2. >表示子層(下一層)
    3. +表示兄弟層(同一層)
    4. *表示重複數量
    5. $表示編號，可和*搭配
    6. {}表示本文內容