重新認識切版 - Ep02

CSS 語法

這邊會記錄自己不熟的 CSS 語法，與實作上遇到的觀念。

line-height

line-height是行高設定。當line-height 為 1 時，元素高度就會等於本身的文字內容高度。

因此，要和文字等高的話，就需要變更行高設定。但通常文字內容或是標題的行高都會設定 1.5 或是 1.2，避免內容看起來太擠

/* 16*1.5 = 高度27 */
font-size: 16px;
line-height:1.5;

border

border 的使用。

/* 線條粗細，線條樣式，顏色 */
h1{
    border-bottom:1px solid blue;
}

需要特定方向的線段可以使用border-right，與border-left。像是下方，橘色框框中間的線。

其他用法

/* 首行空格 */
text-indent:32px;

/* 下底線 */
text-decoration:underline;

/* 字和字的距離 */
letter-spacing: 5px;

認識 CSS Reset

user agent stylesheet 是瀏覽器的預設樣式，每一套瀏覽器都有不同的樣式。所以，這時候就需要 CSS Reset，將樣式覆蓋掉，比較好做開發。

• meyerweb

所有樣式全部清空

• Normalize

保有一些瀏覽器該有的樣式，像是li前方的預設點點。

在這邊，需要特別注意的點是，開發者工具有時候會出現被劃掉的 css，原因是因為他被覆蓋掉了。

像是以下設定 Reset 之後，h1 的預設大小與粗體會被清除。

網頁的排版都是關於容器的設計。

瀏覽器會有預設的距離，內建一套 css。

css reset

吃到共同樣式的時候可以用逗號 , 隔開。

css 會優先吃後面的設定，後面會覆蓋掉前面的設定。

區塊元素與行內元素的差異

區塊元素

<h1> 預設樣式 display:block 區塊元素。

還包括，p，ul>li，div。

div 是區塊元素。沒有語意，單純拿來排版的標籤。

區塊元素特性：

• 盡可能占滿整個版面
  
• 區塊元素會另起一行進行呈現，不管你 width 設定多少。
  
• 依照父元素的寬度自適應延伸佔滿 (當網頁拉大或拉小的時候，寬度會進行更動)

判斷是否為區塊元素不需要特別記憶，只需要加上下方 css，就可以判斷。

background:gray;
color: white;

行內元素

像是a標籤會並排在一起。<span>，點綴樣式用的，不會有突然奇怪的斷行( 區塊元素 )。

• 比較常用在段落裡
• 沒辦法直接設定寬高。 像是width:300px，height:300px是無法使用的，因為它本身的設定就是做文字段落的使用。

但是，如果想要將行內元素轉換成區塊元素，只要加上 display:block。h1加上display:inline-block也可以設定成行內元素。

<a> 要做按鈕時，設計成 display:block，將按鈕便的比較大顆，讓使用者在點擊的時候，都可以點到。可以直接將class 設定在上面。

div 與後代選擇器運用

div無語意，單純拿來排版的標籤。透過 div 可以將內容切成好幾等分，依序向下排(預設)。

後代選擇器，.style a，調整裡面的a標籤 。

<a href="https://www.google.com/" class="style">Hello</a>

margin 與 padding

• margin 是向外推出空間。
• padding 是向內推出空間。

只有 padding 和 border 才會影響到本身的實際寬高，margin 並不會，因為他是向外推擠。

Box Model 盒模型概念

查看開發者人員工具時，就可以看到盒模型。

盒模型的預設是box-model: content-box;，所以padding和border會影響到他的寬高，margin並不會。

若是不想去計算是否或超出自己設定的寬度，可以設定成box-model:border-box;。將會重新計算，再來往內推。不會影響到整個容器。

*，可以讓全部的標籤都可以吃到的語法。

*,*:before,*:after{
    box-model: border-box
}

區塊水平置中(不使用 flex)

若想將區塊水平置中，卻不使用 flex 的話，可以使用margin: o auto;。

width: 100px;
margin-left: 0 auto;
margin-right: 0 auto;

文字置中

text-align:center