---
# System prepended metadata

title: background 、box-model
tags: [css, html]

---

# 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 
```css
.bg-position{
      background-position: center center;
    }
```

## 縮寫規範

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

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

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


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

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

```css
範例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;**
```css
.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>