css 一行显示_CSS笔记1
css歷史
李爵士的挪威同事賴先生在1994首先提出css，倡議了web網頁應該使用通用字體格式和瀏覽器可以支持video標簽，微軟的ie常常成為他的批評對象，他也是web打印概念的倡導者，用html和css寫書
css的牛逼之處
css的全稱叫做層疊樣式表
樣式層疊
可以多次對同一選擇器進行樣式聲明
選擇器層疊
可以用不同選擇器對同一個元素進行樣式聲明
文件層疊
可以用多個文件進行層疊
這些特性使得css極度靈活，也為后來css被吐槽留下了隱患。
目前世界上使用最廣泛的版本是css2.1
http://caniuse.com網站能幫你知道那些瀏覽器支持哪些特性(社區(qū)的力量)
css是藝術
不要問為什么 直接記住結果 所見即所學
體系化學習
學一門語言必須學會什么
語法（怎么寫代碼）
如何調試（怎么知道自己代碼錯了）
在哪查資料（其實就是為了抄代碼）
標準制定者是誰
如何學
copy——抄文檔、抄老師
run——放在自己的機器上運行成功
modify加入一點自己的想法，然后重新運行
語法一
選擇器{
屬性名：屬性值；
/* 注釋*/
}
注意事項
所有符號都是英文，如果寫錯瀏覽器會警告
區(qū)分大小寫，a和A是不同的東西
沒有//注釋
最后一個分號可以省略，建議不要省略
任何地方寫錯了，都不會報錯，瀏覽器會直接忽略
語法二：at語法
@注意事項
@charset必須放在第一行
前兩個at語法必須以分號；結尾
@media語法會單獨教學
charset是字符集的意思，但UTF-8是字符編碼encoding，這是歷史遺留問題。
UTF-8的淵源
從前字符集和編碼是相同的，后來出現了一個叫unicode的字符集，包括UTF-8/UTF-16/UTF-32，只能把一個字符編碼放在字符集的位置。
如何調試
使用W3C驗證器（在線/命令工具）
使用vscode/webstorm看顏色
使用開發(fā)者工具看警告
必掌握：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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件架构系列二：Clean架构
- 下一篇： 生态功能区划方法之一：生态敏感性分析法