CSS 知識總結(jié)

1 CSS的簡介與歷史

CSS (Cascading Style Sheets谈况,層疊樣式表)是用來控制網(wǎng)頁在瀏覽器中的顯示外觀的聲明式語言碑韵。

為什么叫“層疊”呢祝闻?
層疊提供了極大的靈活性

  • 樣式層疊:可以多次對同一選擇器進(jìn)行樣式聲明
  • 選擇器層疊:可以用不同選擇器對同一元素進(jìn)行樣式聲明
  • 文件層疊:可以用多個文件進(jìn)行層疊

版本歷史

  • 1994年联喘,哈肯·維姆·萊提出了CSS的最初建議耸袜。
  • CSS1:1996年哈肯·維姆·萊與伯特·波斯發(fā)布
  • CSS2:1998年發(fā)表
  • CSS2.1:2004~2011堤框,使用最廣泛
  • CSS3:1999年開始起草蜈抓,分成了不同類別沟使,稱為“modules”
  • CSS4:不存在腊嗡,從CSS3開始燕少,所有子模塊分開制定標(biāo)準(zhǔn)

2 常用工具網(wǎng)站

2.1 caniuse.com

Can I use提供了PC瀏覽器和手機端瀏覽器兼容情況的信息客们,如果你不確定某CSS特性在各個瀏覽器上的兼容情況底挫,可以直接上這個網(wǎng)站查建邓。

2.2 MDN

MDN是社區(qū)維護(hù)的前端開發(fā)技術(shù)文檔涝缝,內(nèi)容很新,有問題也會及時修改臀规。我在學(xué)CSS的時候就給MDN CSS里的代碼demo提過bug塔嬉,很快就修復(fù)了

遇到不熟悉的東西谨究,在搜索引擎搜索keyword MDN

2.3 css-tricks.com

專門收集CSS小技巧的網(wǎng)站
講解flex
講解grid

遇到不熟悉的東西胶哲,在搜索引擎搜索keyword css-tricks

2.4 zhangxinxu.com

遇到不熟悉的東西鸯屿,在搜索引擎搜索keyword 張鑫旭

2.5 練習(xí)素材

dribbble.com是設(shè)計作品整體質(zhì)量非常高的網(wǎng)站寄摆,許多攝影師婶恼、設(shè)計師和其他創(chuàng)意產(chǎn)業(yè)人士都喜歡在這里展示其未完成的設(shè)計勾邦,通過與其他設(shè)計師的共同探討來激發(fā)自己的靈感检痰。

freepik.com Free Vectors, Stock Photos, PSD and Icons

365psd.com UI套件

3 CSS 語法

CSS的語法很簡單,主要就兩種格式

語法一

選擇器 {
    屬性名:屬性值;
    /*注釋*/
}
  • 區(qū)分大小寫
  • 分號建議不省略
  • 注意單位

語法二

@charset "UTF-8";
@import url(default.css);
@media (min-width:100px) and (max-width:200px){
    * {
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    img{
        max-width:100%
    }
}
  • @charset必須放在第一行
  • 前兩個@一定要加分號

4 CSS 重要概念

4.1 內(nèi)聯(lián)公壤,塊厦幅,內(nèi)聯(lián)塊

在HTML5的概念里确憨,所有元素都可以是內(nèi)聯(lián)元素瓤的,所有元素也都可以是塊級元素圈膏』ぃ看樣式尿褪,比如display:inline;就是內(nèi)聯(lián)元素杖玲。但是瀏覽器默認(rèn)會給span加樣式display:inline;

4.2 文檔流 Normal Flow

指的是元素正常的流動方向摆马。span等內(nèi)聯(lián)元素正常是從左到右流動跪帝,div等塊元素正常是從上到下伞剑。

流動方向

  • inline元素從左到右黎泣,到達(dá)最右邊才會換行
  • block元素從上到下抒倚,每一個都另起一行
  • inline-block元素也是從左到右托呕,但是內(nèi)部單個元素不會折行

寬度

  • inline寬度為內(nèi)部inline元素的和项郊,不能用width指定
  • block默認(rèn)自動計算寬度width:auto;,可以用width指定差油,注意它占滿全行時并不意味著width:100%蓄喇,我們給div加上margin:20px;它也是占滿全行
  • inline-block寬度為內(nèi)部元素的和,但可以用width指定

高度

  • inline高度由line-height間接確定刃鳄,跟height和padding無關(guān);span如果沒有內(nèi)容铲汪,高度是line-htight掌腰,padding不改變span的真實高度齿梁,div無法將padding的部分包進(jìn)來
  • block高度由內(nèi)部文檔流元素決定肮蛹,可以設(shè)置height伦忠。div如果沒有內(nèi)容昆码,高度是0
  • inline-block跟block類似赋咽,可以設(shè)置height

總結(jié)一下

  • inline不能用height和width指定寬高,span既不接受高度淘钟,也不接受寬度
  • 永遠(yuǎn)不要寫width:100%
  • 不要在inline元素里加block元素
  • div脫離文檔流時米母,父元素在算高度時不會算它毡琉。脫離文檔流的方法:position:absolute;或者float:left;或者position:fixed;
  • 如果div中實際的內(nèi)容高于div本身設(shè)置的高度怎么辦?會發(fā)生overflow虱歪。
    • overflow:visible 超出部分放那不用管,用戶能看見
    • overflow:hidden 超出部分不給用戶看見
    • overflow:scroll 不要用师枣,不超出也有滾動條
    • overflow:auto 沒有超出就不現(xiàn)實滾動條践美,超出現(xiàn)實滾動條

4.3 盒模型

盒模型分兩種陨倡,一種是content box兴革,一種是border box杂曲。

兩者的區(qū)別是擎勘,content box的寬度只包含內(nèi)容content棚饵,而border box的寬度包含到border蟹地,即border box的寬度=content+padding+border怪与。

CSS中不做box-sizing設(shè)置時分别,默認(rèn)是content box

content box 內(nèi)容盒

  • 內(nèi)容就是盒子的邊界耘斩,width=內(nèi)容寬度
  • CSS中不做box-sizing設(shè)置時括授,默認(rèn)是content box
content box

border box 邊框盒

  • 邊框是盒子的邊界 width = 內(nèi)容寬度 + padding + border
  • box-sizing:border-box;
border box

4.4 margin合并

margin collapsing

只有上下會重疊薛夜,左右從來不重疊

哪些情況會合并

  • 父子margin合并梯澜,只有上下重疊晚伙,之間什么都沒有就合并 舉例
  • 兄弟margin合并咆疗,只有上下重疊,兄弟合并舉例 中間child1的margin-bottom和child2的margin-top合并到一起了

如何阻止合并

  • 父子合并
  • 兄弟合并是符合預(yù)期的漓踢,但是也可以用inline-block消除,舉例

4.5 基本單位

4.5.1 長度單位

MDN font-size

  • px像素
  • em相對于自身font-size的倍數(shù)
  • 百分?jǐn)?shù)
  • 整數(shù)
  • rem
  • vw 和vh

4.5.2 顏色

  • 十六進(jìn)制:淘寶色 #FF6600 或者#F60
  • RGBA顏色:rgb(0,0,0) or rgba(0,0,0,1)
  • hsl顏色:hsl(360,100%,100%)

5 CSS 布局

5.1 float布局

需要兼容IE9時考慮用這個布局

5.1.1 步驟

  • 在子元素上加float:left 和 width
  • 在父元素上加.clearfix
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

5.1.2 經(jīng)驗

  • 留一些空間喧半,或者最后一個不設(shè)width(或者max-width)
  • 不需要做響應(yīng)式,因為這個布局方法是為IE準(zhǔn)備的扁耐,手機沒IE婉称,而且在手機上計算像素很麻煩
  • IE6/7存在雙倍margin bug

5.1.3 實踐

  • 用float做兩欄布局 舉例
  • 用float做三欄布局
  • 用float做四欄布局
  • 用float做平均布局 舉例

注意最后一個例子中,圖片背景下面多余一部分,用下面的代碼去掉

.logo>img {
  height: 26px;
  vertical-align: top;
}

5.2 flex布局

CSStricks上的文章 a-guide-to-flexbox

使用flex布局實現(xiàn)上面的例子

5.2.1 container屬性

  • 讓元素變成容器
.container {
    display:flex;
}
  • 改變items流動方向(主軸)flex-direction: row|row-reverse|column|column-reverse;
  • 控制折行 flex-wrap: nowrap|wrap;
  • 主軸對齊方式 justify-content: flex-start|flex-end|center|space-between;
  • 次軸對齊align-items: flex-start|flex-end|center|stretch|baseline;
  • 多行內(nèi)容布局(很少用)

5.2.2 items屬性

  • 指定item順序
item:first-child{
    order:100;
}
item:nth-child(2){
    order:1;
}
  • 讓item長胖flex-grow
  • 控制item變瘦flex-shrink
  • 某個特立獨行align-self

通關(guān) 青蛙游戲:
https://flexboxfroggy.com/#zh-cn

5.2.3 經(jīng)驗

  • 永遠(yuǎn)不要把width和height寫死构蹬,除非特殊說明
  • 用min-width,max-width,min-height,max-height
  • flex 可以基本滿足需求
  • 和margin-xxx:auto的配合,在后面寫一個margin-xxx:auto相當(dāng)于space-between

5.3 grid布局

尤其適合不規(guī)則布局

.container{
    display:grid;
}

通關(guān) Grid Garden 游戲:
https://cssgridgarden.com/#zh-cn

6 CSS 定位

布局是在二維平面上的概念王暗,而定位說的是垂直于屏幕的概念。

可以想像庄敛,垂直于屏幕俗壹,從上到下依次是 舉例

  • z-index > 0
  • 內(nèi)聯(lián)元素
  • 浮動元素
  • 塊級元素
  • border
  • background

6.1 position屬性

舉例

  • static默認(rèn)值,會待在文檔流里
  • relative相對定位藻烤,一般用來做爸爸
  • absolute一般基于祖先中最近的一個非static定位绷雏,一般是用relative
  • fixed固定定位头滔,相對于視口定位,如廣告拙毫,回到頂部按鈕膘婶。手機上盡量不要用這個
  • sticky 粘滯定位拯刁,兼容性差

6.2 z-index

  • z-index和relative配合會自己創(chuàng)建一個層疊上下文,即自己的小世界,注意默認(rèn)值z-index:auto不會創(chuàng)建
  • 這個小世界里的所有z-index與外界無關(guān)
  • 只有同一個小世界里的z-index才能比較
    http://js.jirengu.com/gewob/1/edit?html,css,output

哪些元素可以創(chuàng)建層疊上下文

  • z-index 非auto
  • flex
  • opacity 不透明度,會影響里面所有元素
  • transform

注意:負(fù)index有可能逃不出小世界
http://js.jirengu.com/xoyuv/12/edit?html,css,output

6.3 經(jīng)驗

  • 如果寫了absolute,一般都得補一個relative
  • 如果寫了absolute或者fixed召锈,一定要補too和left,不然有些瀏覽器會位置錯亂
  • 善用left100%
  • 善用50% ,負(fù)margin
  • 手機上不要用fixed
  • 父元素若有transform:scale(0.9) 卵惦,fixed也會出錯

7 瀏覽器的渲染原理

  1. 根據(jù)HTML構(gòu)建DOM樹
  2. 根據(jù)CSS構(gòu)建CSSOM
  3. 合并DOM和CSSOM成render tree
  4. Layout布局(文檔流较解,盒模型奸焙,計算大小和位置)
  5. Paint繪制(邊框顏色墨榄、文字顏色、陰影……)
  6. Composite合成(根據(jù)層疊關(guān)系展示畫面)

三種不同的渲染方式

  • 全走
  • 跳過layout
  • 跳過layout和paint

各個瀏覽器測試的每個屬性怎么觸發(fā)渲染流程:
https://csstriggers.com/

渲染性能優(yōu)化:
https://developers.google.com/web/fundamentals/performance/rendering

8 CSS動畫

  • 播放速度

將div從左向右移動

8.1 transform

  • 位移translate
  • 縮放scale
  • 旋轉(zhuǎn)roatte,360deg旋轉(zhuǎn)制作loading效果
  • 傾斜skew

注意

  • inline不支持transform,要先變成block
  • 一般都需要transition過渡屬性進(jìn)行輔助

8.2 transition過渡

用來補充關(guān)鍵幀
紅色方塊逐漸透明示例

  • 屬性名 left
  • 時長 200ms
  • 過渡方式 linear
  • 延遲

不是所有屬性都能過渡

  • display:block => none直接消失了
  • visibility:visible => hidden最后才不見,還占著位置
  • background顏色可以過渡
  • opacity不透明度可以過渡,但不建議使用

8.3 Animation

方塊向右再向下移動示例

  • 關(guān)鍵幀
  • 過渡
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疆前,一起剝皮案震驚了整個濱河市胸完,隨后出現(xiàn)的幾起案子锨能,更是在濱河造成了極大的恐慌斋竞,老刑警劉巖脖卖,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件唇礁,死亡現(xiàn)場離奇詭異砸讳,居然都是意外死亡常遂,警方通過查閱死者的電腦和手機漠另,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進(jìn)店門窘奏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人袁翁,你說我怎么就攤上這事抑钟。” “怎么了疟位?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵非洲,是天一觀的道長弓坞。 經(jīng)常有香客問我,道長凝垛,這世上最難降的妖魔是什么让网? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮撇吞,結(jié)果婚禮上画机,老公的妹妹穿的比我還像新娘步氏。我一直安慰自己铺董,他們只是感情好精续,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著披泪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钙姊。 梳的紋絲不亂的頭發(fā)上胀莹,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機與錄音婚温,去河邊找鬼描焰。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的荆秦。 我是一名探鬼主播篱竭,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼步绸!你這毒婦竟也來了掺逼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤瓤介,失蹤者是張志新(化名)和其女友劉穎吕喘,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刑桑,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡氯质,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了漾月。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片病梢。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖梁肿,靈堂內(nèi)的尸體忽然破棺而出蜓陌,到底是詐尸還是另有隱情,我是刑警寧澤吩蔑,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布钮热,位于F島的核電站,受9級特大地震影響烛芬,放射性物質(zhì)發(fā)生泄漏隧期。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一赘娄、第九天 我趴在偏房一處隱蔽的房頂上張望仆潮。 院中可真熱鬧,春花似錦遣臼、人聲如沸性置。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鹏浅。三九已至,卻和暖如春屏歹,著一層夾襖步出監(jiān)牢的瞬間隐砸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工蝙眶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留季希,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像胖眷,于是被迫代替她去往敵國和親武通。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容