李爵士的挪威同事賴先生在1994首先提出css，倡議了web網頁應該使用通用字型格式和瀏覽器可以支援video標籤，微軟的ie常常成為他的批評物件，他也是web列印概念的倡導者，用html和css寫書
css的全稱叫做層疊樣式表
可以多次對同一選擇器進行樣式宣告
可以用不同選擇器對同乙個元素進行樣式宣告
可以用多個檔案進行層疊
這些特性使得css極度靈活，也為後來css被吐槽留下了隱患。
目前世界上使用最廣泛的版本是css2.1
**能幫你知道那些瀏覽器支援哪些特性(社群的力量)
不要問為什麼 直接記住結果 所見即所學
語法（怎麼寫**）
如何除錯（怎麼知道自己**錯了）
在哪查資料（其實就是為了抄**）
標準制定者是誰
copy——抄文件、抄老師
run——放在自己的機器上執行成功
modify加入一點自己的想法，然後重新執行
選擇器注意事項
@charset必須放在第一行
前兩個at語法必須以分號；結尾
@media語法會單獨教學
charset是字符集的意思，但utf-8是字元編碼encoding，這是歷史遺留問題。
從前字符集和編碼是相同的，後來出現了乙個叫unicode的字符集，包括utf-8/utf-16/utf-32，只能把乙個字元編碼放在字符集的位置。
使用vscode/webstorm看顏色
使用開發者工具看警告
懷疑某個元素有問題就給這個元素加border
border沒出現說明選擇器錯了或者語法崩了
border出現了檢查邊界是否符合預期
bug解決了才可以把border刪掉
文件流normal flow
塊、內聯、內聯塊
margin合併
兩種盒模型（border-box更符合人類思維）
元素已經不分外聯元素和塊級元素，所有元素都可以是外聯元素和塊級元素。
不要在inline元素裡寫block元素
inline元素從左到右，到達最右邊才會換行
block元素從上到下，每乙個都另起一行
inline-block也是從左到右
inline寬度為內部inline元素的和，不能用width指定
block預設自動計算寬度（auto），可用width指定
inline-block結合前兩者特點，可用width
div的預設寬度是auto，不是100%，永遠不需要寫寬度百分之百，否則會出現bug
inline高度由inline-height間接確定，跟height無關，跟padding也無關
block高度由文件內部流元素決定，可以設heigjt
inline-block跟block類似，可以設height，
如果div裡什麼都沒有，預設高度是0
當內容的寬度或高度大於容器的，會溢位
可用overflow來設定是否顯示滾動條
auto是靈活設定（超出時顯示，不超出時不顯示）
scroll是永遠顯示（幾乎沒有人用）
hidden是直接隱藏溢位部分
visible是直接顯示溢位部分
overflow是可以分為overflow-x和overflow-y（不是很好用）
block高度由內部文件流元素決定，可以設height
意味著有些元素可以脫離文件流
float
position：absolute/fixed
不用上面屬性就不會脫離
content-box和border-box
前者內容就是盒子的邊界，後者的邊框才是盒子的邊界
父子/兄弟
只有上下重疊，左右不重疊
父子合併用padding/border/overflow:hidden擋住或者display:flex
兄弟合併是符合預期的，可以用inline-block消除
十六進製制顏色碼#fff6600或者#f60
rgba顏色rgb(0,0,0)或者rgba(0,0,0,1)
hsl顏色hsl(360,100%,100%)
取色軟體：snipaste
css強制換行和超出隱藏實現
一 強制換行 1 word break break all 只對英文起作用，以字母作為換行依據。2 word wrap break word 只對英文起作用，以單詞作為換行依據。3 white space pre wrap 只對中文起作用，強制換行。word break break all 和 wo...
CSS設定超出指定寬度自動換行
一 背景 最近專案中有用到在div中顯示使用者反饋的資訊，是指定寬度的div,超出要自動換行，開始寫好後感覺應該沒什麼問題，後來自己隨便輸入測試資料的時候發現 如果是純字母或者是純數字就會出現超出了也不會自動換行的問題，甚是無解，後經過努力，已經完美解決，下面來介紹解決方式。二 解決方式 對於div...
CSS設定超出指定寬度自動換行
一 背景 最近專案中有用到在div中顯示使用者反饋的資訊，是指定寬度的div,超出要自動換行，開始寫好後感覺應該沒什麼問題，後來自己隨便輸入測試資料的時候發現 如果是純字母或者是純數字就會出現超出了也不會自動換行的問題，甚是無解，後經過努力，已經完美解決，下面來介紹解決方式。二 解決方式 對於div...