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)鍵幀
- 過渡
