前言
題目來自ConardLi的blog
寫的是自己的題解拄衰，水平有限，所以僅供參考
代碼會(huì)整合在github饵骨，覺得有幫助就給個(gè)star吧~
正文
二翘悉、HTML和CSS
CSS
1、CSS盒模型居触，在不同瀏覽器的差異
加了doctype聲明就都是w3c標(biāo)準(zhǔn)盒模型了
2妖混、CSS所有選擇器及其優(yōu)先級老赤、使用場景，哪些可以繼承制市，如何運(yùn)用at規(guī)則
-
#(id) -
.(class) -
*所有元素 -
element選擇該節(jié)點(diǎn) -
div,p選擇所有div元素和所有p元素 -
div p選擇div元素內(nèi)部所有p元素 -
div>p選擇父元素為div的所有p元素 -
div+p選擇 -
[class]選擇帶有 class 屬性所有元素 -
[class = blank]選擇 class="blank" 的所有元素 -
[class ~= blank]選擇 title 屬性包含單詞 "blank" 的所有元素 -
[class |= blank]選擇 lang 屬性值以 "blank" 開頭的所有元素 -
a:link選擇所有未被訪問的鏈接 -
a:visited選擇所有已被訪問的鏈接 -
a:active選擇活動(dòng)鏈接 -
a:hover選擇鼠標(biāo)指針位于其上的鏈接 -
input:focus選擇獲得焦點(diǎn)的 input 元素 -
p:first-letter選擇每個(gè) <p> 元素的首字母 -
p:first-line選擇每個(gè) <p> 元素的首行 -
p:first-child選擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素 -
p:before在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容 -
p:after在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容 -
p:lang(it)選擇帶有以 "it" 開頭的 lang 屬性值的每個(gè) <p> 元素 -
p~ul選擇前面有 <p> 元素的每個(gè) <ul> 元素 -
a[src^="https"]選擇其 src 屬性值以 "https" 開頭的每個(gè) <a> 元素 -
a[src$=".pdf"]選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素 -
a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素 -
p:first-of-type選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素 -
p:last-of-type選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素 -
p:only-of-type選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素 -
p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素 -
p:nth-last-child(2)同上抬旺，從最后一個(gè)子元素開始計(jì)數(shù)。 -
p:nth-of-type(2)選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素 -
p:nth-last-of-type(2)同上祥楣，但是從最后一個(gè)子元素開始計(jì)數(shù) -
p:last-child選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素 -
:root選擇文檔的根元素 -
p:empty選擇沒有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)） -
#news:target選擇當(dāng)前活動(dòng)的 #news 元素 -
input:enabled選擇每個(gè)啟用的 <input> 元素 -
input:disabled選擇每個(gè)禁用的 <input> 元素 -
input:checked選擇每個(gè)被選中的 <input> 元素 -
:not(p)選擇非 <p> 元素的每個(gè)元素 -
::selection選擇被用戶選取的元素部分
.......
能寫全的怕不是人肉MDN
CSS選擇器參考手冊
優(yōu)先級：
!importance > style > id > class > tag > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
繼承：
font,font-family
如何運(yùn)用at規(guī)則:
- @media
media分兩個(gè)部分 一個(gè)是媒體類型 一個(gè)是媒體功能
例如：
如果文檔寬度小于 300 像素則修改背景顏色
@media screen and (max-width: 300px){
body{
background-color: #red
}
}
- @charset
@charset "utf-8"
- @import
@import "mystyle.css"
@import url("mystyle.css")
- @page
@page 規(guī)則用于在打印文檔時(shí)修改某些CSS屬性开财。你不能用@page規(guī)則來修改所有的CSS屬性，而是只能修改margin,orphans,widow 和 page breaks of the document误褪。對其他屬性的修改是無效的责鳍。
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
@counter-style
@counter-style MDN@key-frames
key-frames產(chǎn)生一種數(shù)據(jù)，用于定義動(dòng)畫關(guān)鍵幀兽间。
@keyframes diagonal-side {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
- @fontface
fontface用于定義一種字體历葛，iconfont技術(shù)就是利用這個(gè)特性來實(shí)現(xiàn)
@font-face {
font-family: Gentium;
src: url(http://xxxx);
}
p {
font-family: Gentium, serif;
}
@support
support檢查環(huán)境的特性，它與media比較類似@namespace
用于跟xml命名空間配合的一個(gè)規(guī)則渡八，表示內(nèi)部的css選擇器全都帶上特定命名空間@viewport
用于設(shè)置視口的一些特性啃洋，不過兼容性目前不是很好，多數(shù)時(shí)候被html的meta代替
CSS偽類和偽元素有哪些屎鳍，它們的區(qū)別和實(shí)際應(yīng)用
CSS Selector Level 3 為了區(qū)分這兩者的混淆，而特意用冒號加以區(qū)分：
偽類用一個(gè)冒號表示 :first-child
偽元素則使用兩個(gè)冒號表示 ::first-line
偽類的例子有：
- :hover
- :active
- :first-child
- :visited
偽元素的例子有：
- :first-line
- :first-letter
- :after
- :before
4问裕、HTML文檔流的排版規(guī)則逮壁，CSS幾種定位的規(guī)則、定位參照物粮宛、對文檔流的影響窥淆，如何選擇最好的定位方式，雪碧圖實(shí)現(xiàn)原理
HTML文檔流的排版規(guī)則：
如果我們寫html不寫css巍杈，那么排版規(guī)則就是默認(rèn)從上至下(塊級元素)忧饭，從左到右(內(nèi)聯(lián)元素 如span)
CSS幾種定位的規(guī)則：
position:
- relative
相對定位，于當(dāng)前的標(biāo)簽初始的位置為參照進(jìn)行定位筷畦，不會(huì)將對應(yīng)的標(biāo)簽從父級脫離出來 - absolute
(重點(diǎn),頻率最高)絕對定位;已定位父元素為參照進(jìn)行定位,并且已定位父元素的屬性 值必須為relative absolute或者fixed,如果父級標(biāo)簽中都沒有定位,最終標(biāo)簽會(huì)以document為參照進(jìn)行定位, 元素設(shè)置absolute之后,會(huì)從父元素中脫離出來(脫離文檔流)提升層級词裤。 - fixed
以瀏覽器窗口為參照物進(jìn)行定位,也會(huì)讓當(dāng)前元素從文檔流中脫離出來(脫離文檔流) - sticky
- static
靜態(tài)定位,無參照物,不會(huì)進(jìn)行定位
雪碧圖原理：通過background的位置來展示不同的圖片
5、水平垂直居中的方案鳖宾、可以實(shí)現(xiàn)6種以上并對比它們的優(yōu)缺點(diǎn)
6吼砂、BFC實(shí)現(xiàn)原理，可以解決的問題鼎文，如何創(chuàng)建BFC
7渔肩、可使用CSS函數(shù)復(fù)用代碼，實(shí)現(xiàn)特殊效果
??
8拇惋、PostCSS周偎、Sass抹剩、Less的異同，以及使用配置蓉坎，至少掌握一種
postcss
sass-loader
less-loader
9澳眷、CSS模塊化方案、如何配置按需加載袍嬉、如何防止CSS阻塞渲染
css-module css-scoped
按需加載境蔼，防止CSS阻塞渲染
10.熟練使用CSS實(shí)現(xiàn)常見動(dòng)畫，如漸變伺通、移動(dòng)箍土、旋轉(zhuǎn)、縮放等等
animation：
| 屬性 | 描述 |
|---|---|
| animation-name | 指定@keyframes動(dòng)畫的名稱 |
| animation-duration | 指定動(dòng)畫完成一個(gè)周期所需要的時(shí)間罐监，單位秒(s)或者毫秒(ms)吴藻，默認(rèn)是0 |
| animation-timing-function | 指定動(dòng)畫計(jì)時(shí)函數(shù)，即動(dòng)畫的速度曲線弓柱，默認(rèn)是 "ease"沟堡。 |
| animation-delay | 指定動(dòng)畫延遲時(shí)間，即動(dòng)畫何時(shí)開始矢空，默認(rèn)是0 |
| animation-iteration-count | 指定動(dòng)畫播放的次數(shù)航罗，默認(rèn)是1 |
| animation-direction | 指定動(dòng)畫播放的方向，默認(rèn)是normal |
| animation-fill-mode | 動(dòng)畫填充模式屁药，默認(rèn)是none |
| animation-play-state | 指定動(dòng)畫播放狀態(tài)粥血，正在運(yùn)行或暫停。默認(rèn)是running |
11酿箭、CSS瀏覽器兼容性寫法复亏，了解不同API在不同瀏覽器下的兼容性情況
不了解 告辭
12、掌握一套完整的響應(yīng)式布局方案
媒體查詢
13缭嫡、flex
- flex：1展開具體的三個(gè)屬性是什么值
flex：0 1 auto
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫 - 主軸
flex-direction：row 主軸就會(huì)是橫向的
flex-direction：column 主軸方向就會(huì)變?yōu)榭v向的 - 交叉軸
個(gè)人理解是與主軸垂直
14缔御、a標(biāo)簽周圍為什么會(huì)有空格
a標(biāo)簽?zāi)J(rèn)是行內(nèi)元素，而行內(nèi)元素之間的回車鍵妇蛀、多個(gè)空格耕突、多個(gè)制表符（tab）等均會(huì)按一個(gè)空格來處理，這樣的話讥耗，如果相鄰的兩個(gè)a標(biāo)簽不在同一行（換句話說它們之間有回車換行符）有勾，則顯示在頁面的時(shí)候它們之間就會(huì)出現(xiàn)一個(gè)空格的間隙。
<body>
<div class="space">
<a href=" ">a</a>
<a href="##">b</a>
<a href="##">c</a>
</div>
</body>
<body>
<div class="space">
<a href=" ">a</a><a href="##">b</a><a href="##">c</a>
</div>
</body>
