# ==外距-內距-位置== ## 外距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; ```