css歷史

李爵士的挪威同事賴先生在1994首先提出css，倡議了web網(wǎng)頁(yè)應(yīng)該使用通用字體格式和瀏覽器可以支持video標(biāo)簽，微軟的ie常常成為他的批評(píng)對(duì)象，他也是web打印概念的倡導(dǎo)者，用html和css寫書(shū)

css的牛逼之處

css的全稱叫做層疊樣式表

樣式層疊

可以多次對(duì)同一選擇器進(jìn)行樣式聲明

選擇器層疊

可以用不同選擇器對(duì)同一個(gè)元素進(jìn)行樣式聲明

文件層疊

可以用多個(gè)文件進(jìn)行層疊

這些特性使得css極度靈活，也為后來(lái)css被吐槽留下了隱患。

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

http://caniuse.com網(wǎng)站能幫你知道那些瀏覽器支持哪些特性(社區(qū)的力量)

css是藝術(shù)

不要問(wèn)為什么 直接記住結(jié)果 所見(jiàn)即所學(xué)

體系化學(xué)習(xí)

學(xué)一門語(yǔ)言必須學(xué)會(huì)什么

語(yǔ)法（怎么寫代碼）

如何調(diào)試（怎么知道自己代碼錯(cuò)了）

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

標(biāo)準(zhǔn)制定者是誰(shuí)

如何學(xué)

copy——抄文檔、抄老師

run——放在自己的機(jī)器上運(yùn)行成功

modify加入一點(diǎn)自己的想法，然后重新運(yùn)行

語(yǔ)法一

選擇器{

屬性名：屬性值；

/* 注釋*/

}

注意事項(xiàng)

所有符號(hào)都是英文，如果寫錯(cuò)瀏覽器會(huì)警告

區(qū)分大小寫，a和A是不同的東西

沒(méi)有//注釋

最后一個(gè)分號(hào)可以省略，建議不要省略

任何地方寫錯(cuò)了，都不會(huì)報(bào)錯(cuò)，瀏覽器會(huì)直接忽略

語(yǔ)法二：at語(yǔ)法

@

注意事項(xiàng)

@charset必須放在第一行

前兩個(gè)at語(yǔ)法必須以分號(hào)；結(jié)尾

@media語(yǔ)法會(huì)單獨(dú)教學(xué)

charset是字符集的意思，但UTF-8是字符編碼encoding，這是歷史遺留問(wèn)題。

UTF-8的淵源

從前字符集和編碼是相同的，后來(lái)出現(xiàn)了一個(gè)叫unicode的字符集，包括UTF-8/UTF-16/UTF-32，只能把一個(gè)字符編碼放在字符集的位置。

如何調(diào)試

使用W3C驗(yàn)證器（在線/命令工具）

使用vscode/webstorm看顏色

使用開(kāi)發(fā)者工具看警告

必掌握：border調(diào)試法

懷疑某個(gè)元素有問(wèn)題就給這個(gè)元素加border

border沒(méi)出現(xiàn)說(shuō)明選擇器錯(cuò)了或者語(yǔ)法崩了

border出現(xiàn)了檢查邊界是否符合預(yù)期

bug解決了才可以把border刪掉

文檔流

幾個(gè)重要的概念

文檔流normal flow

塊、內(nèi)聯(lián)、內(nèi)聯(lián)塊

margin合并

兩種盒模型（border-box更符合人類思維）

元素已經(jīng)不分外聯(lián)元素和塊級(jí)元素，所有元素都可以是外聯(lián)元素和塊級(jí)元素。

不要在inline元素里寫block元素

流動(dòng)方向

inline元素從左到右，到達(dá)最右邊才會(huì)換行

block元素從上到下，每一個(gè)都另起一行

inline-block也是從左到右

寬度

inline寬度為內(nèi)部inline元素的和，不能用width指定

block默認(rèn)自動(dòng)計(jì)算寬度（auto），可用width指定

inline-block結(jié)合前兩者特點(diǎn)，可用width

div的默認(rèn)寬度是auto，不是100%，永遠(yuǎn)不需要寫寬度百分之百，否則會(huì)出現(xiàn)bug

高度

inline高度由inline-height間接確定，跟height無(wú)關(guān)，跟padding也無(wú)關(guān)

block高度由文檔內(nèi)部流元素決定，可以設(shè)heigjt

inline-block跟block類似，可以設(shè)height，

如果div里什么都沒(méi)有，默認(rèn)高度是0

overflow溢出

當(dāng)內(nèi)容大于容器

當(dāng)內(nèi)容的寬度或高度大于容器的，會(huì)溢出

可用overflow來(lái)設(shè)置是否顯示滾動(dòng)條

auto是靈活設(shè)置（超出時(shí)顯示，不超出時(shí)不顯示）

scroll是永遠(yuǎn)顯示（幾乎沒(méi)有人用）

hidden是直接隱藏溢出部分

visible是直接顯示溢出部分

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

脫離文檔流

block高度由內(nèi)部文檔流元素決定，可以設(shè)height

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

float

position：absolute/fixed

不用上面屬性就不會(huì)脫離

盒模型

content-box和border-box

前者內(nèi)容就是盒子的邊界，后者的邊框才是盒子的邊界

margin合并

父子/兄弟

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

取消合并

父子合并用padding/border/overflow:hidden擋住或者display:flex

兄弟合并是符合預(yù)期的，可以用inline-block消除

顏色

十六進(jìn)制顏色碼#FFF6600或者#F60

RGBA顏色rgb(0,0,0)或者rgba(0,0,0,1)

hsl顏色hsl(360,100%,100%)

取色軟件：snipaste

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。