李爵士的挪威同事賴先生在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...