排版篇

margin（邊界）、border（邊框）、padding（邊距）

margin：城牆外的穀物種植區
border：城牆
padding：城堡到城牆的距離
content：城堡建築本人
Margin
margin-top／right／bottom／left：外距大小; //控制單一方向
margin：（上／右／下／左）; //一個數值
margin：（上／下）（左／右）; //二個數值
margin：（上）（左／右）（下）; //三個數值
margin：（上）(右)（下）(左); //四個數值
Padding
padding-top／right／bottom／left：內距大小; //控制單一方向
padding：（上／右／下／左）; //一個數值
padding：（上／下）（左／右）; //二個數值
padding：（上）（左／右）（下）; //三個數值
padding：（上）(右)（下）(左); //四個數值

這是一個style="border:1px double;margin:10px 60px 30px 140px;"的p

這是一個style="border:1px dotted;padding:10px 60px 30px 140px;"的p

這是一個style="border:1px solid;padding:10px 60px 30px 140px;"的p

常用排版

Position

這是一個被定位的段落

你還記得剛剛那個被定位的段落嗎b？不記得的話往上滑

他使用了style="position:absolute; top:100px; right:20px;"的屬性，不管世界如何變化，他始終如一

這是另一個被定位的段落

他使用了style="position:relative; left:120px;"的屬性，將元素從原本應該在的位置，進行相對的移動

現在看左下角的ufo圖示

他使用了style="position:fixed;left:1rem;bottom: 10px;"的屬性，將元素釘在視窗上

Display:none v.s Visibility:hidden

消失的密室（哈利波特）｜style="Display:none"

消失的密室(哈利波特)｜style="Visibility:hidden"

同場加映：Display:block v.s Display:inline

其實就跟p還有span的關係一樣

Display:block
Display:inline

註：當然你也可做成響應式的，只要在尺寸那邊使用 「%」作單位就好

補充：display:inline-block

對齊｜23種置中方式

對齊這個東西呢，說上好幾天都不是問題，等以後你們真的遇到的時候，就會感受到這句話背後有多少的血與淚

文字對齊

這裡使用了align:center;的屬性，但文字沒有置中

這裡使用了text-align:center;的屬性，但文字還是沒有置中

首先知道text-align:center這個就先對一半

完整的解法是要先用一個div把內容包住，然後把style="text-align:center;"，放在div標籤
文字對齊

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

<div style="text-align:center;">
<p>我是文字</p>
</div>
<div class="text-center">
<p>我是文字</p>
</div>

文字置左

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

<div style="text-align:left;">
<p>我是文字</p>
</div>

文字置右

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

<div style="text-align:right;">
<p>我是文字</p>
</div>

文字分散對齊｜中文分散對齊

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

<div style="text-align:justify;">
<p>我是文字</p> //最後一行沒有分散對齊
</div>
<div style="text-align: justify;text-align-last:justify;">
<p>我是文字</p> //最後一行也會分散對齊
</div>

（補充）首行縮排
style="text-indent:2em;"

首行縮排兩字元，這邊不重要，我只是要增加字數讓他可以顯示兩排就好，快要到了！快要到了！怎麼還沒到？？？？？說好的兩排呢？這下該到了吧。對了這邊不建議中英夾雜，因為中文跟英文的字距不太一樣

物件對齊｜還有其他對齊方式
方法一：水平置中
<div style="display:block;margin:auto;">
//控制左右大小來置中
<img src="圖片連結">我是圖片</img>
</div>

方法二：水平垂直置中

<div style="display:flex;justify-content:center;align-items:center;">
<img src="圖片連結">我是圖片</img>
</div>
回首頁