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

總結

以上是生活随笔為你收集整理的css 一行显示_CSS笔记1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。