---
# System prepended metadata

title: '==外距-內距-位置=='

---

# ==外距-內距-位置==
## 外距margin
-外距 margin，可以為負
        四個單位: 上 右 下 左
        兩個單位: 上下  左右
        一個單位: 上下左右
        margin-top
        margin-right
        margin-bottom
        margin-left
        置中:auto
```php
網頁有預設的8px
margin:0px;
```
## 內距 padding
```php
固定邊框
box-sizing:border-box;
```
## 位置 position
 可用top、left、right、bottom偏移，可以是負的 
### 相對位置
-以原本的位置做偏移
```php
position:relative
```
### 固定位置
```php
position:fixed
```
### 絕對位置
以上層的relative為基準
```php
position:absolute
```
### 圖層順序位置
```php
z-index:1;
```
## 區塊類型 display
```php
display:block;
style="background:blue;display:inline-block"
```
 -block寬高自行設定 獨佔一格
 -inline 寬高內容決定 與其他元素共用
 -inline block 寬高自行設定 與其他元素共用
 -table-cell div以表格呈現，內容文字垂直置中
 ```php
 style="display:table-cell;vertical-align:middle"
 ```
 ## 超出來的文字 overflow
  ```php
 <div class="square" style="background:orange;overflow:auto"></div>
 ```
 ## 漂浮 float
 ```php
<div class="square" style="float:left; background:orange"></div>
<div class="square" style="clear:both; background:green"></div>
 ```
 ## flex-direction:主軸方向
 row左到右
 row-reverse右到左
 column上到下
 column-reverse下到上
 ```php
 flex-direction:row
 ```
 ## justify-content垂直位置
 flex-start主軸起點
 flex-end主軸終點
 center中間
 space-between空隔在中間
 space-around空格環繞
 space-evenly均分空格
 ```php
 jutify-content:center;
 ```
 ## align-items水平位置單行
 flex-start 交錯起點位置
 flex-end 交錯終點位置
 center中間
 stretch 撐到全滿
 baseline 基點對齊
 ```php
 align-items:center;
 ```
 ## align-content水平位置多行
  flex-start主軸起點
 flex-end主軸終點
 center中間
 space-between空隔在中間
 space-around空格環繞
 space-evenly均分空格
 ```php
 align-content:space-around;
 ```
 ## flex-wrap 換行
 nowrap不換
 wrap換
 wrap-reverse換行後顛倒
 ## align-self設定自己交錯位置
 ```php
 align-self:center;
 ```