【前端--JavaScript】知識點（九）—— 給男友總結的CSS知識點（三）

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

天天回顧幾個知識點，在平時代碼中寫起來會更加駕輕就熟。

Chrome怎麼支持小於12px 的文字

瀏覽器最小字體是12px，針對谷歌瀏覽器內核，使用transform屬性：

font-size:10px;    
-webkit-transform:scale(0.8); 
display:block;
複製代碼

png、jpg、gif、webp 圖片格式的含義

• png：便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式。優勢是：壓縮比高，色彩好。大多數地方均可以用。
• jpg：一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的不錯。在www上，被用來儲存和傳輸照片的格式。
• gif：一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果.
• webp：谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久，兼容性很差，目前谷歌和opera支持。

style標籤寫在body後與body前的區別

首先在頁面中，加載是自上而下執行的，首先加載的是樣式。寫在body後，因爲瀏覽器以逐行的方式對html文檔進行解析，當解析到尾部的樣式表會致使瀏覽器中止以前的渲染，等待樣式表解析完後再從新渲染，在IE可能出現樣式失效致使的頁面閃爍問題。

CSS屬性overflow屬性用來處理溢出元素的狀況

scroll：會出現滾動條； auto：子元素內容大於父元素時候會出現滾動條； visiable：溢出內容出如今父元素以外； hidden：溢出內容隱藏；

flex佈局以及屬性的解釋

• flex-direction:控制主軸的方向

1. row 水平從左到右（默認）
2. row-reverse 水平從右到左
3. column垂直從上到下
4. column-reverse垂直從下到上

• justify-content:控制子元素在子元素在主軸的對齊方式

1. flex-start 從主軸起點到主軸終點
2. flex-end 從主軸終點到起點
3. center 居中
4. space-between 兩端分佈
5. space-around 環繞分佈
6. space-evenly 均衡分佈

• align-items 控制子元素在側軸的對齊方式

1. flex-start 從側軸起點到終點
2. flex-end 從側軸終點到起點
3. center 居中
4. stretch 拉伸對齊，想要拉伸效果得子元素設置高度

• flex-wrap 控制子元素是否換行

1. nowrap 默認，不換行
2. wrap 換行

• align-content 控制子元素在側軸的對齊方式（多行）

1. flex-start 從主軸起點到主軸終點
2. flex-end: 從主軸的終點到起點
3. center: 居中對齊
4. space-between 兩端分佈
5. space-around 環繞分佈
6. space-evenly 均衡分佈
7. stretch: 拉伸分佈 要拉伸效果 子元素不要設置高度

文字溢出時顯示點點點

• 單行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複製代碼

• 多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;  //這裏是在第二行有省略號
overflow: hidden;
複製代碼

CSS3文本屬性

• text-shadow:2px 2px 8px #000;：參數1爲向右的偏移量，參數2爲向左的偏移量，參數3爲漸變的像素，參數4爲漸變的顏色

• text-overflow：規定當文本溢出包含元素時發生的事情 text-overflow:ellipsis(省略)

• text-wrap：規定文本換行的規則

• word-break：規定非中日韓文本的換行規則

• word-wrap： 對長的不可分割的單詞進行分割並換行到下一行

• white-space: 規定如何處理元素中的空白 white-space:nowrap 規定段落中的文本不進行換行

CSS3漸變

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...);
複製代碼

漸變方向（可選，默認從上到下），取值：（to bottom、to top、to right、to left、to bottom right）

• 徑向漸變（Radial Gradients）- 由它們的中心定義

background-image: radial-gradient(position, shape size, start-color, stop-color);
複製代碼

• position：定義圓心位置

• shape size：由2個參數組成，前者shape定義圓形或橢圓形，後者size定義大小；

  1. shape它能夠是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
  2. size 參數定義了漸變的大小。它能夠是如下四個值：closest-side、farthest-side、closest-corner、farthest-corner

• start-color：設置開始的顏色；

• stop-color：設置結束的顏色；

• position、shape size可選可不選，若是沒有進行設置，表示該參數採用默認值。

• start-color和stop-color爲必須設置的參數，而且徑向漸變同線性漸變同樣能夠設置多種顏色。

CSS3中box-shadow

box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每一個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px #888888;
複製代碼

• h-shadow：必需。水平陰影的位置。容許負值。

• v-shadow：必需。垂直陰影的位置。容許負值。

• blur：可選。模糊距離。

• spread：可選。陰影的尺寸。

• color：可選。陰影的顏色。請參閱 CSS 顏色值。

• inset：可選。將外部陰影 (outset) 改成內部陰影。

CSS3 過渡

CSS3的transition容許CSS的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊，得到焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
複製代碼

transition-property：指定過渡的CSS屬性。

1. none：沒有指定任何樣式。
2. all：默認值，表示指定元素全部支持transition-property屬性的樣式。
3. ：指定一個或多個樣式。並非全部樣式都能應用transition-property進行過渡，只有具備一箇中點值的樣式才能具有過渡效果，如顏色，長度，漸變等。

transition-duration：指定完成過渡所需的時間。

1. 爲數值，單位爲s(秒)或ms(毫秒)，默認值是0。當有多個過渡屬性時，能夠設置多個過渡時間分別應用過渡屬性，也能夠設置一個過渡時間應用全部過渡屬性。

transition-timing-function：指定過渡調速函數。

1. ease：默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。
2. linear：元素樣式從初始狀態過渡到終止狀態速度是恆速。
3. ease-in：元素樣式從初始狀態過渡到終止狀態時，速度愈來愈快，呈一種加速狀態。這種效果稱爲漸顯效果。
4. ease-out：元素樣式從初始狀態過渡到終止狀態時，速度愈來愈慢，呈一種減速狀態。這種效果稱爲漸隱效果。
5. ease-in-out：元素樣式從初始狀態到終止狀態時，先加速再減速。這種效果稱爲漸顯漸隱效果。

transition-delay：指定過渡開始出現的延遲時間。

1. 用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行過渡效果，它能夠是正整數，負整數和0，非零的時候必須將單位設置爲s(秒)或ms(毫秒)。