排版小技巧

• 比較早期的排版都是用表格(table)的方式來排版，現在不會用表格(table)的方式來排版了，而是用div。

• div = 原文： Division，簡單來說就是版塊、區塊的意思，可以決定元素的大小, 最常拿來排版的標籤。

• 看標籤 的小技巧：可以展開折起來看，code 旁邊有個小箭頭可以按一下隱藏裡面的 code , 一層一層慢慢看，比較不會亂掉跟眼花。

• chorme 的檢查會很常用，找 bug 會用他來查

• {}特殊的選擇器，全部標籤都能選到

• border: 1px solid black; 框線:大小、樣式、顏色

讓畫面有邊界線語法(方便排版)：

{
   border: 1px solid black;
} 

版面寬度應用

• 計算寬度的方法：width: calc(100%/3); 可以不用計算需要幾px，可以直接裡面計算。
• width: 100%; 所在的容器把他填滿不是符合版面大小
• flex：可以解讀成靈活的箱子
• dlisplay:顯示模式
• display: flex;讓內部第一層元素左右並排 ，會自動抓裡面的寬度
• flex-wrap: wrap;裡面的寬度不要自動縮放，放不下就換行
• padding: 30px 10px;對內留白：上下 左右 */
• padding: 15px; 上下左右都是留白15px
• 網頁檢查工具：綠色：padding 橘色：marging