css 一行顯示_CSS筆記1

css曆史

李爵士的挪威同僚賴先生在1994首先提出css，倡議了web網頁應該使用通用字型格式和浏覽器可以支援video标簽，微軟的ie常常成為他的批評對象，他也是web列印概念的倡導者，用html和css寫書

css的牛逼之處

css的全稱叫做層疊樣式表

樣式層疊

可以多次對同一選擇器進行樣式聲明

選擇器層疊

可以用不同選擇器對同一個元素進行樣式聲明

檔案層疊

可以用多個檔案進行層疊

這些特性使得css極度靈活，也為後來css被吐槽留下了隐患。

目前世界上使用最廣泛的版本是css2.1

http://caniuse.com網站能幫你知道那些浏覽器支援哪些特性(社群的力量)

css是藝術

不要問為什麼 直接記住結果 所見即所學

體系化學習

學一門語言必須學會什麼

文法（怎麼寫代碼）

如何調試（怎麼知道自己代碼錯了）

在哪查資料（其實就是為了抄代碼）

标準制定者是誰

如何學

copy——抄文檔、抄老師

run——放在自己的機器上運作成功

modify加入一點自己的想法，然後重新運作

文法一

選擇器{

屬性名：屬性值；

}

注意事項

所有符号都是英文，如果寫錯浏覽器會警告

區分大小寫，a和A是不同的東西

沒有//注釋

最後一個分号可以省略，建議不要省略

任何地方寫錯了，都不會報錯，浏覽器會直接忽略

文法二：at文法

@
           

注意事項

@charset必須放在第一行

前兩個at文法必須以分号；結尾

@media文法會單獨教學

charset是字元集的意思，但UTF-8是字元編碼encoding，這是曆史遺留問題。

UTF-8的淵源

從前字元集和編碼是相同的，後來出現了一個叫unicode的字元集，包括UTF-8/UTF-16/UTF-32，隻能把一個字元編碼放在字元集的位置。

如何調試

使用W3C驗證器（線上/指令工具）

使用vscode/webstorm看顔色

使用開發者工具看警告

必掌握：border調試法

懷疑某個元素有問題就給這個元素加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溢出

當内容大于容器

當内容的寬度或高度大于容器的，會溢出

可用overflow來設定是否顯示滾動條

auto是靈活設定（超出時顯示，不超出時不顯示）

scroll是永遠顯示（幾乎沒有人用）

hidden是直接隐藏溢出部分

visible是直接顯示溢出部分

overflow是可以分為overflow-x和overflow-y（不是很好用）

脫離文檔流

block高度由内部文檔流元素決定，可以設height

意味着有些元素可以脫離文檔流

float

position：absolute/fixed

不用上面屬性就不會脫離

盒模型

content-box和border-box

前者内容就是盒子的邊界，後者的邊框才是盒子的邊界

margin合并

父子/兄弟

隻有上下重疊，左右不重疊

取消合并

父子合并用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