翻出我4年前看的《精通css》一書，可惜當初沒有整理讀書筆記的習慣，最近又很少寫前端，遂很多東西、知識點遺忘了，恰且現在 css 也有些變化和進步，遂一起打包整理，輸出成幾篇 blog 系列，以犒自己。
（1）字型
字型分serif(有襯線)和sans-serif(無襯線)。
sans-serif 被認為是比 serif 更容易閱讀的。
（2）第三方字型
@font-face 可引入第三方字型。
font-size可以設定字型大小，單位有 %、px、em、rem。
(1) 各單位對比
單位絕對值
相對值相對於什麼元素px√
n/a%
√父元素em√
父元素rem
√根元素 ( html / body [html 比 body 優先順序高] )
(2) 為什麼推薦用 rem？
首先px是相對大小，萬一想適配螢幕時去放縮所有元素的字型，就很不方便，所以 pass。
所以推薦用 rem。
(3) 怎麼使用 rem？
a：因為這樣 rem 的 base 值就是 10px，有兩個好處：
1、指定時很好計算。
2、若是小數會被轉成整數 (如 1.5rem = 15px )，因為 font-size 不支援含小數的 px。
css 裡的顏色值有三種型別:
(1)
alt 和 title 的區別
alt是當不存在時的替代文字，title是對的描述與進一步說明。
為了 seo，最好兩個都加上。(1) 屬性
順序如下：
在用background簡寫時，順序跟上面保持一致：
body
(2) 背景所在定位
background-position: [橫向] [縱向]
取值型別：
百分比：x%
數值：px、em 等
q：為什麼 百分比% 的規則定義的與眾不同？
a：其實是為了照顧人們的直覺：
background-position: 0 0; //靠著左上角
background-position: 50% 50%; //水平垂直居中
background-position: 100% 100%; //靠著右下角
1、background-origin，background-clip的取值：
border-box： content + padding + border
padding-box【預設】 ： content + padding
content-box：content
2、background-origin，background-clip的區別：
前者是移動，後者是切割 (基於 background-origin 的值 )。
(4) 新增多個背景
#example12、第一張顯示在最頂端，以此類推。
請最好按照下面的順序新增偽類，否則有些會失效。
(1) a:link 顯示
(2) a:hover 懸停
(3) a:active 點時
(4) a:visited 點過
當鍵盤移動到鏈結上時，還會有 a:visited。
click!
block——1
block——2
2、瀏覽器開啟url#target即可自動跳轉 (當前頁面重新整理不行)
三年二班2019期末考試
學生各科目成績
語文數學
張三7880
李四9288
王五6273
summary類似
的 alt 屬性。
(2)th/td的 scope 屬性用來標識是列頭還是行頭。
以上面的 demo 為例：
(1) 合併（collapsed）
table, td ,th
table
/* 下面為重點 */
(2) 分隔（separated）
table, td ,th
table
/* 下面為重點 */
table
若 border-collapse: separate ，而省略 border-spacing，那 border-spacing 也是有預設值的且非0。( 0 則跟 border-collapse: collapse 一樣了 )
是否支援?
border
width/height
是否符合盒模型
margin
padding
text-align
vertical-align
table
√√ / √×√
√√×caption
√√ / √√√
√√（預設居中）
×thead/tbody
×× / ×
n/a××√
√tr×× / √√×
×√√th/td
√√ / √√×
√√（預設居中）
√
唉，table 真的有太多坑了。
(1) table 標籤的cellspacing/cellpadding屬性已被淘汰，請用border-spacing和padding代替。
1、fieldset 周圍會加上乙個細線邊框（哪怕沒有 legend 標籤），想去掉就把 border 屬性設定為 none 。
2、input 元素 focus 時缺省會有乙個藍色輪廓，outline: none可以去掉。
css一些標籤區別
1.strong和b,em和i標籤的區別 表現形式都是文字加粗，文字傾斜，區別在strong和em是具備語義化的，而b和i是不具備語義化的 2.引用標籤 block quote 引用大斷的段落解釋 q 引用小段詞語解釋 abbr 縮寫或首字母縮略詞 address 引用文件位址資訊 cite 引用著...
對CSS盒模型的一些理解
盒模型主要由4部分組成 外邊距 margin 邊框 border 內邊距 padding 內容 content 可以理解為我們日常生活中的乙個快遞盒子，外邊距相當於快遞盒與快遞盒之間的距離，邊框相當於快遞盒，內邊距相當於快遞盒裡裝的東西與快遞盒內部之間的距離 類似於防震填充物，即填充層 而內容則相當...
偽類的用法以及css一些常用的標籤
偽類的用法 標籤 link 表示該超連結文字尚未被點選 visited 表示該超連結文字已被點選過 active 表示該超連結文字正被點選,但未被放開 hover 表示當滑鼠停留在文字上 css的一些常用屬性標籤 background 背景顏色 padding 內邊框 padding top 上邊距...