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
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
border box 邊框盒
- 邊框是盒子的邊界 width = 內(nèi)容寬度 + padding + border
box-sizing:border-box;
4.4 margin合并
只有上下會重疊薛夜,左右從來不重疊
哪些情況會合并
- 父子margin合并梯澜,只有上下重疊晚伙,之間什么都沒有就合并 舉例
- 兄弟margin合并咆疗,只有上下重疊,兄弟合并舉例 中間child1的margin-bottom和child2的margin-top合并到一起了
如何阻止合并
4.5 基本單位
4.5.1 長度單位
- px像素
- em相對于自身font-size的倍數(shù)
- 百分?jǐn)?shù)
- 整數(shù)
- rem
- vw 和vh
4.5.2 顏色
- 十六進(jìn)制:淘寶色
#FF6600
或者#F60
- RGBA顏色:
rgb(0,0,0)
orrgba(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 實踐
注意最后一個例子中,圖片背景下面多余一部分,用下面的代碼去掉
.logo>img {
height: 26px;
vertical-align: top;
}
5.2 flex布局
CSStricks上的文章 a-guide-to-flexbox
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 瀏覽器的渲染原理
- 根據(jù)HTML構(gòu)建DOM樹
- 根據(jù)CSS構(gòu)建CSSOM
- 合并DOM和CSSOM成render tree
- Layout布局(文檔流较解,盒模型奸焙,計算大小和位置)
- Paint繪制(邊框顏色墨榄、文字顏色、陰影……)
- 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)鍵幀
- 過渡