css 超出換行 初探CSS

2021-10-13 18:19:21 字數 2125 閱讀 4309

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