在2019年享受學習寫程式及被雇用的過程-第2個月

第2個月：Javascript


要回答的大問題：Javascript如何讓機器做到你想要它做的事？

在2019年享受學習寫程式及被雇用的過程-第1個月

第一個月：整個架構
要回答的大問題：電腦，網路，網站如何運作？我要如何建立一個網站？

S6-L38-絕對定位設計優惠價

[在產品左上角加上優惠內容]


使用絕對定位 position:absolute

• 不會佔空間
• 不會推擠其他元素

S6-L37-使用 ul li 設計產品列表

[設計產品列表]


為何不能用div來排？
主要因為這邊是主題式的選單，所以要用ul>li方式


<li>是block元素，但可用float去讓其往左或右做並排效果

block元素可設定width/height

注意可設定box-sizing:border-box

S6-L36-簡報呈現相對定位跟絕對定位的技巧

用動畫再次說明絕對定位與相對定位的使用方式

重點在於：
設定元素為display:absolute時
會去看父層元素有沒有定位(relative/absolute)
如果有，就會以該元素當成基準

S6-L35-相對定位、絕對定位元素技巧：z-index - relative、absolute

文件流中，預設後面元素若與前面元素重疊，會蓋掉前面的元素

box為黑色

box2為紅色

當重疊時，紅色會蓋掉黑色

S5-L31-LOGO 與選單並排設計技巧

設計左邊是Logo,右邊是List的畫面

結構

S5-L29-兩欄式、三欄式版面定位技巧

如果在menu中去加上假字
為何高度沒有去做推擠？
因為我們高度已經寫死


header/footer高度固定的話可以寫死
但中間內容因為高度不確定
所以不要寫死
這樣可以讓他去用內容去做推擠

S5-L28-使用clear清除浮動

設計
wrap/header/menu/content版型

header

S5-L27-Float浮動定位技巧

如何設計多欄式版型

先製作2個div元素

因為div是屬於block元素
會佔滿一整列的空間


若我們想要讓block元素可以並排
需要使用float
將2個box都設定float:left

注意：
float的元素會去看有沒有超過父層元素的寬度
如果超過，則擠不下的div會放到下一列去

我們這邊的div沒有父層元素
所以是以視窗寬度來看

若box+box2的寬度 > 瀏覽器視窗寬度，則box2會被擠到下一列

如何做到下面的效果？

通常會用父層來控制
設定wrap為寬1000px
box寬200px
box2寬800px
並設定wrap為 margin: 0 auto  (左右置中)

若box2變成801px >1000px
則變成下面結果

S5-L30-設計並排式選單

如何做出並排選單

使用<ul>及<li>來設計

將ul/li放在div.topmenu中

ul>li*5>a + tab展開

<div class="topmenu">
 <ul>
  <li><a href="#">首頁</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
 </ul>
</div>

前面加上CSS Reset (Codepen可於setting中直接設定)
消除<li>前方的實心圓及一些預設的樣式

接著我們要讓<li>並排

<li>是block元素
希望要讓他並排=>使用float

.topmenu ul li{
 float:left;
}

但會發現<li>做float之後
topmenu後面的元素會擠上來

2個解法：
(1)設定topmenu有高度
(因為li設定為float，會導致topmenu看不到，因此高度變成0)

或
(2)在topmenu最後面加上空白div，設定clear:both



<a>是inline元素
要讓它有寬度跟高度的話
要設定為display:block
(這樣可以讓滑鼠在區塊旁邊空白也可以點到)


讓文字
消除下底線：
text-decoration：none


水平置中：
text-align:center

垂直置中：
有多種做法
(1)<a>高度為50px,設定line-height也是50px
(2)用padding-top/left：10px

S6-L34-絕對定位/相對定位

若需要區塊重疊,float無法達成

設定元素
position:absolute，會讓元素獨立浮在一層layer，不佔據原本的空間

會去看父層有沒有定位(absolute或relative)
如果沒有會繼續往上找，直到window (不是body)

範例：

https://codepen.io/kuolun/pen/OrPBgV

設定元素
position:relative，會以元素在原本文件流的位置去座位移，會佔據原本空間

absolute/relative皆可設定負數

紀錄個人所學

情境：
你記得以前做過類似的事，但卻竟不清楚細節

問題：
那些無法從歷史學習的人終究要重蹈覆轍

解決方案：

• 使用部落格記下這些你學到的功課，能幫你找到志趣相同的夥伴
• 避免只寫下學習的內容，應該常常複習並加上新的東西或想法
• 留下你成長的過程

text-decoration下底線的問題

重點：text-decoration屬性不會被繼承

先來看一下

<p>
  <span style="text-decoration: underline;">
     有一些文字
  </span>
</p>

結果如下：

有一些文字

若在中間加上span並設定overline

<p>
  <span style="text-decoration: underline;">
  有一些
  <span style="text-decoration: overline;">額外的</span> 
  文字。
  </span>
</p>

結果如下：

這裡有一些額外的文字。

會發現-額外的-這3個字也有下底線，為何？

我們知道既然text-decoration屬性不會被繼承，那這3個字為何會有下底線呢？

把內部span顏色改成紅色看看

這裡有一些額外的文字。

overline與文字一起變成了紅色，但下底線沒變色

why?

因為下底線實際上是外面span的一部分，它只是在內部span下方經過而已

若我們幫外部span加上背景，一般希望背景會穿過內部span顯示出來

同樣的，父層的文字修飾線就會顯示在子層元素上(即使我們沒有幫子曾元素設定或繼承修飾線)


另外一種情況
若<a>內加上了<span>，如果想移除<a>的下底線，下面方式無法達成：

<a href="http://developer.netscape.com/">这个链接
  <span style="text-decoration: none; font-weight: bold;">
    有个span
  </span>在里面
</a>

必須用下面方式

a:link, a:visited {text-decoration: none;}

另外一個常見的情況是：
想要移除某些特定的links

<table id="navbar">
  <tr>
    <td><a href="link1.html">Home</a></td>
    <td><a href="link2.html">Electronics</a></td>
    <td><a href="link3.html">Accessories</a></td>
    <td><a href="link4.html">Software</a></td>
    <td><a href="link5.html">Checkout</a></td>
  </tr>
</table>

可用

table#navbar a {text-decoration: none;}

上面討論的原則，也適用於其他decoration



結論建議：

• 不要使用<span>去對links做style，無法移除如下底線之類的text-decoration
• text-decoration屬性不會被繼承

參考文章
https://developer.mozilla.org/zh-CN/docs/Understanding_Underlines

Chrome dev tools中CSS的有灰色的部分代表？

有時會看到有灰色的部分(如5)，是什麼意思？

4.繼承的樣式將在“Inherited from <NODE>”標頭下顯示爲一組。點擊標頭中的 DOM 節點可以導航到其在 DOM 樹視圖中的位置。 （CSS 2.1 屬性表顯示了哪些屬性是可以繼承的。）

5.灰色的條目不是已定義的規則，而是在運行時計算的規則。

使用 HTML、CSS 開發一個網站 - 補充(2)-block元素及inline元素的差異

Block元素

• 被渲染成block(區塊)
• 佔據水平所有可用空間(一整列)
• 可設定margin-top 及bottom
• 2個block元素會渲染成2列
• 如：<div> <section><article><nav><h1><h2><p>
  詳細清單

Inline元素

• 只會佔據內容所需的空間(content決定width/height)
• 2個inline元素將會並排在同一列
• 當內容超過可用空間時，line break會被加上去造成換行
• 也使用box-model
• 設定width/height無效
• margin-top/bottom對元素沒作用
• padding-top/bottom，不會把相鄰的元素推開，但是會推開border
• 如<a> <span> <img>
  MDN詳細清單
  
  

如果想要同時有block及inline的行為

設定display:inline-block

使用 HTML、CSS 開發一個網站 - 補充(1)-理解inline元素的CSS box model

每個元素都會被渲染成矩形盒子(有content/padding/border/margin)

根據元素的display屬性

可能會是block/inline box

Inline box會被水平放在一個叫做line box的東西裡

如果沒有足夠水平空間來把所有的元素放進同一列

另一個line box會被在第一個line box下方建立

單一inline元素會被分割而跨列 

當inline box跨列時，邏輯上還是單一個box

這代表水平padding/border/margin只會在

第一列的開頭跟第二列的結尾被套用

下面可看到，設定左右padding在箭頭處並沒有作用 

 而且任何垂直padding/border/margin並不會把上下的元素推開

但是注意：

垂直padding/border仍然有套用

padding也會把border往外推 

如果需要調整列高，使用line-height

原文出處

https://hacks.mozilla.org/2015/03/understanding-inline-box-model/