# background 、box-model
###### tags: `html`,`css`

## background-image
可放置照片或漸層顏色顏色，不可放單一顏色
記得要設置長寬
## background-repeat
repeat-x，repeat-y， no-repeat
## background-size
- 改變背景圖片尺寸
--- contain 背景圖片等比例縮放，背景圖片一邊碰到盒子一邊時，另一邊停止縮放
--- cover 背景圖片等比例縮放，背景圖片會填滿整個盒子
--- 也可以設定絕對數值 px、em、rem，百分比
## background-position
- 可以對齊背景圖片的位置
兩個值，第一個值為水平向 x，第二個為垂直向 y
第一個數值 left、center、right => 0%、50%、100%
第二個數值 top、center、bottom => 0%、50%、100%
兩數值也可以是絕對數值，px、em、rem
只設定一個值時，此值為水平，另一值會被設定為 center

.bg-position{
      background-position: center center;
    }

## 縮寫規範

1. background-size 一定要緊接在 background-position 之後，且之間要用斜線分隔(/)

2. 設定 background-position，先設定水平軸向、再設定垂直軸向。

/* background-image、background-color、background-repeat、background-position、background-size */

 ex: 
 .bg-abbr{
      background:url("https://picsum.photos/500/500/?random=1") #333 no-repeat center center/cover;
    }

## 多圖背景規範
- 使用多層背景重疊時，各屬性可以用逗號分隔，圖片出現順序，會由上而下，上方會蓋住下方。
- 第一張背景圖在最上層，第二張第二層，最後一張為最底層。

範例1
.bg-three{
      background-image:
      url("https://picsum.photos/600/100/?random=1"),
      url("https://picsum.photos/600/400/?random=2"),
      url("https://picsum.photos/600/100/?random=1");
      background-repeat:no-repeat,no-repeat,no-repeat;
      background-position:left top,left 100px,left bottom; 
      
範例2
      background:
      url("https://picsum.photos/600/100/?random=1") no-repeat left top,
      url("https://picsum.photos/600/400/?random=2") no-repeat left 100px,
      url("https://picsum.photos/600/100/?random=1") no-repeat left bottom;
    }

## linear-gradient
1. 漸層是背景圖的一種，background-image、background(但不是background-color) 都可以設定漸層。
2. 漸層顏色變化的方向，可以由時針由圓心到針頭方向(為顏色渲染的方向)。
3. 預設角度為 180deg
4. **電腦只有預設螢幕寬，而高度無設定，故在使用to top時，毀讓畫面變成條紋狀，故解決方法為設height:100vh;**

.linear-gradient{
範例一
background-image:linear-gradient(red,yellow,white);
範例二
background:linear-gradient(45deg,red,yellow,white); 
範例三
background-image:linear-gradient(to right,green,yellow,white);
    }
範例四---圓心放射漸層 
 background:radial-gradient(white 0%,#ffffaa 10%,pink 100%);

> 注意
> background-attachment:fixed
> 背景設定為 background-attachment:fixed，背景圖片的放置位置是以視埠(view port)為基準，也就是會以瀏覽器左上角開始平舖，而不是從個別元素盒子的左上角開始平鋪

# box-model

## margin
- margin為邊距，可以為負值
- padding內距，不可為負值

縮寫方式:

四值:top、right、bottom、left(順時針方向去記)
        margin:50px 50px 50px 50px;
雙值:第一個值為上下，第二值為左右
        margin:50px 50px
單值:上下左右都一樣
        margin:50px

## border-style
solid、dotted(點線)、dashed(虛線)、double(雙實線)、groove(刻入)、ride(凸出)、insert(嵌入)、outset(浮雕)

border: 12px outset rgb(85, 131, 105);

outline外框
outline: 10px dashed rgb(156, 219, 230);

## box-shadow
- 水平、垂直、模糊半徑、擴散半徑，inset為內陰影
box-shadow: 0px 0px 60px 30px rgba(114, 113, 113, 0.425),inset 0 0 30px 10px rgb(248, 178, 178);

## 卷軸
overflow:overflow-x、overflow-y:hidden會將超出的內容隱藏，auto會將超出的部分設定卷軸

## box案例
- 盒子不設高，以內容撐高
<iframe src="https://codepen.io/yc-wang/pen/OJNOpeb" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

- 內容若太多超出高度產生溢出，使用overflow:auto即可解決
<iframe src="https://codepen.io/yc-wang/pen/OJNOmPW" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

-margin垂直向，會重疊，大的會吃掉小的，所以盡量用margin-bottom來設垂直間距
<iframe src="https://codepen.io/yc-wang/pen/yLOPbJq" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>