css

[at7211]

排版

word-break 超過width讓內容可以換行 word-break: breakall 單字被切開 word-break: break 單字不會被切開 white-space：nowrap不要幫我包起來 內容永遠都在同一行 overflow:hidden超出width範圍的部分會被截斷 overflow:scroll可以滾動的捲軸 text-overflow:elipsis 把多的文字用...蓋掉（記得要先設定white-space：nowrap overflow:hidden）

---

（待查）

box-sizeing

[at7211]

display

block 佔據整行 inline 只占據內容顯示範圍 inline 不能設定width hieght 可以設定左右padding不能設定上下 inline-block 像inline但可以設定width height

[at7211]

position

static 預設。根據瀏覽器預設排版 relative 預設值的相對位置 absolute 父層（parent）作參考點的相對位置，注意父層不能為static，不然會依循更上一層作為參考 fixed 相對於瀏覽器視窗來定位，然後固定住不會受其他元素影響 sticky 跟static一樣，但往下滾動時到達設定值時，會像fixed一樣被固定在某一點 z-index:（數字） 比大小，數字越大的越上層顯示

[at7211]

list

list-style:none 沒有標籤

[at7211]

pseudo-element 偽元素

用途：不用依靠html產生元素，用CSS。

::before把產生的元素放在html內容的前面 ::after把產生的元素放在html內容的前面

---

Example:

<div class="price" data-symbol="NTD">
      1000
</div>
<div class="price" data-symbol="SGD">
      1000
</div>

.price::after {
    content: attr(data-symbol); 
    /* 注意content不能為空，至少要content="" */
    color: red
}

顯示結果 1000 NTD（紅色） 1000 SGD（紅色）

好處：比較簡潔的方式作CSS，不用對後面的內容另外設定span和class

[at7211]

CSS選取器應用

 :nth-child(n)      /*選取第n個標籤，n從1開始*/
   :nth-child(n+4)    /*選取大於等於4的標籤*/
   :nth-child(-n+4)   /*選取小於等於4的標籤*/
   :nth-child(2n)     /*選取偶數個，2n也可以用even*/
   :nth-child(2n-1)   /*選取奇數個，2n-1也可以用even*/
   :nth-child(3n+1)   /*表示隔兩個選一個標籤*/
   :nth-last-child(n) /*選取倒數第n個標籤*/
   :first-child       /*選取第1個標籤*/
   :last-child        /*選取最後一個標籤*/

[at7211]

指定背景圖片大小

background-size：bg-size , bg-size bg-size = auto | length | percentage | cover | contain 預設值為auto，即背景圖片原始長寬。 length指定圖片具體大小的數值，不允許負值。 percentage以背景圖所在元素的百分比指定背景圖大小，不允許負值。 length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另一個數值(高)預設值為auto，此時高度以背景圖原始寬高比例，自動縮放。 cover主要用於背景圖小於所在的內容，而背景圖又不適合使用repeat，此時就可以採用cover的方式，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。 contain與cover正好相反，主要用於背景圖大於所在內容，但卻需要將背景圖完整呈現，此時就可採用contain的方式，使背景圖縮小至內容的大小。