Emmet和結(jié)構(gòu)偽類
認(rèn)識(shí)emmet語(yǔ)法
? Emmet (前身為 Zen Coding) 是一個(gè)能大幅度****提高前端開(kāi)發(fā)效率****的一個(gè)工具.
在前端開(kāi)發(fā)的過(guò)程中，一大部分的工作是寫(xiě) HTML媳握、CSS 代碼, 如果手動(dòng)來(lái)編寫(xiě)效果會(huì)非常低.
VsCode內(nèi)置了Emmet語(yǔ)法,在后綴為.html/.css中輸入縮寫(xiě)后按Tab/Enter鍵即會(huì)自動(dòng)生成相應(yīng)代碼
? !和html:5可以快速生成完整結(jié)構(gòu)的html5代碼
>(子代)和+(兄弟)
*(多個(gè))和^(上一級(jí))
()(分組)
屬性(id屬性、class屬性褐缠、普通屬性) {}(內(nèi)容)
div#header+div#main>.container>a[href ]
a[href="http://www.baidu.com"]{百度一下}
$(數(shù)字)
ul>li.item$*5
隱式標(biāo)簽
CSS Emmet
結(jié)構(gòu)偽類 - :nth-child
? :nth-child(1)
- 是父元素中的第1個(gè)子元素
? :nth-child(2n)
n代表任意正整數(shù)和0
是父元素中的第偶數(shù)個(gè)子元素(第2芝囤、4戚揭、6雕旨、8......個(gè))
跟:nth-child(even)同義
? :nth-child(2n + 1)
n代表任意正整數(shù)和0
是父元素中的第奇數(shù)個(gè)子元素(第1、3悲柱、5锋喜、7......個(gè))
跟:nth-child(odd)同義
? nth-child(-n + 2)
- 代表前2個(gè)子元素
結(jié)構(gòu)偽類 - :nth-last-child( )
? :nth-last-child()的語(yǔ)法跟:nth-child()類似，不同點(diǎn)是:nth-last-child()從最后一個(gè)子元素開(kāi)始往前計(jì)數(shù)
:nth-last-child(1)，代表倒數(shù)第一個(gè)子元素
:nth-last-child(-n + 2)嘿般，代表最后2個(gè)子元素
? :nth-of-type()用法跟:nth-child()類似
- 不同點(diǎn)是:nth-of-type()計(jì)數(shù)時(shí)只計(jì)算同種類型的元素
? :nth-last-of-type()用法跟:nth-of-type()類似
- 不同點(diǎn)是:nth-last-of-type()從最后一個(gè)這種類型的子元素開(kāi)始往前計(jì)數(shù)
結(jié)構(gòu)偽類 - :nth-of-type( )段标、:nth-last-of-type( )
? 其他常見(jiàn)的偽類(了解):
:first-child，等同于:nth-child(1)
:last-child炉奴，等同于:nth-last-child(1)
:first-of-type逼庞，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child瞻赶，是父元素中唯一的子元素
:only-of-type赛糟，是父元素中唯一的這種類型的子元素
? 下面的偽類偶爾會(huì)使用:
:root，根元素砸逊，就是HTML元素
:empty代表里面完全空白的元素
否定偽類(negationpseudo-class)
? :not()的格式是:not(x)
x是一個(gè)簡(jiǎn)單選擇器
元素選擇器璧南、通用選擇器、屬性選擇器师逸、類選擇器司倚、id選擇器、偽類(除否定偽類)
? :not(x)表示****除x以外的元素
額外知識(shí)補(bǔ)充
邊框的形狀
? border主要是用來(lái)給盒子增加邊框的, 但是在開(kāi)發(fā)中我們也可以利用邊框的特性來(lái)實(shí)現(xiàn)一些形狀:
? 假如我們將border寬度設(shè)置成50會(huì)是什么效果呢?
如果我們進(jìn)一步, 將另外三邊的顏色去除呢?
如果我們將這個(gè)盒子旋轉(zhuǎn)呢?
? 所以利用border或者CSS的特性我們可以做出很多圖形:
認(rèn)識(shí)Web字體
? 在之前我們有設(shè)置過(guò)頁(yè)面使用的字體: font-family
我們需要提供一個(gè)或多個(gè)字體種類名稱篓像，瀏覽器會(huì)在列表中搜尋对湃，直到找到它所運(yùn)行的系統(tǒng)上可用的字體。
這樣的方式完全沒(méi)有問(wèn)題遗淳，但是對(duì)于傳統(tǒng)的web開(kāi)發(fā)人員來(lái)說(shuō)，字體選擇是有限的;
這就是所謂的 Web-safe 字體;
并且這種默認(rèn)可選的字體并不能進(jìn)行一些定制化的需求;
? 比如下面的字體樣式, 系統(tǒng)的字體肯定是不能實(shí)現(xiàn)的
? 那么我們是否依然可以在網(wǎng)頁(yè)中使用這些字體呢? 使用Web Fonts即可****.
Web fonts的工作原理
? 首先, 我們需要通過(guò)一些渠道****獲取到希望使用的字體****(不是開(kāi)發(fā)來(lái)做的事情):
對(duì)于某些收費(fèi)的字體, 我們需要獲取到對(duì)應(yīng)的授權(quán);
對(duì)于某些公司定制的字體, 需要設(shè)計(jì)人員來(lái)設(shè)計(jì);
對(duì)于某些免費(fèi)的字體, 我們需要獲取到對(duì)應(yīng)的字體文件;
? 其次, 在我們的CSS代碼當(dāng)中使用該字體(重要):
? 最后, 在部署靜態(tài)資源時(shí), 將HTML/CSS/JavaScript/Font一起部署在靜態(tài)服務(wù)器中;
? 用戶的角度:
瀏覽器一個(gè)網(wǎng)頁(yè)時(shí), 因?yàn)榇a中有引入字體文件, 字體文件會(huì)被一起下載下來(lái);
瀏覽器會(huì)根據(jù)使用的字體在下載的字體文件中查找心傀、解析屈暗、使用對(duì)應(yīng)的字體;
在瀏覽器中使用對(duì)應(yīng)的字體顯示內(nèi)容;
使用Web Fonts
? 演示，通過(guò)如下的方式獲取到了字體文件:
? 第一步:在字體天下網(wǎng)站下載一個(gè)字體
默認(rèn)下載下來(lái)的是ttf文件;
? 第二步:使用字體;
? 使用過(guò)程如下:
1.將字體放到對(duì)應(yīng)的目錄中
2.通過(guò)@font-face來(lái)引入字體, 并且設(shè)置格式
3.使用字體
? 注意: @font-face 用于加載一個(gè)自定義的字體;
web-fonts的兼容性
? 我們剛才使用的字體文件是 .ttf, 它是TrueType字體.
- 在開(kāi)發(fā)中某些瀏覽器可能不支持該字體, 所以為了瀏 覽器的兼容性問(wèn)題, 我們需要有對(duì)應(yīng)其他格式的字體;
? TrueType字體:拓展名是 .ttf
OpenType/TrueType字體:拓展名是 .ttf脂男、.otf养叛， 建立在TrueType字體之上
Embedded OpenType字體:拓展名是 .eot， OpenType字體的壓縮版
SVG字體:拓展名是 .svg宰翅、 .svgz
WOFF表示W(wǎng)eb Open Font Format web開(kāi)放字體: 拓展名是 .woff弃甥，建立在TrueType字體之上
? 這里我們提供一個(gè)網(wǎng)站來(lái)生產(chǎn)對(duì)應(yīng)的字體文件:
- https://font.qqe2.com/# 暫時(shí)可用
web fonts兼容性寫(xiě)法
? 如果我們具備很強(qiáng)的兼容性, 那么可以如下格式編寫(xiě):
? 這被稱為"bulletproof @font-face syntax(刀槍不入的@font-face語(yǔ)法)“:
- 這是 Paul Irish早期的一篇文章提及后@font-face開(kāi)始流行起來(lái) (Bulletproof @font-face Syntax)。
? src用于指定字體資源
url指定資源的路徑
format用于幫助瀏覽器快速識(shí)別字體的格式;
認(rèn)識(shí)字體圖標(biāo)
? 思考:字體可以設(shè)計(jì)成各式各樣的形狀汁讼，那么能不能把字體直接設(shè)計(jì)成圖標(biāo)的樣子呢?
- 當(dāng)然可以淆攻，這個(gè)就叫做字體圖標(biāo)。
? 字體圖標(biāo)的好處:
放大不會(huì)失真
可以任意切換顏色
用到很多個(gè)圖標(biāo)時(shí)嘿架，文件相對(duì)圖片較小
? 字體圖標(biāo)的使用:
登錄阿里icons(https://www.iconfont.cn/)
下載代碼瓶珊，并且拷貝到項(xiàng)目中
? 將字體文件和默認(rèn)的css文件導(dǎo)入到項(xiàng)目中
字體圖標(biāo)的使用
? 字體圖標(biāo)的使用步驟:
第一步: 通過(guò)link引入iconfont.css文件
第二步: 使用字體圖標(biāo)
? 使用字體圖標(biāo)常見(jiàn)的有兩種方式:
方式一: 通過(guò)對(duì)應(yīng)字體圖標(biāo)的Unicode來(lái)顯示代碼;
方式二: 利用已經(jīng)編寫(xiě)好的class, 直接使用即可;
認(rèn)識(shí)精靈圖CSSSprite
? 什么是CSSSprite
是一種CSS圖像合成技術(shù)，將各種小圖片合并到一張圖片上耸彪，然后利用CSS的背景定位來(lái)顯示對(duì)應(yīng)的圖片部分
有人翻譯為:CSS雪碧伞芹、CSS精靈
? 使用CSS Sprite的好處
減少網(wǎng)頁(yè)的http請(qǐng)求數(shù)量，加快網(wǎng)頁(yè)響應(yīng)速度，減輕服務(wù)器壓力
減小圖片總大小
解決了圖片命名的困擾唱较，只需要針對(duì)一張集合的圖片命名
? Sprite圖片制作(雪碧圖扎唾、精靈圖)
方法1:Photoshop, 設(shè)計(jì)人員提供
精靈圖的使用
? 精靈圖如何使用呢?
精靈圖的原理是通過(guò)只顯示圖片的很小一部分來(lái)展示的;
通常使用背景:
? 1.設(shè)置對(duì)應(yīng)元素的寬度和高度
? 2.設(shè)置精靈圖作為背景圖片
? 3.調(diào)整背景圖片的位置來(lái)展示
? 如何獲取精靈圖的位置
Cusor
? cursor****可以設(shè)置鼠標(biāo)指針(光標(biāo))在元素上面時(shí)的顯示樣式
? cursor****常見(jiàn)的設(shè)值有
auto:瀏覽器根據(jù)上下文決定指針的顯示樣式，比如根據(jù)文本和非文本切換指針樣式
default:由操作系統(tǒng)決定南缓，一般就是一個(gè)小箭頭
pointer:一只小手胸遇，鼠標(biāo)指針挪動(dòng)到鏈接上面默認(rèn)就是這個(gè)樣式
text:一條豎線，鼠標(biāo)指針挪動(dòng)到文本輸入框上面默認(rèn)就是這個(gè)樣式
none:沒(méi)有任何指針顯示在元素上面
CSS元素定位
標(biāo)準(zhǔn)流(Normal Flow)
? 默認(rèn)情況下西乖，元素都是按照normal flow(標(biāo)準(zhǔn)流狐榔、常規(guī)流、正常流获雕、文檔流【document flow】)進(jìn)行排布
從左到右薄腻、從上到下按順序擺放好
默認(rèn)情況下，互相之間不存在層疊現(xiàn)象
<body>
<span>span1</span>
<img src="images/cube.jpg" alt="">
<span style="display: inline-block">span2</span>
<div>div</div>
<p>p</p>
<span style="display: inline-block">span</span>
<strong>strong</strong>
<h1>h1</h1>
<span>span3</span>
<span style="display: inline-block">span4</span>
<span>span5</span>
</body>
margin-padding位置調(diào)整
? 在標(biāo)準(zhǔn)流中届案，可以使用margin庵楷、padding對(duì)元素進(jìn)行定位
- 其中margin還可以設(shè)置負(fù)數(shù)
? 比較明顯的缺點(diǎn)是
設(shè)置一個(gè)元素的margin或者padding，通常會(huì)影響到標(biāo)準(zhǔn)流中其他元素的定位效果
不便于實(shí)現(xiàn)元素層疊的效果
? 如果我們希望一個(gè)元素可以跳出標(biāo)準(zhǔn)量,單獨(dú)的對(duì)某個(gè)元素進(jìn)行定位呢?
- 我們可以通過(guò)position屬性來(lái)進(jìn)行設(shè)置;
認(rèn)識(shí)元素的定位
? 定位允許您從正常的文檔流布局中取出元素楣颠，并使它們具有不同的行為:
例如放在另一個(gè)元素的上面;
或者始終保持在瀏覽器視窗內(nèi)的同一位置;
認(rèn)識(shí)position屬性
? 利用position可以對(duì)元素進(jìn)行定位尽纽，常用取值有5個(gè):
? 默認(rèn)值:
- static:默認(rèn)值, 靜態(tài)定位
? 使用下面的值, 可以讓元素變成 定位元素(positioned element)
relative:相對(duì)定位
absolute:絕對(duì)定位
fixed:固定定位
sticky:粘性定位
靜態(tài)定位 - static
? position屬性的默認(rèn)值
元素按照normal flow布局
left 启盛、right擂送、top、bottom沒(méi)有任何作用
相對(duì)定位 - relative
? 元素按照normal flow布局
? 可以通過(guò)left湿诊、right矫膨、top差凹、bottom進(jìn)行定位
- 定位參照對(duì)象是元素自己原來(lái)的位置
? left、right侧馅、top危尿、bottom用來(lái)設(shè)置元素的具體位置，對(duì)元素的作用如下圖所示
? 相對(duì)定位的應(yīng)用場(chǎng)景
- 在不影響其他元素位置的前提下馁痴，對(duì)當(dāng)前元素位置進(jìn)行微調(diào)
固定定位 - fixed
? 元素脫離normal flow(脫離標(biāo)準(zhǔn)流谊娇、脫標(biāo))
? 可以通過(guò)left、right罗晕、top济欢、bottom進(jìn)行定位
? 定位參照對(duì)象是視口(viewport)
? 當(dāng)畫(huà)布滾動(dòng)時(shí)，固定不動(dòng)
畫(huà)布 和 視口
? 視口(Viewport)
文檔的可視區(qū)域
如右圖紅框所示
? 畫(huà)布(Canvas)
用于渲染文檔的區(qū)域
文檔內(nèi)容超出視口范圍小渊，可以通過(guò)滾動(dòng)查看
如右圖黑框所示
? 寬高對(duì)比
- 畫(huà)布 >= 視口
絕對(duì)定位 - absolute
? 元素脫離normal flow(脫離標(biāo)準(zhǔn)流船逮、脫標(biāo))
? 可以通過(guò)left、right粤铭、top挖胃、bottom進(jìn)行定位
定位參照對(duì)象是最鄰近的定位祖先元素
如果找不到這樣的祖先元素，參照對(duì)象是視口
? 定位元素(positioned element)
position值不為static的元素
也就是position值為relative、absolute酱鸭、fixed的元素
子絕父相
? 在絕大數(shù)情況下吗垮，子元素的****絕對(duì)定位都是相對(duì)于父元素進(jìn)行定位
? 如果希望子元素相對(duì)于父元素進(jìn)行定位，又不希望父元素脫標(biāo)凹髓，常用解決方案是:
父元素設(shè)置position: relative(讓父元素成為定位元素烁登，而且父元素不脫離標(biāo)準(zhǔn)流)
子元素設(shè)置position: absolute
簡(jiǎn)稱為“子絕父相”
將position設(shè)置為absolute/fixed元素的特點(diǎn)(一)
? 可以隨意設(shè)置寬高
? 寬高默認(rèn)由內(nèi)容決定
? 不再受標(biāo)準(zhǔn)流的約束
不再嚴(yán)格按照從上到下、從左到右排布
不再嚴(yán)格區(qū)分塊級(jí)(block)蔚舀、行內(nèi)級(jí)(inline)饵沧，行內(nèi)塊級(jí)(inline-block)的很多特性都會(huì)消失
? 不再給父元素匯報(bào)寬高數(shù)據(jù) ? 脫標(biāo)元素內(nèi)部默認(rèn)還是按照標(biāo)準(zhǔn)流布局
將position設(shè)置為absolute/fixed元素的特點(diǎn)(二)
? 絕對(duì)定位元素(absolutely positioned element)
- position值為absolute或者fixed的元素
? 對(duì)于絕對(duì)定位元素來(lái)說(shuō)
定位參照對(duì)象的寬度 = left + right + margin-left + margin-right + 絕對(duì)定位元素的實(shí)際占用寬度
定位參照對(duì)象的高度 = top + bottom + margin-top + margin-bottom + 絕對(duì)定位元素的實(shí)際占用高度
? 如果希望絕對(duì)定位元素的寬高和定位參照對(duì)象一樣，可以給絕對(duì)定位元素設(shè)置以下屬性
- left: 0赌躺、right: 0狼牺、top: 0、bottom: 0礼患、margin:0
? 如果希望絕對(duì)定位元素在定位參照對(duì)象中居中顯示是钥，可以給絕對(duì)定位元素設(shè)置以下屬性
left: 0、right: 0缅叠、top: 0悄泥、bottom: 0、margin: auto
另外肤粱，還得設(shè)置具體的寬高值(寬高小于定位參照對(duì)象的寬高)
auto到底是什么?
? 800 = 200 + ml0 + mr0 + 0 + 0
? auto -> 交給瀏覽器你來(lái)出來(lái)
? width: auto;
1.行內(nèi)非替換元素 -> width: 包裹內(nèi)容
2.塊級(jí)元素 ->width: 包含塊的寬度
3.絕對(duì)定位元素 -> width: 包裹內(nèi)容
粘性定位 - sticky
? 另外還有一個(gè)定位的值是position: sticky弹囚，比起其他定位值要新一些.
sticky是一個(gè)大家期待已久的屬性;
可以看做是相對(duì)定位和固定(絕對(duì))定位的結(jié)合體;
它允許被定位的元素表現(xiàn)得像相對(duì)定位一樣，直到它滾動(dòng)到某個(gè)閾值點(diǎn);
當(dāng)達(dá)到這個(gè)閾值點(diǎn)時(shí), 就會(huì)變成固定(絕對(duì))定位;
? sticky是相對(duì)于最近的滾動(dòng)祖先包含滾動(dòng)視口的(the nearest ancestor scroll container’s scrollport )
position值對(duì)比
CSS屬性 - z-index
? z-index屬性用來(lái)設(shè)置定位元素的****層疊順序****(僅對(duì)定位元素有效)
- 取值可以是正整數(shù)领曼、負(fù)整數(shù)余寥、0
? 比較原則
-
如果是兄弟關(guān)系
? z-index越大，層疊在越上面
? z-index相等悯森，寫(xiě)在后面的那個(gè)元素層疊在上面
-
如果不是兄弟關(guān)系
? 各自從元素自己以及祖先元素中，找出最鄰近的2個(gè)定位元素進(jìn)行比較
? 而且這2個(gè)定位元素必須有設(shè)置z-index的具體數(shù)值
CSS元素定位
認(rèn)識(shí)浮動(dòng)
? float 屬性可以指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置绪撵，允許文本和內(nèi)聯(lián)元素環(huán)繞它瓢姻。
float 屬性最初只用于在一段文本內(nèi)浮動(dòng)圖像, 實(shí)現(xiàn)文字環(huán)繞的效果;
但是早期的CSS標(biāo)準(zhǔn)中并沒(méi)有提供好的左右布局方案, 因此在一段時(shí)間里面它成為網(wǎng)頁(yè)多列布局的最常用工具;
? 絕對(duì)定位、浮動(dòng)都會(huì)讓元素脫離標(biāo)準(zhǔn)流音诈，以達(dá)到靈活布局的效果
? 可以通過(guò)float屬性讓元素產(chǎn)生浮動(dòng)效果幻碱，float的常用取值
none:不浮動(dòng)，默認(rèn)值
left:向左浮動(dòng)
right:向右浮動(dòng)
浮動(dòng)規(guī)則一
? 元素一旦浮動(dòng)后, 脫離標(biāo)準(zhǔn)流
朝著向左或向右方向移動(dòng)细溅，直到自己的邊界緊貼著包含塊(一般是父元素)或者其他浮動(dòng)元素的邊界為止
定位元素會(huì)層疊在浮動(dòng)元素上面
浮動(dòng)規(guī)則二
? 如果元素是向左(右)浮動(dòng)褥傍，浮動(dòng)元素的左(右)邊界不能超出包含塊的左(右)邊界
浮動(dòng)規(guī)則三
? 規(guī)則五: 浮動(dòng)元素之間不能層疊
如果一個(gè)元素浮動(dòng)，另一個(gè)浮動(dòng)元素已經(jīng)在那個(gè)位置了喇聊，后浮動(dòng)的元素將緊貼著前一個(gè)浮動(dòng)元素(左浮找左浮恍风，右浮找右浮)
如果水平方向剩余的空間不夠顯示浮動(dòng)元素，浮動(dòng)元素將向下移動(dòng)，直到有充足的空間為止
浮動(dòng)規(guī)則四
? 浮動(dòng)元素不能與行內(nèi)級(jí)內(nèi)容層疊朋贬，行內(nèi)級(jí)內(nèi)容將會(huì)被浮動(dòng)元素推出
- 比如行內(nèi)級(jí)元素凯楔、inline-block元素、塊級(jí)元素的文字內(nèi)容
浮動(dòng)規(guī)則五
? 規(guī)則五: 行內(nèi)級(jí)元素锦募、inline-block元素浮動(dòng)后摆屯，其頂部將與所在行的頂部對(duì)齊
浮動(dòng)的問(wèn)題 – 高度塌陷
? 由于浮動(dòng)元素脫離了標(biāo)準(zhǔn)流，變成了脫標(biāo)元素糠亩，所以不再向父元素匯報(bào)高度
- 父元素計(jì)算總高度時(shí)虐骑，就不會(huì)計(jì)算浮動(dòng)子元素的高度，導(dǎo)致了高度坍塌的問(wèn)題
? 解決父元素高度坍塌問(wèn)題的過(guò)程赎线，一般叫做清浮動(dòng)(清理浮動(dòng)廷没、清除浮動(dòng))
? 清浮動(dòng)的目的是
- 讓父元素計(jì)算總高度的時(shí)候，把浮動(dòng)子元素的高度算進(jìn)去
? 如何清除浮動(dòng)呢? 使用clear屬性
CSS屬性 - clear
? clear屬性是做什么的呢?
- clear 屬性可以指定一個(gè)元素是否必須移動(dòng)(清除浮動(dòng)后)到在它之前的浮動(dòng)元素下面;
? clear的常用取值
left:要求元素的頂部低于之前生成的所有左浮動(dòng)元素的底部
right:要求元素的頂部低于之前生成的所有右浮動(dòng)元素的底部
both:要求元素的頂部低于之前生成的所有浮動(dòng)元素的底部
none:默認(rèn)值氛驮，無(wú)特殊要求
? 那么我們可以利用這個(gè)特性來(lái)清除浮動(dòng).
清除浮動(dòng)的方法
? 事實(shí)上我們有很多方法可以清除浮動(dòng)
? 方法一: 給父元素設(shè)置固定高度 ? 擴(kuò)展性不好(不推薦)
? 方法二: 在父元素最后增加一個(gè)空的塊級(jí)子元素腕柜，并且讓它設(shè)置clear: both
會(huì)增加很多無(wú)意義的空標(biāo)簽，維護(hù)麻煩
違反了結(jié)構(gòu)與樣式分離的原則(不推薦)
? 方法三: 給父元素添加一個(gè)偽元素
推薦;
編寫(xiě)好后可以輕松實(shí)現(xiàn)清除浮動(dòng);
方法三 – 偽元素清除浮動(dòng)
? 給父元素增加::after偽元素
- 純CSS樣式解決矫废，結(jié)構(gòu)與樣式分離(推薦)
布局方案總結(jié)
CSS Flex布局
認(rèn)識(shí)flexbox
? Flexbox翻譯為彈性盒子:
彈性盒子是一種用于按行或按列布局元素的一維布局方法 ;
元素可以膨脹以填充額外的空間, 收縮以適應(yīng)更小的空間;
通常我們使用Flexbox來(lái)進(jìn)行布局的方案稱之為flex布局(flex layout);
? flex布局是目前web開(kāi)發(fā)中使用最多的布局方案:
flex 布局(Flexible 布局盏缤，彈性布局);
目前特別在移動(dòng)端可以說(shuō)已經(jīng)完全普及;
在PC端也幾乎已經(jīng)完全普及和使用, 只有非常少數(shù)的網(wǎng)站依然在用浮動(dòng)來(lái)布局;
? 為什么需要flex布局呢?
長(zhǎng)久以來(lái)，CSS 布局中唯一可靠且跨瀏覽器兼容的布局工具只有 floats 和 positioning蓖扑。
但是這兩種方法本身存在很大的局限性, 并且他們用于布局實(shí)在是無(wú)奈之舉;
原先的布局存在的痛點(diǎn)
? 原來(lái)的布局存在哪些痛點(diǎn)呢? 舉例說(shuō)明:
- 比如在父內(nèi)容里面垂直居中一個(gè)塊內(nèi)容唉铜。
比如使容器的所有子項(xiàng)等分可用寬度/高度，而不管有多少寬度/高度可用律杠。
比如使多列布局中的所有列采用相同的高度潭流，即使它們包含的內(nèi)容量不同。
flex布局的出現(xiàn)
? 所以長(zhǎng)久以來(lái), 大家非常期待一種真正可以用于對(duì)元素布局的方案: 于是flex布局出現(xiàn)了****;
Nature and nature's laws lay hid in night; God said "Let Newton be" and all was light.
自然與自然的法則在黑夜隱藏柜去，于是上帝說(shuō)灰嫉，讓牛頓出現(xiàn)吧!于是世界就明亮了起來(lái).
? flexbox在使用時(shí), 我們最擔(dān)心的是它的兼容性問(wèn)題:
- 我們可以在caniuse上查詢到具體的兼容性
flex布局的重要概念
? 兩個(gè)重要的概念:
開(kāi)啟了 flex 布局的元素叫 flex container
flex container 里面的直接子元素叫做 flex item
? 當(dāng)flex container中的子元素變成了flex item時(shí), 具備一下特點(diǎn):
flex item的布局將受flex container屬性的設(shè)置來(lái)進(jìn)行控制和布局;
flex item不再嚴(yán)格區(qū)分塊級(jí)元素和行內(nèi)級(jí)元素;
flex item默認(rèn)情況下是包裹內(nèi)容的, 但是可以設(shè)置寬度和高度;
? 設(shè)置 display 屬性為 flex 或者 inline-flex 可以成為 flex container
flex: flex container 以 block-level 形式存在
inline-flex: flex container 以 inline-level 形式存在
flex布局的模型
flex相關(guān)的屬性
flex-direction
? flex items 默認(rèn)都是沿著 main axis(主軸)從 main start 開(kāi)始往 main end 方向排布
flex-direction 決定了 main axis 的方向，有 4 個(gè)取值
row(默認(rèn)值)嗓奢、row-reverse讼撒、column、column-reverse
flex-wrap
? flex-wrap 決定了 flex container 是單行還是多行
nowrap(默認(rèn)):單行
wrap:多行
wrap-reverse:多行(對(duì)比 wrap股耽，cross start 與 cross end 相反)
flex-flow
? flex-flow 屬性是 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)根盒。
- 順序任何, 并且都可以省略;
justify-content
? justify-content 決定了 flex items 在 main axis 上的對(duì)齊方式
flex-start(默認(rèn)值):與 main start 對(duì)齊
flex-end:與 main end 對(duì)齊
center:居中對(duì)齊
space-between:
? flex items 之間的距離相等
? 與 main start、main end兩端對(duì)齊space-around:
? flex items 之間的距離相等
? flex items 與 main start物蝙、main end 之間的距離是 flex items 之間距離的一半space-evenly:
? flex items 之間的距離相等
? flex items 與 main start炎滞、main end 之間的距離 等于 flex items 之間的距離
align-item
? align-items 決定了 flex items 在 cross axis 上的對(duì)齊方式
normal:在彈性布局中，效果和stretch一樣
stretch:當(dāng) flex items 在 cross axis 方向的 size 為 auto 時(shí)诬乞，會(huì) 自動(dòng)拉伸至填充 flex container
flex-start:與 cross start 對(duì)齊
flex-end:與 cross end 對(duì)齊
center:居中對(duì)齊
baseline:與基準(zhǔn)線對(duì)齊
align-content
? align-content 決定了多行 flex items 在 cross axis 上的對(duì)齊方式册赛，用法與 justify-content 類似
stretch(默認(rèn)值):與 align-items 的 stretch 類似
flex-start:與 cross start 對(duì)齊
flex-end:與 cross end 對(duì)齊
center:居中對(duì)齊
space-between:
? flex items 之間的距離相等
? 與 cross start钠导、cross end兩端對(duì)齊
- space-around:
? flex items 之間的距離相等
? flex items 與 cross start、cross end 之間的距離是 flex items 之間距離的一半
- space-evenly:
? flex items 之間的距離相等
? flex items 與 cross start击奶、cross end 之間的距離 等于 flex items 之間的距離
flex-item屬性 - order
? order 決定了 flex items 的排布順序
可以設(shè)置任意整數(shù)(正整數(shù)辈双、負(fù)整數(shù)、0)柜砾，值越小就越排在前面
默認(rèn)值是 0
flex-item屬性 - flex items
? flex items 可以通過(guò) align-self 覆蓋 flex container 設(shè)置的 align-items
auto(默認(rèn)值):遵從 flex container 的 align-items 設(shè)置
stretch湃望、flex-start、flex-end痰驱、center证芭、baseline，效果跟 align-items 一致
flex-item屬性 - flex-grow
? flex-grow 決定了 flex items 如何擴(kuò)展(拉伸/成長(zhǎng))
可以設(shè)置任意非負(fù)數(shù)字(正小數(shù)担映、正整數(shù)废士、0)，默認(rèn)值是 0
當(dāng) flex container 在 main axis 方向上有剩余 size 時(shí)蝇完，flex-grow 屬性才會(huì)有效
? 如果所有 flex items 的 flex-grow 總和 sum 超過(guò) 1官硝，每個(gè) flex item 擴(kuò)展的 size 為
- flex container 的剩余 size * flex-grow / sum
? flex items 擴(kuò)展后的最終 size 不能超過(guò) max-width\max-height
flex-item屬性 - flex-shrink
? flex-shrink 決定了 flex items 如何收縮(縮小)
可以設(shè)置任意非負(fù)數(shù)字(正小數(shù)、正整數(shù)短蜕、0)氢架，默認(rèn)值是 1
當(dāng) flex items 在 main axis 方向上超過(guò)了 flex container 的 size，flex-shrink 屬性才會(huì)有效
? 如果所有 flex items 的 flex-shrink 總和超過(guò) 1朋魔，每個(gè) flex item 收縮****的 size為
- flex items 超出 flex container 的 size * 收縮比例 / 所有 flex items 的收縮比例之和
? flex items 收縮****后的最終 size 不能小于 min-width\min-height
flex-item屬性 - flex-basis
? flex-basis 用來(lái)設(shè)置 flex items 在 main axis 方向上的 base size
- auto(默認(rèn)值)岖研、具體的寬度數(shù)值(100px)
? 決定 flex items 最終 base size 的因素，從優(yōu)先級(jí)高到低
max-width\max-height\min-width\min-height
Flex-basis
width\height
內(nèi)容本身的 size
flex-item屬性 - flex屬性
? flex 是 flex-grow || flex-shrink || flex-basis 的簡(jiǎn)寫(xiě),flex 屬性可以指定1個(gè)警检，2個(gè)或3個(gè)值孙援。
? 單值語(yǔ)法: 值必須為以下其中之一:
一個(gè)無(wú)單位數(shù)(<number>): 它會(huì)被當(dāng)作<flex-grow>的值。
一個(gè)有效的寬度(width)值: 它會(huì)被當(dāng)作 <flex-basis>的值扇雕。
關(guān)鍵字none拓售，auto或initial.
? 雙值語(yǔ)法: 第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 <flex-grow> 的值镶奉。
- 第二個(gè)值必須為以下之一:
? 一個(gè)無(wú)單位數(shù):它會(huì)被當(dāng)作 <flex-shrink> 的值础淤。
? 一個(gè)有效的寬度值: 它會(huì)被當(dāng)作 <flex-basis> 的值。
? 三值語(yǔ)法:
第一個(gè)值必須為一個(gè)無(wú)單位數(shù)腮鞍，并且它會(huì)被當(dāng)作 <flex-grow> 的值。
第二個(gè)值必須為一個(gè)無(wú)單位數(shù)莹菱，并且它會(huì)被當(dāng)作 <flex-shrink>的值移国。
第三個(gè)值必須為一個(gè)有效的寬度值， 并且它會(huì)被當(dāng)作 <flex-basis> 的值道伟。
思考: 如下布局如何解決對(duì)其問(wèn)題
CSS動(dòng)畫(huà)
CSS屬性 - vertical-align
深入理解vertical-align – line boxes
? 官方文檔的翻譯:vertical-align會(huì)影響 行內(nèi)塊級(jí)元素 在一個(gè) 行盒 中垂直方向的位置
? 思考:一個(gè)div沒(méi)有設(shè)置高度的時(shí)候迹缀，會(huì)不會(huì)有高度?
沒(méi)有內(nèi)容使碾，沒(méi)有高度
有內(nèi)容，內(nèi)容撐起來(lái)高度
? 但是內(nèi)容撐起來(lái)高度的本質(zhì)是什么呢?
- 內(nèi)容有行高(line-height)祝懂，撐起來(lái)了div的高度
? 行高為什么可以撐起div的高度?
這是因?yàn)閘ine boxes的存在票摇，并且line-boxes有一個(gè)特性，包裹每行的inline level
而其中的文字是有行高的砚蓬，必須將整個(gè)行高包裹進(jìn)去矢门，才算包裹這個(gè)line-level
? 那么，進(jìn)一步思考:
- 如果這個(gè)div中有圖片灰蛙，文字祟剔，inline-block，甚至他們?cè)O(shè)置了margin這些屬性呢?
深入理解vertical-align – 不同情況分析
? 情況一:只有文字時(shí)摩梧，line boxes如何包裹內(nèi)容?(注意:紅色是包裹的div物延，下面也都一樣)
? 情況二:有圖片，有文字時(shí)仅父，line-boxes如何包裹內(nèi)容?
? 情況三:有圖片叛薯，有文字，有inline-block(比圖片要大)如何包裹內(nèi)容?
深入理解vertical-align – 不同情況分析
? 情況四:有圖片笙纤，有文字耗溜，有inline-block(比圖片要大)而且設(shè)置了margin-bottom，如何包裹內(nèi)容?
? 情況五:有圖片粪糙、文字强霎、inline-block(比圖片要大)而且設(shè)置了margin-bottom并且有文字，如何包裹內(nèi)容?
vertical-align的baseline
? 結(jié)論:line-boxes一定會(huì)想辦法包裹住當(dāng)前行中所有的內(nèi)容蓉冈。
? 但是城舞，但是為什么對(duì)齊方式千奇百怪呢?
你認(rèn)為的千奇百怪，其實(shí)有它的內(nèi)在規(guī)律
答案就是baseline對(duì)齊
? 我們來(lái)看官方vertical-align的默認(rèn)值:沒(méi)錯(cuò)寞酿，就是baseline
? 但是baseline都是誰(shuí)呢?
文本的baseline是字母x的下方
Inline-block默認(rèn)的baseline是margin-bottom的底部(沒(méi)有家夺，就是盒子的底部)
Inline-block有文本時(shí)，baseline是最后一行文本的x的下方
? 一切都解釋通了
vertical-align的其他值
? 現(xiàn)在伐弹，對(duì)于不同的取值就非常容易理解了
baseline(默認(rèn)值):基線對(duì)齊(你得先明白什么是基線)
top:把行內(nèi)級(jí)盒子的頂部跟line boxes頂部對(duì)齊
middle:行內(nèi)級(jí)盒子的中心點(diǎn)與父盒基線加上x(chóng)-height一半的線對(duì)齊
bottom:把行內(nèi)級(jí)盒子的底部跟line box底部對(duì)齊
<percentage>:把行內(nèi)級(jí)盒子提升或者下降一段距離(距離相對(duì)于line-height計(jì)算\元素高度)拉馋， 0%意味著同baseline一 樣
<length>:把行內(nèi)級(jí)盒子提升或者下降一段距離，0cm意味著同baseline一樣
? 解決圖片下邊緣的間隙方法:
方法一: 設(shè)置成top/middle/bottom
方法二: 將圖片設(shè)置為block元素
CSS屬性 - transform
? CSStransform屬性允許你旋轉(zhuǎn)惨好，縮放煌茴，傾斜或平移給定元素。
? Transform是形變的意思日川，transformer就是變形金剛
? 常見(jiàn)的函數(shù)transformfunction有:
平移:translate(x, y)
縮放:scale(x, y)
旋轉(zhuǎn):rotate(deg)
傾斜:skew(deg, deg)
? 通過(guò)上面的幾個(gè)函數(shù)蔓腐，我們可以改變某個(gè)元素的形變
位移 - translate
? 平移:translate(x, y)
? 值個(gè)數(shù)
一個(gè)值時(shí)，設(shè)置x軸上的位移
二個(gè)值時(shí)龄句，設(shè)置x軸和y軸上的位移
? 值類型:
數(shù)字:100px
百分比:參照元素本身( refer to the size of bounding box )
縮放 - scale
? 縮放:scale(x, y)
? 值個(gè)數(shù)
一個(gè)值時(shí)回论，設(shè)置x軸上的縮放
二個(gè)值時(shí)散罕，設(shè)置x軸和y軸上的縮放
? 值類型:
- 數(shù)字:
? 1:保持不變
? 2:放大一倍
? 0.5:縮小一半
- 百分比:不支持百分比
transform-origin
? transform-origin:變形的原點(diǎn)
? 一個(gè)值:
- 設(shè)置x軸的原點(diǎn)
? 兩個(gè)值:
- 設(shè)置x軸和y軸的原點(diǎn)
? 必須是<length>，<percentage>傀蓉，或 left, center, right, top, bottom關(guān)鍵字中的一個(gè)
left, center, right, top, bottom關(guān)鍵字
length:從左上角開(kāi)始計(jì)算
百分比:參考元素本身大小
縮放 - rotate
? 旋轉(zhuǎn):rotate(deg)
? 值個(gè)數(shù)
- 一個(gè)值時(shí)宙地，表示旋轉(zhuǎn)的角度
? 值類型:
deg:旋轉(zhuǎn)的角度
正數(shù)為順時(shí)針
負(fù)數(shù)為逆時(shí)針
? 注意:旋轉(zhuǎn)的****原點(diǎn)****受transform-origin的影響
傾斜 - skew
? 旋轉(zhuǎn):skew(x, y)
? 值個(gè)數(shù)
一個(gè)值時(shí)彤守，表示x軸上的傾斜
二個(gè)值時(shí)，表示x軸和y軸上的傾斜
? 值類型:
deg:旋轉(zhuǎn)的角度
正數(shù)為順時(shí)針
負(fù)數(shù)為逆時(shí)針
? 注意:旋轉(zhuǎn)的****原點(diǎn)****受transform-origin的影響
過(guò)渡動(dòng)畫(huà) - transition
? transition CSS 屬性是 transition-property，transition-duration环壤，transition-timing-function 和 transition-delay 的 一個(gè)簡(jiǎn)寫(xiě)屬性琼锋。
-
transition-property:指定應(yīng)用過(guò)渡屬性的名稱
可以寫(xiě)all表示所有可動(dòng)畫(huà)的屬性
屬性是否支持動(dòng)畫(huà)查看文檔
-
transition-duration:指定過(guò)渡動(dòng)畫(huà)所需的時(shí)間
- 單位可以是秒(s)或毫秒(ms)
-
transition-timing-function:指定動(dòng)畫(huà)的變化曲線
transition-delay:指定過(guò)渡動(dòng)畫(huà)執(zhí)行之前的等待時(shí)間
關(guān)鍵幀動(dòng)畫(huà)
? 之前我們學(xué)習(xí)了transition來(lái)進(jìn)行過(guò)渡動(dòng)畫(huà)酱虎，但是過(guò)渡動(dòng)畫(huà)只能控制首尾兩個(gè)值:
從關(guān)鍵幀動(dòng)畫(huà)的角度相當(dāng)于只是定義了兩幀的狀態(tài):第一幀和最后一幀担猛。
如果我們希望可以有更多狀態(tài)的變化，可以直接使用關(guān)鍵幀動(dòng)畫(huà)岳遥。
? 關(guān)鍵幀動(dòng)畫(huà)****使用@keyframes來(lái)定義多個(gè)變化狀態(tài)奕翔，并且使用animation-name來(lái)聲明匹配:
1.使用 @keyframes創(chuàng)建一個(gè)規(guī)則
2. @keyframes中使用百分比定義各個(gè)階段的樣式
3. 通過(guò)animation將動(dòng)畫(huà)添加到屬性上
? 另外，也可以使用from和to關(guān)鍵字:
from相當(dāng)于0%
to相當(dāng)于100%
animation屬性
? CSS animation 屬性是 animation-name浩蓉，animation-duration, animation-timing-function派继，animation-delay，animation- iteration-count捻艳，animation-direction驾窟，animation-fill-mode 和 animation-play-state 屬性的一個(gè)簡(jiǎn)寫(xiě)屬性形式。
animation-name:指定執(zhí)行哪一個(gè)關(guān)鍵幀動(dòng)畫(huà)
animation-duration:指定動(dòng)畫(huà)的持續(xù)時(shí)間
animation-timing-function:指定動(dòng)畫(huà)的變化曲線
animation-delay:指定延遲執(zhí)行的時(shí)間
animation-iteration-count:指定動(dòng)畫(huà)執(zhí)行的次數(shù)认轨，執(zhí)行infinite表示無(wú)限動(dòng)畫(huà)
animation-direction:指定方向绅络，常用值normal和reverse
-
animation-fill-mode:執(zhí)行動(dòng)畫(huà)最后保留哪一個(gè)值
none:回到?jīng)]有執(zhí)行動(dòng)畫(huà)的位置
forwards:動(dòng)畫(huà)最后一幀的位置
backwards:動(dòng)畫(huà)第一幀的位置
animation-play-state:指定動(dòng)畫(huà)運(yùn)行或者暫停(在JavaScript中使用，用于暫停動(dòng)畫(huà))
項(xiàng)目實(shí)戰(zhàn)
代碼規(guī)范
? 參考凹凸實(shí)驗(yàn)室代碼規(guī)范:
CSS 編寫(xiě)順序
CSS 編寫(xiě)順序的思路
? 1.先確定盒子本身是如何布局
- position: absolute
- float: left/right
- display: flex
? 2.盒子的特性和可見(jiàn)性
- display: block/inline-block/inline/none
- visibility/opacity
? 3.盒子模型
- width/height
- box-sizing
- margin/border/padding/content
- box-shadow/text-shadow
? 4.內(nèi)部的文本文字
- font/text
? 5.background
- background-image/size/position/color
? 6.其他
- transform/transition/overflow/white-space
組件化開(kāi)發(fā)思路
? 事實(shí)上目前Vue嘁字、React恩急、小程序都采用的是組件化開(kāi)發(fā)思路
項(xiàng)目整體思路 – 各個(gè)擊破
meta 元素
? meta元素用于定義 元數(shù)據(jù) :
head中用于定義元數(shù)據(jù);
比如標(biāo)題title、樣式style纪蜒、link外部資源等;
meta用于定義那些不能使用其他定元相關(guān)(meta-related)元素定義的任何元數(shù)據(jù)信息;
? meta 元素定義的 元數(shù)據(jù) 的類型包括以下幾種:
如果設(shè)置了 charset 屬性衷恭，meta 元素是一個(gè)字符集聲明，告訴文檔使用哪種字符編碼纯续。
如果設(shè)置了 http-equiv 屬性随珠，meta 元素則是編譯指令。
如果設(shè)置了 name 屬性猬错，meta 元素提供的是文檔級(jí)別(document-level)的元數(shù)據(jù)窗看，應(yīng)用于整個(gè)頁(yè)面。
meta 元素的http-equiv屬性
? 我們會(huì)發(fā)現(xiàn)倦炒，無(wú)論是默認(rèn)創(chuàng)建的html頁(yè)面還是王者榮耀都有如下代碼:
? 它的作用到底是什么呢?網(wǎng)上眾說(shuō)紛紜显沈，我們直接看官方文檔的解釋:
告知IE瀏覽器去模仿哪一個(gè)瀏覽器的行為;
IE=edge，告知IE8區(qū)使用最高有效模式來(lái)模仿;
meta 元素的name屬性
? name屬性的值非常多析校，具體的內(nèi)容可以查看文檔:
? 我們介紹幾個(gè)常用的:
robots:爬蟲(chóng)构罗、協(xié)作搜尋器，或者 “機(jī)器人”智玻，對(duì)此頁(yè)面的處理行為遂唧，或者說(shuō)，應(yīng)當(dāng)遵守的規(guī)則吊奢。
author:文檔作者的名字盖彭。
Copyright:版權(quán)聲明;
-
description:一段簡(jiǎn)短而精確的、對(duì)頁(yè)面內(nèi)容的描述页滚。
- 一些瀏覽器召边，比如 Firefox 和 Opera，將其用作書(shū)簽的默認(rèn)描述裹驰。
keywords:與頁(yè)面內(nèi)容相關(guān)的關(guān)鍵詞隧熙，使用逗號(hào)分隔。某些搜索引擎會(huì)進(jìn)行收錄;
link 圖標(biāo)
? Favicon是 favorites icon 的縮寫(xiě)幻林，亦被稱為website icon(站點(diǎn)圖標(biāo))贞盯、page icon(頁(yè)面圖標(biāo));
? 前面我們已經(jīng)學(xué)習(xí)了它的用法:
? 事實(shí)上它還有很多兼容性的寫(xiě)法:
? 這里有一個(gè)疑惑?
- 為什么王者榮耀沒(méi)有l(wèi)ink元素也可以正常顯示圖標(biāo)呢?
? 下面的link使用方法表示有另一個(gè)可替換的網(wǎng)站供選擇:
CSS 樣式的字符 編碼
? 之前我們有制定過(guò)HTML頁(yè)面的****編碼****，但是并沒(méi)有制定****CSS****樣式的編碼沪饺。
- 那么CSS樣式的字符編碼會(huì)按照什么規(guī)則來(lái)使用呢?
? 在樣式表中有多種方法去聲明字符 編碼 躏敢，瀏覽器會(huì)按照以下順序嘗試下邊的方法(一旦找到就停止并得出結(jié)果):
-
1.文件的開(kāi)頭的 Unicode byte-order(字節(jié)順序標(biāo)記) 字符值。
2.由Content-Type:HTTP header 中的 charset 屬性給出的值或用于提供樣式表的協(xié)議中的等效值整葡。
3.CSS@規(guī)則 @charset件余。
-
4.使用參考文檔定義的字符編碼: <link> 元素的 charset 屬性。
? 該方法在 HTML5 標(biāo)準(zhǔn)中已廢除遭居，無(wú)法使用啼器。
5.假設(shè)文檔是 UTF-8。
? 開(kāi)發(fā)中推薦在CSS的開(kāi)頭編寫(xiě)@charset指定編碼:
額外知識(shí)補(bǔ)充(一)
HTML5 語(yǔ)義化元素
? 在HMTL5之前魏滚，我們的網(wǎng)站分布層級(jí)通常包括哪些部分呢?
- header镀首、nav、main鼠次、footer
? 但是這樣做有一個(gè)弊端:
我們往往過(guò)多的使用div, 通過(guò)id或class來(lái)區(qū)分元素;
對(duì)于瀏覽器來(lái)說(shuō)這些元素不夠語(yǔ)義化;
對(duì)于搜索引擎來(lái)說(shuō), 不利于SEO的優(yōu)化;
? HTML5 新增了語(yǔ)義化的元素:
<header>:頭部元素
<nav>:導(dǎo)航元素
<section>:定義文檔某個(gè)區(qū)域的元素
<article>:內(nèi)容元素
<aside>:側(cè)邊欄元素
<footer>:尾部元素
HTML5 其他新增元素
? Web端事實(shí)上一直希望可以更好的嵌入音頻和視頻, 特別是21世紀(jì)以來(lái), 用戶帶寬的不斷提高, 瀏覽器因?yàn)楹鸵曨l變得非常容易.
在HTML5之前是通過(guò)flash或者其他插件實(shí)現(xiàn)的, 但是會(huì)有很多問(wèn)題;
比如無(wú)法很好的支持HTML/CSS特性, 兼容性問(wèn)題等等;
? HTML5 增加了對(duì)媒體類型的支持:
音頻:<audio>
視頻:<video>
? Video和Audio使用方式有兩個(gè):
一方面我們可以直接通過(guò)元素使用video和autio;
另一方面我們可以通過(guò)JavaScript的API對(duì)其進(jìn)行控制;
HTML5 新增元素 - video
? HTML <video> 元素 用于在HTML或者XHTML文檔中嵌入媒體播放器更哄，用于支持文檔內(nèi)的視頻播放。
? video常見(jiàn)的屬性:
video支持的視頻格式
? 每個(gè)視頻都會(huì)有自己的格式, 瀏覽器的video并非支持所有的視頻格式
video的兼容性寫(xiě)法
? 在<video>元素中間的內(nèi)容腥寇，是針對(duì)瀏覽器不支持此元素時(shí)候的****降級(jí)****處理成翩。
內(nèi)容一:通過(guò)<source>元素指定更多視頻格式的源;
內(nèi)容二:通過(guò)p/div等元素指定在瀏覽器不支持video元素的情況, 顯示的內(nèi)容;
HTML5 新增元素 - audio
? HTML <audio> 元素用于在文檔中嵌入音頻內(nèi)容, 和video的用法非常類似
? 常見(jiàn)屬性:
audio支持的音頻格式
? 每個(gè)音頻都會(huì)有自己的格式, 瀏覽器的audio并非支持所有的視頻格式
? 具體的支持的格式可以通過(guò)下面的鏈接查看:
? 在<audio>元素中間的內(nèi)容，是針對(duì)瀏覽器不支持此元素時(shí)候的****降級(jí)****處理赦役。
input元素的擴(kuò)展內(nèi)容
? HTML5 對(duì) input元素 也進(jìn)行了擴(kuò)展麻敌，在之前我們已經(jīng)學(xué)習(xí)過(guò)的其中幾個(gè)屬性也是HTML5的特性:
placeholder:輸入框的占位文字
multiple:多個(gè)值
autofocus:最多輸入的內(nèi)容
? 另外對(duì)于input的type值也有很多擴(kuò)展:
date
Time
number
Tel
Color
Email
等等...
? 查看MDN文檔:
新增全局屬性 data-*
? 在 HTML5 中, 新增一種全局屬性的格式 data-, 用于自定義數(shù)據(jù)屬性:*
data設(shè)置的屬性可以在JavaScript的DOM操作中通過(guò)dataset輕松獲取到;
通常用于HTML和JavaScript數(shù)據(jù)之間的傳遞;
? 在小程序中, 就是通過(guò)data-來(lái)傳遞數(shù)據(jù)的, 所以該全局屬性必須要掌握.
CSS 屬性 - white-space
? white-space用于設(shè)置空白處理和換行規(guī)則
normal:合并所有連續(xù)的空白，允許單詞超屏?xí)r自動(dòng)換行
nowrap:合并所有連續(xù)的空白掂摔，不允許單詞超屏?xí)r自動(dòng)換行
pre:阻止合并所有連續(xù)的空白术羔，不允許單詞超屏?xí)r自動(dòng)換行
pre-wrap:阻止合并所有連續(xù)的空白赢赊，允許單詞超屏?xí)r自動(dòng)換行
pre-line:合并所有連續(xù)的空白(但保留換行)，允許單詞超屏?xí)r自動(dòng)換行
CSS 屬性 - text-overflow
? text-overflow通常用來(lái)設(shè)置文字溢出時(shí)的行為
clip:溢出的內(nèi)容直接裁剪掉(字符可能會(huì)顯示不完整)
ellipsis:溢出那行的結(jié)尾處用省略號(hào)表示
? text-overflow生效的前提是overflow不為visible ? 常見(jiàn)的是將white-space级历、text-overflow释移、overflow一起使用:
CSS 中的函數(shù)
? 在前面我們有使用過(guò)很多個(gè) CSS 函數(shù):
比如rgb/rgba/translate/rotate/scale等;
CSS函數(shù)通常可以幫助我們更加靈活的來(lái)編寫(xiě)樣式的值;
? 下面我們?cè)賹W(xué)習(xí)幾個(gè)非常好用的 CSS 函數(shù):
var: 使用CSS定義的變量;
calc: 計(jì)算CSS值, 通常用于計(jì)算元素的大小或位置;
blur: 毛玻璃(高斯模糊)效果;
gradient:顏色漸變函數(shù);
CSS 函數(shù) - var
? CSS 中可以自定義屬性
屬性名需要以兩個(gè)減號(hào)(--)開(kāi)始;
屬性值則可以是任何有效的CSS值;
? 我們可以通過(guò)var函數(shù)來(lái)使用:
? 規(guī)則集定義的選擇器, 是自定義屬性的可見(jiàn)作用域(只在選擇器內(nèi)部有效)
- 所以推薦將自定義屬性定義在html中寥殖，也可以使用 :root 選擇器;
CSS 函數(shù) -calc
? calc() 函數(shù)允許在聲明 CSS 屬性值時(shí)執(zhí)行一些計(jì)算玩讳。
-
計(jì)算支持加減乘除的運(yùn)算;
? + 和 - 運(yùn)算符的兩邊必須要有空白字符。
通常用來(lái)設(shè)置一些元素的尺寸或者位置;
CSS 函數(shù) - blur
? blur() 函數(shù)將 高斯模糊 應(yīng)用于輸出圖片或者元素;
blur(radius)
radius, 模糊的半徑, 用于定義高斯函數(shù)的偏差值, 偏差值越大, 圖片越模糊;
? 通常會(huì)和兩個(gè)屬性一起使用:
filter: 將模糊或顏色偏移等圖形效果應(yīng)用于元素;
backdrop-filter: 為元素后面的區(qū)域添加模糊或者其他效果;
CSS 函數(shù) – gradient
? <gradient> 是一種 <image> CSS 數(shù)據(jù)類型的子類型 嚼贡，用于表現(xiàn) 兩種或多種顏色的過(guò)渡轉(zhuǎn)變 熏纯。
CSS的<image>數(shù)據(jù)類型描述的是2D圖形;
比如background-image、list-style-image粤策、border-image樟澜、content等;
<image>常見(jiàn)的方式是通過(guò)url來(lái)引入一個(gè)圖片資源;
它也可以通過(guò)CSS的<gradient> 函數(shù)來(lái)設(shè)置顏色的漸變;
? <gradient>常見(jiàn)的函數(shù)實(shí)現(xiàn)有下面幾種:
linear-gradient():創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片;
radial-gradient():創(chuàng)建了一個(gè)圖像，該圖像是由從原點(diǎn)發(fā)出的兩種或者多種顏色之間的逐步過(guò)渡組成;
repeating-linear-gradient():創(chuàng)建一個(gè)由重復(fù)線性漸變組成的<image>;
repeating-radial-gradient():創(chuàng)建一個(gè)重復(fù)的原點(diǎn)觸發(fā)漸變組成的<image>;
等等;
linear-gradient的使用
? linear-gradient:創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片;
? radial-gradient:創(chuàng)建了一個(gè)圖像叮盘，該圖像是由從 原點(diǎn) 發(fā)出的兩種或者多種顏色之間的逐步過(guò)渡組成;
瀏覽器前綴
? 有時(shí)候可能會(huì)看到有些 CSS 屬性名前面帶有: -o-往扔、-xv-、-ms-熊户、mso-萍膛、-moz-、-webkit-
? 官方文檔專業(yè)術(shù)語(yǔ)叫做:vendor-specific extensions(供應(yīng)商特定擴(kuò)展)
? 為什么需要瀏覽器前綴了?
- CSS屬性剛開(kāi)始并沒(méi)有成為標(biāo)準(zhǔn)嚷堡，瀏覽器為了防止后續(xù)會(huì)修改名字給新的屬性添加了瀏覽器前綴;
? 上述前綴叫做瀏覽器私有前綴蝗罗，只有對(duì)應(yīng)的瀏覽器才能解析使用
-o-、-xv-:Opera等
-ms-蝌戒、mso-:IE等
-moz-:Firefox等
-webkit-:Safari串塑、Chrome等
? 注意:不需要手動(dòng)添加，后面學(xué)習(xí)了模塊化****打包****工具會(huì)自動(dòng)添加瀏覽器前綴
FC – Formatting Context
? 什么是 FC 呢?
? FC 的全稱是Formatting Context北苟，元素在標(biāo)準(zhǔn)流里面都是屬于一個(gè) FC 的;
? 塊級(jí)元素的布局屬于Block Formatting Context(BFC)
- 也就是block level box都是在BFC中布局的;
? 行內(nèi)級(jí)元素的布局屬于Inline Formatting Context(IFC)
- 而inline level box都是在IFC中布局的;
BFC – Block Formatting Context
? block level box都是在 BFC 中布局的桩匪，那么這個(gè)BFC在哪里呢?拿出來(lái)給我看看。
? MDN上有整理出在哪些具體的情況下會(huì)創(chuàng)建 BFC :
根元素(<html>)
浮動(dòng)元素(元素的 float 不是 none)
絕對(duì)定位元素(元素的 position 為 absolute 或 fixed)
行內(nèi)塊元素(元素的 display 為 inline-block)
表格單元格(元素的 display 為 table-cell友鼻，HTML表格單元格默認(rèn)為該值)傻昙，表格標(biāo)題(元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值)
匿名表格單元格元素(元素的 display 為 table彩扔、table-row妆档、 table-row-group、table-header-group虫碉、table-footer-group(分別是HTML table贾惦、
row、tbody、thead须板、tfoot 的默認(rèn)屬性)或 inline-table)
overflow 計(jì)算值(Computed)不為 visible 的塊元素
彈性元素(display 為 flex 或 inline-flex 元素的直接子元素)
網(wǎng)格元素(display 為 grid 或 inline-grid 元素的直接子元素)
display 值為 flow-root 的元素
BFC 有什么作用呢?
? 我們來(lái)看一下官方文檔對(duì) BFC 作用的描述:
? 簡(jiǎn)單概況如下:
在BFC中碰镜，box會(huì)在垂直方向上一個(gè)挨著一個(gè)的排布;
垂直方向的間距由margin屬性決定;
在同一個(gè)BFC中，相鄰兩個(gè)box之間的margin會(huì)折疊(collapse);
在BFC中习瑰，每個(gè)元素的左邊緣是緊挨著包含塊的左邊緣的;
? 那么這個(gè)東西有什么用呢?
解決margin的折疊問(wèn)題;
解決浮動(dòng)高度塌陷問(wèn)題;
BFC 的作用一:解決折疊問(wèn)題(權(quán)威)
? 在同一個(gè) BFC 中洋措，相鄰兩個(gè)box之間的margin會(huì)折疊( collapse )
官方文檔明確的有說(shuō)
The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
那么如果我們讓兩個(gè)box是不同的BFC呢?那么就可以解決折疊問(wèn)題。
BFC 的作用二:解決浮動(dòng)高度塌陷(權(quán)威)
? 網(wǎng)上有很多說(shuō)法杰刽， BFC 可以解決浮動(dòng)高度塌陷，可以實(shí)現(xiàn)清除浮動(dòng)的效果王滤。
但是從來(lái)沒(méi)有給出過(guò)BFC可以解決高度塌陷的原理或者權(quán)威的文檔說(shuō)明;
他們也壓根沒(méi)有辦法解釋贺嫂，為什么可以解決浮動(dòng)高度的塌陷問(wèn)題，但是不能解決絕對(duì)定位元素的高度塌陷問(wèn)題呢?
? 事實(shí)上雁乡， BFC 解決高度塌陷需要滿足兩個(gè)條件:
浮動(dòng)元素的父元素觸發(fā)BFC第喳，形成獨(dú)立的塊級(jí)格式化上下文(Block Formatting Context);
浮動(dòng)元素的父元素的高度是auto的;
? BFC 的高度是auto的情況下，是如下方法計(jì)算高度的
1.如果只有inline-level踱稍，是行高的頂部和底部的距離;
2.如果有block-level曲饱，是由最底層的塊上邊緣和最底層 塊盒子的下邊緣之間的距離
3.如果有絕對(duì)定位元素，將被忽略;
4.如果有浮動(dòng)元素珠月，那么會(huì)增加高度以包括這些浮動(dòng)元 素的下邊緣
媒體查詢
? 媒體查詢是一種提供給開(kāi)發(fā)者針對(duì)不同設(shè)備需求進(jìn)行定制化開(kāi)發(fā)的一個(gè)接口扩淀。
? 你可以根據(jù)設(shè)備的類型(比如屏幕設(shè)備、打印機(jī)設(shè)備)或者特定的特性(比如屏幕的寬度)來(lái)修改你的頁(yè)面啤挎。
? 媒體查詢的使用方式主要有三種:
- 方式一:通過(guò)@media和@import使用不同的CSS規(guī)則(常用);
- 方式二:使用media屬性為<style>, <link>, <source>和其他HTML元素指定特定的媒體類型;
- 方式三:使用Window.matchMedia() 和MediaQueryList.addListener() 方法來(lái)測(cè)試和監(jiān)控媒體狀態(tài);
? 比較常用的是通過(guò)@media來(lái)使用不同的CSS規(guī)則驻谆，目前掌握這個(gè)即可;
媒體查詢 - 媒體類型(Media types)
? 在使用媒體查詢時(shí)，你必須指定要使用的媒體類型庆聘。
- 媒體類型是可選的胜臊，并且會(huì)(隱式地)應(yīng)用 all 類型。
? 常見(jiàn)的媒體類型值如下:
all:適用于所有設(shè)備伙判。
print:適用于在打印預(yù)覽模式下在屏幕上查看的分頁(yè)材料和文檔象对。
screen(掌握):主要用于屏幕。
speech:主要用于語(yǔ)音合成器宴抚。
? 被廢棄的媒體類型:
CSS2.1 和 Media Queries 3 定義了一些額外的媒體類型(tty, tv, projection, handheld, braille, embossed, 以及 aural);
但是他們?cè)贛edia Queries 4 中已經(jīng)被廢棄勒魔，并且不應(yīng)該被使用;
aural類型被替換為具有相似效果的speech。
媒體查詢 – 媒體特性(Media features)
? 媒體特性(Media features)描述了 瀏覽器菇曲、輸出設(shè)備沥邻，或是預(yù)覽環(huán)境的具體特征;
通常會(huì)將媒體特性描述為一個(gè)表達(dá)式;
每條媒體特性表達(dá)式都必須用括號(hào)括起來(lái);
媒體查詢 – 邏輯操作符(logical operators)
? 媒體查詢的表達(dá)式最終會(huì)獲得一個(gè)Boolean值，也就是真(true)或者假(false)羊娃。
如果結(jié)果為真(true)唐全，那么就會(huì)生效;
如果結(jié)果為假(false)，那么就不會(huì)生效;
? 如果有多個(gè)條件，我們可以通過(guò)邏輯操作符聯(lián)合復(fù)雜的媒體查詢:
and:and 操作符用于將多個(gè)媒體查詢規(guī)則組合成單條媒體查詢
not:not運(yùn)算符用于否定媒體查詢邮利，如果不滿足這個(gè)條件則返回true弥雹，否則返回false。
only:only運(yùn)算符僅在整個(gè)查詢匹配時(shí)才用于應(yīng)用樣式延届。
, (逗號(hào)):逗號(hào)用于將多個(gè)媒體查詢合并為一個(gè)規(guī)則剪勿。
? 比如下面的媒體查詢，表示:屏幕寬度大于500方庭，小于700的時(shí)候厕吉，body背景顏色為紅色;
常見(jiàn)的移動(dòng)端設(shè)備
? 這里我們以iPhone為例:
CSS 中的單位
? 前面編寫(xiě)的CSS中，我們經(jīng)常會(huì)使用px來(lái)表示一個(gè)長(zhǎng)度(大小)械念，比如font-size設(shè)置為18px头朱，width設(shè)置為100px。 ? px是一個(gè)長(zhǎng)度(length)單位龄减，事實(shí)上CSS中還有非常多的長(zhǎng)度單位项钮。
? 整體可以分成兩類:
絕對(duì)長(zhǎng)度單位(Absolute length units);
相對(duì)長(zhǎng)度單位(Relative length units);
CSS 中的絕對(duì)單位( Absolute length units )
? 絕對(duì)單位:
它們與其他任何東西都沒(méi)有關(guān)系，通常被認(rèn)為總是相同的大小希停。
這些值中的大多數(shù)在用于打印時(shí)比用于屏幕輸出時(shí)更有用烁巫，例如，我們通常不會(huì)在屏幕上使用cm宠能。
唯一一個(gè)您經(jīng)常使用的值亚隙，就是px(像素)。
CSS 中的相對(duì)單位( Relative length units )
? 相對(duì)長(zhǎng)度單位
相對(duì)長(zhǎng)度單位相對(duì)于其他一些東西;
比如父元素的字體大小违崇，或者視圖端口的大小;
使用相對(duì)單位的好處是恃鞋，經(jīng)過(guò)一些仔細(xì)的規(guī)劃，您可以使文本或其他元素的大小與頁(yè)面上的其他內(nèi)容相對(duì)應(yīng);
? em:
? rem:
? vw/wh
當(dāng)我們聊pixel時(shí)亦歉，到底在聊些什么?
? 前面我們已經(jīng)一直在使用px單位了恤浪，px是pixel單詞的縮寫(xiě)，翻譯為像素肴楷。
? 那么像素到底是什么呢?
像素是影響顯示的基本單位水由。(比如屏幕上看到的畫(huà)面、一幅圖片);
pix是英語(yǔ)單詞picture的常用簡(jiǎn)寫(xiě)赛蔫，加上英語(yǔ)單詞“元素”element砂客，就得到pixel; ?“像素”表示“畫(huà)像元素”之意，有時(shí)亦被稱為pel(picture element);
像素的不同分類(一)
? 但是這個(gè)100個(gè)pixel到底是多少呢?
我們確實(shí)可以在屏幕上看到一個(gè)大小呵恢，但是這個(gè)大小代表的真實(shí)含義是什么呢?
我們經(jīng)常說(shuō)一個(gè)電腦的分辨率鞠值、手機(jī)的分辨率，這個(gè)CSS當(dāng)中的像素又是什么關(guān)系呢?
? 這里我們要深入到不同的像素概念中渗钉，來(lái)理解 CSS 中的pixel到底代表什么含義彤恶。
? 像素單位常見(jiàn)的有三種像素名稱:
設(shè)備像素(也稱之為物理像素);
設(shè)備獨(dú)立像素(也稱之為邏輯像素);
CSS像素;
物理像素和邏輯像素
? 設(shè)備像素钞钙，也叫物理像素。
設(shè)備像素指的是顯示器上的真實(shí)像素声离，每個(gè)像素的大小是屏幕固有的屬性芒炼，屏幕出廠以后就不會(huì)改變了;
我們?cè)谫?gòu)買顯示器或者手機(jī)的時(shí)候，提到的設(shè)備分辨率就是設(shè)備像素的大小;
比如iPhone X的分辨率 1125x2436术徊，指的就是設(shè)備像素;
? 設(shè)備獨(dú)立像素本刽，也叫邏輯像素。
如果面向開(kāi)發(fā)者我們使用設(shè)備像素顯示一個(gè)100px的寬度赠涮，那么在不同屏幕上顯示效果會(huì)是不同的;
開(kāi)發(fā)者針對(duì)不同的屏幕很難進(jìn)行較好的適配子寓，編寫(xiě)程序必須了解用戶的分辨率來(lái)進(jìn)行開(kāi)發(fā);
所以在設(shè)備像素之上，操作系統(tǒng)為開(kāi)發(fā)者進(jìn)行抽象笋除，提供了邏輯像素的概念;
比如你購(gòu)買了一臺(tái)顯示器斜友，在操作系統(tǒng)上是以1920x1080設(shè)置的顯示分辨率，那么無(wú)論你購(gòu)買的是2k株憾、4k的顯示器，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)晒衩，都是 1920x1080的大小嗤瞎。
? CSS 像素
CSS中我們經(jīng)常使用的單位也是pixel，它在默認(rèn)情況下等同于設(shè)備獨(dú)立像素(也就是邏輯像素)
畢竟邏輯像素才是面向我們開(kāi)發(fā)者的听系。
? 我們可以通過(guò)JavaScript中的screen.width和screen.height獲取到電腦的邏輯分辨率:
DPR贝奇、 PPI 、 DPI
? DPR:device pixel ratio
2010年靠胜，iPhone4問(wèn)世，不僅僅帶來(lái)了移動(dòng)互聯(lián)網(wǎng)，還帶來(lái)了Retina屏幕;
Retina屏幕翻譯為視網(wǎng)膜顯示屏醇疼，可以為用戶帶來(lái)更好的顯示;
在Retina屏幕中朴艰，一個(gè)邏輯像素在長(zhǎng)度上對(duì)應(yīng)兩個(gè)物理像素，這個(gè)比例稱之為設(shè)備像素比(device pixel ratio);
我們可以通過(guò)window.devicePixelRatio獲取到當(dāng)前屏幕上的DPR值;
? PPI (了解):每英寸像素(英語(yǔ):Pixels Per Inch址愿，縮寫(xiě):PPI)
通常用來(lái)表示一個(gè)打印圖像或者顯示器上像素的密度;
前面我們提過(guò)1英寸=2.54厘米该镣，在工業(yè)領(lǐng)域被廣泛應(yīng)用;
CSS 編寫(xiě)的痛點(diǎn)
? CSS 作為一種 樣式語(yǔ)言 , 本身用來(lái) 給HTML元素添加樣式 是沒(méi)有問(wèn)題的.
? 但是目前前端項(xiàng)目已經(jīng)越來(lái)越復(fù)雜, 不再是簡(jiǎn)簡(jiǎn)單單的幾行****CSS****就可以搞定的, 我們需要幾千行甚至上萬(wàn)行的CSS來(lái)完成頁(yè)面的美化工作.
? 隨著代碼量的增加, 必然會(huì)造成很多的編寫(xiě)不便:
比如大量的重復(fù)代碼, 雖然可以用類來(lái)勉強(qiáng)管理和抽取, 但是使用起來(lái)依然不方便;
比如無(wú)法定義變量(當(dāng)然目前已經(jīng)支持), 如果一個(gè)值被修改, 那么需要修改大量代碼, 可維護(hù)性很差; (比如主題顏色)
比如沒(méi)有專門的作用域和嵌套, 需要定義大量的id/class來(lái)保證選擇器的準(zhǔn)確性, 避免樣式混淆;
等等一系列的問(wèn)題;
? 所以有一種對(duì)CSS稱呼是 “面向命名編程”;
? 社區(qū)為了解決CSS面臨的大量問(wèn)題, 出現(xiàn)了一系列的CSS預(yù)處理器(CSS_preprocessor)
CSS 預(yù)處理器是一個(gè)能讓你通過(guò)預(yù)處理器自己獨(dú)有的語(yǔ)法來(lái)生成CSS的程序;
市面上有很多CSS預(yù)處理器可供選擇，且絕大多數(shù)CSS預(yù)處理器會(huì)增加一些原生CSS不具備的特性;
代碼最終會(huì)轉(zhuǎn)化為CSS來(lái)運(yùn)行, 因?yàn)閷?duì)于瀏覽器來(lái)說(shuō)只識(shí)別CSS;
常見(jiàn)的CSS預(yù)處理器
? 常見(jiàn)的預(yù)處理器有哪些呢? 目前使用較多的是三種預(yù)處理器:
? Sass/Scss:
2007年誕生响谓，最早也是最成熟的CSS預(yù)處理器损合，擁有ruby社區(qū)的支持，是屬于Haml(一種模板系統(tǒng))的一部分;
目前受LESS影響娘纷，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS;
? Less:
2009年出現(xiàn)嫁审，受SASS的影響較大，但又使用CSS的語(yǔ)法赖晶，讓大部分開(kāi)發(fā)者更容易上手;
比起SASS來(lái)律适，可編程功能不夠，不過(guò)優(yōu)點(diǎn)是使用方式簡(jiǎn)單、便捷擦耀，兼容CSS棉圈，并且已經(jīng)足夠使用;
另外反過(guò)來(lái)也影響了SASS演變到了SCSS的時(shí)代;
著名的Twitter Bootstrap就是采用LESS做底層語(yǔ)言的，也包括React的UI框架AntDesign眷蜓。
? Stylus:
2010年產(chǎn)生分瘾，來(lái)自Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持;
語(yǔ)法偏向于Python, 使用率相對(duì)于Sass/Less少很多
認(rèn)識(shí)Less
? 什么是Less呢? 我們來(lái)看一下官方的介紹:
- It's CSS, with just a little more.
? Less (Leaner Style Sheets 的縮寫(xiě)) 是一門CSS 擴(kuò)展語(yǔ)言, 并且兼容CSS吁系。
Less增加了很多相比于CSS更好用的特性;
比如定義變量德召、混入、嵌套汽纤、計(jì)算等等;
Less最終需要被編譯成CSS運(yùn)行于瀏覽器中(包括部署到服務(wù)器中);
編寫(xiě)Less代碼
? 我們可以編寫(xiě)如下的Less代碼:
less代碼的編譯
? 這段代碼如何被編譯成CSS代碼運(yùn)行呢?
? 方式一:下載Node環(huán)境上岗，通過(guò)npm包管理下載less工具，使用less工具對(duì)代碼進(jìn)行編譯;
因?yàn)槟壳拔覀冞€沒(méi)有學(xué)習(xí)過(guò)Node蕴坪，更沒(méi)有學(xué)習(xí)過(guò)npm工具;
所以先階段不推薦大家使用less本地工具來(lái)管理;
后續(xù)我們學(xué)習(xí)了webpack其實(shí)可以自動(dòng)完成這些操作的;
? 方法二:通過(guò)VSCode插件來(lái)編譯成CSS或者在線編譯
? 方式三:引入CDN的less編譯代碼肴掷，對(duì)less進(jìn)行實(shí)時(shí)的處理;
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
? 方式四:將less編譯的js代碼下載到本地，執(zhí)行js代碼對(duì)less進(jìn)行編譯;
Less語(yǔ)法一:Less兼容CSS
? Less語(yǔ)法一:Less是兼容CSS的
所以我們可以在Less文件中編寫(xiě)所有的CSS代碼;
只是將css的擴(kuò)展名改成了.less結(jié)尾而已;
Less語(yǔ)法二 – 變量(Variables)
? 在一個(gè)大型的網(wǎng)頁(yè)項(xiàng)目中背传，我們****CSS****使用到的某幾種屬性值往往是特定的
比如我們使用到的主題顏色值呆瞻，那么每次編寫(xiě)類似于#f3c258格式的語(yǔ)法;
一方面是記憶不太方便，需要重新編寫(xiě)或者拷貝樣式;
另一方面如果有一天主題顏色改變径玖，我們需要修改大量的代碼;
所以痴脾，我們可以將常見(jiàn)的顏色或者字體等定義為變量來(lái)使用;
? 在Less中使用如下的格式來(lái)定義變量;
@變量名: 變量值;
Less語(yǔ)法三 – 嵌套(Nesting)
? 在之前的項(xiàng)目中，當(dāng)我們需要找到一個(gè)內(nèi)層的元素時(shí)梳星，往往需要嵌套很多層的選擇器
? Less提供了選擇器的嵌套
? 特殊符號(hào): & 表示當(dāng)前選擇器的父級(jí)
Less語(yǔ)法四 – 運(yùn)算(Operations)
? 在Less中赞赖，算術(shù)運(yùn)算符 +、-冤灾、前域、/ 可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算韵吨。*
算術(shù)運(yùn)算符在加话侄、減或比較之前會(huì)進(jìn)行單位換算，計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類型為準(zhǔn);
如果單位換算無(wú)效或失去意義学赛，則忽略單位;
Less語(yǔ)法五 – 混合(Mixins)
? 在原來(lái)的CSS編寫(xiě)過(guò)程中年堆，多個(gè)選擇器中可能會(huì)有大量相同的代碼
我們希望可以將這些代碼進(jìn)行抽取到一個(gè)獨(dú)立的地方，任何選擇器都可以進(jìn)行復(fù)用;
在less中提供了混入(Mixins)來(lái)幫助我們完成這樣的操作;
? 混合(Mixin)是一種將一組屬性從一個(gè)規(guī)則集(或混入)到另一個(gè)規(guī)則集的方法盏浇。
? 注意:混入在沒(méi)有參數(shù)的情況下变丧，****小括號(hào)可以省略，但是不建議這樣使用****;
Less語(yǔ)法五 – 混合(Mixins)
? 混入也可以傳入變量(暫時(shí)了解)
? Less語(yǔ)法六:映射(Maps)
? 混入和 映射 結(jié)合:混入也可以當(dāng)做一個(gè)自定義函數(shù)來(lái)使用(暫時(shí)了解)
less其他語(yǔ)法補(bǔ)充
? Less語(yǔ)法七:extend繼承
和mixins作用類似绢掰，用于復(fù)用代碼;
和mixins相比痒蓬，繼承代碼最終會(huì)轉(zhuǎn)化成并集選擇器;
? Less語(yǔ)法八:Less內(nèi)置函數(shù)
Less 內(nèi)置了多種函數(shù)用于轉(zhuǎn)換顏色童擎、處理字符串、算術(shù)運(yùn)算等攻晒。
內(nèi)置函數(shù)手冊(cè):https://less.bootcss.com/functions/
less其他語(yǔ)法補(bǔ)充
? Less語(yǔ)法九:作用域(Scope)
在查找一個(gè)變量時(shí)顾复，首先在本地查找變量和混合(mixins);
如果找不到，則從“父”級(jí)作用域繼承;
? Less語(yǔ)法十:注釋(Comments)
- 在Less中鲁捏，塊注釋和行注釋都可以使用;
? Less語(yǔ)法十一:導(dǎo)入(Importing)
導(dǎo)入的方式和CSS的用法是一致的;
導(dǎo)入一個(gè) .less 文件芯砸，此文件中的所有變量就可以全部使用了;
如果導(dǎo)入的文件是 .less 擴(kuò)展名，則可以將擴(kuò)展名省略掉;
認(rèn)識(shí)Sass和Scss
? 事實(shí)上给梅，最初Sass 是Haml的一部分假丧，Haml 是一種模板系統(tǒng)，由 Ruby 開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)动羽。
? 所以包帚，Sass的語(yǔ)法使用的是類似于Ruby的語(yǔ)法，沒(méi)有花括號(hào)运吓，沒(méi)有分號(hào)渴邦，具有嚴(yán)格的縮進(jìn);
? 我們會(huì)發(fā)現(xiàn)它的語(yǔ)法和CSS區(qū)別很大，后來(lái)官方推出了全新的語(yǔ)法SCSS拘哨，意思是Sassy CSS谋梭，他是完全兼容CSS的。
? 目前在前端學(xué)習(xí)SCSS直接學(xué)習(xí)SCSS即可:
SCSS的語(yǔ)法也包括變量宅静、嵌套章蚣、混入站欺、函數(shù)姨夹、操作符、作用域等;
通常也包括更為強(qiáng)大的控制語(yǔ)句矾策、更靈活的函數(shù)磷账、插值語(yǔ)法等;
大家可以根據(jù)之前學(xué)習(xí)的less語(yǔ)法來(lái)學(xué)習(xí)一些SCS語(yǔ)法;
? 目前大家掌握Less的使用即可;
什么是移動(dòng)端適配?
? 移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，讓人們已經(jīng)越來(lái)越習(xí)慣于使用手機(jī)來(lái)完成大部分日常的事務(wù)贾虽。
前端我們已經(jīng)學(xué)習(xí)了大量HTML逃糟、CSS的前端開(kāi)發(fā)知識(shí)，并且也進(jìn)行了項(xiàng)目實(shí)戰(zhàn);
這些知識(shí)也同樣適用于移動(dòng)端開(kāi)發(fā)蓬豁，但是如果想讓一個(gè)頁(yè)面真正適配于移動(dòng)端绰咽，我們最好多了解一些移動(dòng)端的知識(shí);
? 移動(dòng)端開(kāi)發(fā)目前主要包括三類:
原生App開(kāi)發(fā)(iOS、Android地粪、RN取募、uniapp、Flutter等)
小程序開(kāi)發(fā)(原生小程序蟆技、uniapp玩敏、Taro等)
Web頁(yè)面(移動(dòng)端的Web頁(yè)面斗忌，可以使用瀏覽器或者webview瀏覽)
? 因?yàn)槟壳耙苿?dòng)端設(shè)備較多，所以我們需要對(duì)其進(jìn)行一些適配旺聚。
? 這里有兩個(gè)概念:
自適應(yīng):根據(jù)不同的設(shè)備屏幕大小來(lái)自動(dòng)調(diào)整尺寸织阳、大小;
響應(yīng)式:會(huì)隨著屏幕的實(shí)時(shí)變動(dòng)而自動(dòng)調(diào)整，是一種自適應(yīng);
認(rèn)識(shí)視口viewport
? 在前面我們已經(jīng)簡(jiǎn)單了解過(guò)視口的概念了:
在一個(gè)瀏覽器中砰粹，我們可以看到的區(qū)域就是視口(viewport);
我們說(shuō)過(guò)fixed就是相對(duì)于視口來(lái)進(jìn)行定位的;
在PC端的頁(yè)面中唧躲，我們是不需要對(duì)視口進(jìn)行區(qū)分，因?yàn)槲覀兊牟季忠暱诤鸵曈X(jué)視口是同一個(gè);
? 但是在移動(dòng)端伸眶，不太一樣惊窖，你布局的****視口****和你可見(jiàn)的視口是不太一樣的。
這是因?yàn)橐苿?dòng)端的網(wǎng)頁(yè)窗口往往比較小厘贼，我們可能會(huì)希望一個(gè)大的網(wǎng)頁(yè)在移動(dòng)端可以完整的顯示;
所以在默認(rèn)情況下界酒，移動(dòng)端的布局視口是大于視覺(jué)視口的;
? 所以在移動(dòng)端，我們可以將視口劃分為三種情況:
布局視口(layout viewport)
視覺(jué)視口(visual layout)
理想視口(ideal layout)
? 這些概念的區(qū)分嘴秸，事實(shí)上來(lái)自ppk毁欣，他也是對(duì)前端貢獻(xiàn)比較大的一個(gè)人(特別是在移動(dòng)端瀏覽器)
布局視口和視覺(jué)視口
? 布局視口(layout viewport)
? 默認(rèn)情況下，一個(gè)在PC端的網(wǎng)頁(yè)在移動(dòng)端會(huì)如何顯示呢?
第一岳掐，它會(huì)按照寬度為980px來(lái)布局一個(gè)頁(yè)面的盒子和內(nèi)容;
第二凭疮，為了顯示可以完整的顯示在頁(yè)面中，對(duì)整個(gè)頁(yè)面進(jìn)行縮小;
? 我們相對(duì)于980px布局的這個(gè)****視口****串述，稱之為****布局視口(layout viewport)****;
- 布局視口的默認(rèn)寬度是980px;
? 視覺(jué)視口(visual viewport)
如果默認(rèn)情況下执解，我們按照980px顯示內(nèi)容，那么右側(cè)有一部分區(qū)域 就會(huì)無(wú)法顯示纲酗，所以手機(jī)端瀏覽器會(huì)默認(rèn)對(duì)頁(yè)面進(jìn)行縮放以顯示到用 戶的可見(jiàn)區(qū)域中;
那么顯示在可見(jiàn)區(qū)域的這個(gè)視口衰腌，就是視覺(jué)視口(visual viewport)
? 在Chrome上按shift+鼠標(biāo)左鍵可以進(jìn)行縮放。
理想視口(ideal viewport)
? 如果所有的網(wǎng)頁(yè)都按照980px在移動(dòng)端布局觅赊，那么最終頁(yè)面都會(huì)被縮放顯示右蕊。
事實(shí)上這種方式是不利于我們進(jìn)行移動(dòng)的開(kāi)發(fā)的，我們希望的是設(shè)置100px吮螺，那么顯示的就是100px;
如何做到這一點(diǎn)呢?通過(guò)設(shè)置理想視口(ideal viewport);
? 理想視口(ideal viewport):
默認(rèn)情況下的layout viewport并不適合我們進(jìn)行布局;
我們可以對(duì)layout viewport進(jìn)行寬度和縮放的設(shè)置饶囚，以滿足正常在一個(gè)移動(dòng)端窗口的布局;
這個(gè)時(shí)候可以設(shè)置meta中的viewport;
移動(dòng)端適配方案
? 移動(dòng)端的屏幕尺寸通常是非常繁多的，很多時(shí)候我們希望在不同的屏幕尺寸上顯示不同的大小;
- 比如我們?cè)O(shè)置一個(gè)100x100的盒子
? 在375px的屏幕上顯示是100x100; ? 在320px的屏幕上顯示是90+x90+; ? 在414px的屏幕上顯示是100+x100+;
- 其他尺寸也是類似鸠补，比如padding萝风、margin、border紫岩、left规惰，甚至是font-size等等;
? 這個(gè)時(shí)候，我們可能可以想到一些方案來(lái)處理尺寸:
- 方案一:百分比設(shè)置;
? 因?yàn)椴煌瑢傩缘陌俜直戎当灰颍鄬?duì)的可能是不同參照物卿拴，所以百分比往往很難統(tǒng)一;
? 所以百分比在移動(dòng)端適配中使用是非常少的;
方案二:rem單位+動(dòng)態(tài)html的font-size;
方案三:vw單位;
方案四:flex的彈性布局;
適配方案 – rem+動(dòng)態(tài)html的font-size
? rem單位是相對(duì)于html元素的font-size來(lái)設(shè)置的衫仑，那么如果我們需要在不同的屏幕下有不同的尺寸，可以動(dòng)態(tài)的修改html的 font-size尺寸堕花。
? 比如如下案例:
1.設(shè)置一個(gè)盒子的寬度是2rem;
2.設(shè)置不同的屏幕上html的font-size不同;
? 這樣在開(kāi)發(fā)中文狱，我們只需要考慮兩個(gè)問(wèn)題:
問(wèn)題一:針對(duì)不同的屏幕，設(shè)置html不同的font-size;
問(wèn)題二:將原來(lái)要設(shè)置的尺寸缘挽，轉(zhuǎn)化成rem單位;
rem的font-size尺寸
? 方案一:媒體查詢
可以通過(guò)媒體查詢來(lái)設(shè)置不同尺寸范圍內(nèi)的屏幕html的font-size尺寸;
缺點(diǎn):
? 1.我們需要針對(duì)不同的屏幕編寫(xiě)大量的媒體查詢;
? 2.如果動(dòng)態(tài)改變尺寸瞄崇，不會(huì)實(shí)時(shí)的進(jìn)行更新;
? 方案二:編寫(xiě)js代碼
如果希望實(shí)時(shí)改變屏幕尺寸時(shí)，font-size也可以實(shí)時(shí)更改壕曼，可以通過(guò)js代碼;
方法:
? 1.根據(jù)html的寬度計(jì)算出font-size的大小苏研，并且設(shè)置到html上;
? 2.監(jiān)聽(tīng)頁(yè)面的實(shí)時(shí)改變，并且重新設(shè)置font-size的大小到html上;
? 方案三:lib-flexible庫(kù)
- 事實(shí)上腮郊，lib-flexible庫(kù)做的事情是相同的摹蘑，你也可以直接引入它;
rem的單位換算
? 方案一:手動(dòng)換算
比如有一個(gè)在375px屏幕上，100px寬度和高度的盒子; ? 我們需要將100px轉(zhuǎn)成對(duì)應(yīng)的rem值;
100/37.5=2.6667轧飞，其他也是相同的方法計(jì)算即可;
? 方案二:less/scss函數(shù)
rem的單位換算
? 方案三:postcss-pxtorem
- 目前在前端的工程化開(kāi)發(fā)中衅鹿，我們可以借助于webpack的工具來(lái)完成自動(dòng)的轉(zhuǎn)化;
? 方案四:VSCode插件
- px to rem 的插件，在編寫(xiě)時(shí)自動(dòng)轉(zhuǎn)化;
考拉海購(gòu)設(shè)計(jì)稿
適配方案 - vw
? 在flexible GitHub****上已經(jīng)有寫(xiě)過(guò)這樣的一句話:
? 所以它更推薦使用viewport的兩個(gè)單位****vw****过咬、wh大渤。
? vw的兼容性如何呢?
vw和rem的對(duì)比
? rem事實(shí)上是作為一種過(guò)渡的方案，它利用的也是****vw****的思想掸绞。
前面不管是我們自己編寫(xiě)的js泵三，還是flexible的源碼;
都是將1rem等同于設(shè)計(jì)稿的1/10，在利用1rem計(jì)算相對(duì)于整個(gè)屏幕的尺寸大小;
那么我們來(lái)思考衔掸，1vw不是剛好等于屏幕的1/100嗎?
而且相對(duì)于rem還更加有優(yōu)勢(shì);
? vw相比于rem的優(yōu)勢(shì):
優(yōu)勢(shì)一:不需要去計(jì)算html的font-size大小烫幕，也不需要給html設(shè)置這樣一個(gè)font-size;
優(yōu)勢(shì)二:不會(huì)因?yàn)樵O(shè)置html的font-size大小，而必須給body再設(shè)置一個(gè)font-size具篇，防止繼承;
優(yōu)勢(shì)三:因?yàn)椴灰蕾噁ont-size的尺寸纬霞，所以不用擔(dān)心某些原因html的font-size尺寸被篡改凌埂，頁(yè)面尺寸混亂;
優(yōu)勢(shì)四:vw相比于rem更加語(yǔ)義化驱显，1vw剛才是1/100的viewport的大小;
優(yōu)勢(shì)五:可以具備rem之前所有的優(yōu)點(diǎn);
? vw我們只面臨一個(gè)問(wèn)題，將尺寸換算成vw的單位即可; ? 所以瞳抓，目前相比于rem埃疫，更加推薦大家使用vw(但是理解rem依然很重要)
vw的單位換算
? 方案一:手動(dòng)換算
比如有一個(gè)在375px屏幕上，100px寬度和高度的盒子;
我們需要將100px轉(zhuǎn)成對(duì)應(yīng)的vw值;
100/3.75=26.667孩哑，其他也是相同的方法計(jì)算即可;
? 方案二:less/scss函數(shù)
vw的單位換算
? 方案三:postcss-px-to-viewport-8-plugin
- 和rem一樣栓霜，在前端的工程化開(kāi)發(fā)中，我們可以借助于webpack的工具來(lái)完成自動(dòng)的轉(zhuǎn)化;
? 方案四:VSCode插件
- px to vw 的插件横蜒，在編寫(xiě)時(shí)自動(dòng)轉(zhuǎn)化;
