1. 結(jié)構(gòu)性偽類選擇器的功能定義

:first-child ：選擇是其父元素中的第1個子元素的元素档玻；
:last-child ：選擇是其父元素中的最后一個子元素的元素洞渔；
:nth-child(n) ：選擇是其父元素中的第n個子元素的元素挫望；
:nth-last-child(n) ：選擇是其父元素中的倒數(shù)第n個子元素的元素后控；
:only-child ：選擇是其父元素中的唯一的子元素的元素柏蘑；
:only-of-type ：選擇是其父元素中的唯一的某個元素類型的子元素的元素幸冻；
:nth-of-type(n) ：選擇其父元素中的第n個某(任何)元素；
:nth-last-of-type(n) ：選擇其父元素中的倒數(shù)第n個某(任何)元素咳焚；

注意：
n可以是任意正整數(shù)洽损，當(dāng)直接寫n時間，代表正整數(shù)變量（自增器革半，從1自增碑定，增量為1）；

2. counter()和counter-increment的工作原理

經(jīng)過測試又官，發(fā)現(xiàn)延刘；以下內(nèi)容：
counter()用來生成計數(shù)器的占位符，如果指定的計數(shù)器沒有創(chuàng)建六敬，則會創(chuàng)建盯應(yīng)的計數(shù)器碘赖；每個計數(shù)器有一個變量（我稱之為“計數(shù)變量”）保存當(dāng)前的計數(shù)；counter-increment用來對其指定的計數(shù)器的計數(shù)器的計數(shù)變量進行遞增；每應(yīng)用一次counter-increment普泡，就遞增一次其指定的計數(shù)器的計數(shù)變量播掷；

3. 元素分類

元數(shù)據(jù)元素： 由此可見主要是<meta>元素中的事情了，向瀏覽器提供信息和指示撼班；
流元素： 聽名字怪異叮趴，但是其實是規(guī)定這些元素可以成為父元素；
短語元素： 和流元素呼應(yīng)权烧，規(guī)定這些元素可以成為子元素眯亦。
受限元素： 這些元素要么沒什么特別的含義，要么就只能用在一些非常有限的情況下般码。比如說妻率，< li>元素只能有三種父元素< ul>、< ol>板祝、< menu>宫静；
虛元素： 不能包含任何內(nèi)容的元素；這種元素只有兩種表示形式：

1. 僅有開始標(biāo)簽券时，沒有結(jié)束標(biāo)簽：< 虛元素>
2. 自閉合標(biāo)簽：< 虛元素 />
   空元素： 沒有任何內(nèi)容的元素：< 元素名字>< /元素名字>孤里，可以簡寫成自閉合標(biāo)簽：< 元素名字 />；

注意：
空元素和虛元素的區(qū)別：空元素描述的是元素內(nèi)容為空時的狀態(tài)橘洞；虛元素描述的是元素不允許有內(nèi)容捌袜；

元數(shù)據(jù)還好理解，就是流元素和短語元素好奇怪炸枣，舉個例子虏等，div既可以是流元素也可以是短語元素，因為它能包含其他的元素也能被其他的元素包含适肠。但是像< b>這樣的就僅僅是短語元素了霍衫。

4. 屬性影響

1. 當(dāng)html元素的hidden屬性值設(shè)置為true時，會自動更改其css的屬性display為none侯养；
2. 當(dāng)把元素設(shè)置為浮動(float)時敦跌，會自動更改其屬性display的值為block；

5. CSS background總結(jié)

一般設(shè)置對象圖片作為背景屬性實例 background:#666 url(圖片地址) no-repeat center top ;（解釋首先設(shè)置背景顏色 緊跟設(shè)置圖片作背景 緊跟圖片是否重復(fù) 然后跟圖片在對象位置逛揩。前面的背景顏色可以不用設(shè)同時不是必須柠傍，一般使用圖片作為對象背景如果要設(shè)置圖片是否重復(fù)顯示距離位置將設(shè)置圖片位置）

1. background-position：表示背景圖像的顯示區(qū)域的左上角相對于圖像左上角的坐標(biāo)位置；
2. 設(shè)置圖片作為背景如果圖片設(shè)置圖片在X坐標(biāo)方向重復(fù)息尺，如果再設(shè)置圖片在對象位置的左或右位置時將無效携兵，可設(shè)置在對象上或下位置開始顯示疾掰。
3. 設(shè)置圖片作為背景如果圖片設(shè)置圖片在Y坐標(biāo)方向重復(fù)搂誉，如果再設(shè)置圖片在對象位置的上或下位置時將無效，可設(shè)置圖片在對象左或右位置開始顯示静檬。
4. 如果設(shè)置背景完全重復(fù)顯示炭懊，那設(shè)置圖片在對象上下左右位置開始顯示將無線并级。

6. CSS中漸變函數(shù)的特性

詳細(xì)內(nèi)容請參考《CSS中漸變特性的研究》

1. 每個漸變至少需要指定2個色標(biāo)color-stop；
2. 對于任意2個相鄰色標(biāo)之間的顏色變化是：在前一個色標(biāo)與后一個色標(biāo)的位置之間侮腹，線性地把前一個色標(biāo)的顏色過渡到后一個色標(biāo)的顏色嘲碧；
3. 對于多個沒指定位置的色標(biāo)，它們的位置分別是：前面最近的有位置的色標(biāo)的位置 與 后面最近有位置的色標(biāo)的位置 之間的平分點父阻；
4. 如果第1個色標(biāo)沒有指定位置愈涩，則第1個色標(biāo)的位置是漸變區(qū)域的起始位置；
5. 如果最后1個色標(biāo)沒有指定位置加矛，則最后1個色標(biāo)的位置是漸變區(qū)域的結(jié)束位置履婉；
6. 對于非重復(fù)漸變，第1個色標(biāo)位置之前的顏色是第1個色標(biāo)的顏色斟览；最后一個色標(biāo)位置之后的顏色是最后一個色標(biāo)的顏色毁腿；
7. 對于重復(fù)漸變，會用漸變區(qū)域分別平鋪第1個色標(biāo)之前的區(qū)域 和 最后1個色標(biāo)之后的區(qū)域 苛茂，直到填滿為止已烤；
8. 對于重復(fù)漸變，如果漸變漸變區(qū)域的長寬為零妓羊，則會用最后1個色標(biāo)的顏色填充整個區(qū)域胯究；
9. 如果前面色標(biāo)設(shè)置的位置大于后面色標(biāo)設(shè)置的位置，則后面色標(biāo)設(shè)置的位置無效躁绸，所有比前端色標(biāo)的位置小的色標(biāo)唐片，都將用 大于自身位置的前面的色標(biāo)中位置最大的那個色標(biāo)的位置 作為自身的位置；

7. 絕對定位情況下top涨颜、right费韭、bottom、left的特性

在絕對定位的情況下庭瑰，如果元素沒有設(shè)置寬度width星持，且設(shè)置了left和right，則元素的寬度width會被屬性left和right伸縮弹灭，即元素真實的寬度width會適合于left和right的值督暂；同樣，對于元素的高度height與top和bottom之間穷吮，也存在這種關(guān)系逻翁；

8. ::before和::after偽元素選擇器

在::before和::after偽元素選擇器中必須定義content屬性；
瀏覽器會為這2個偽元素選擇器分別生成相應(yīng)的盒子捡鱼，這些盒子是作為元素的非主盒子八回；

9. 彈性盒

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個或多個彈性子元素缠诅。

注意：

1. 彈性容器外及彈性子元素內(nèi)是正常渲染的溶浴。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
2. 容器先根據(jù)”flex-wrap"的屬性值來確定是單行布局或多行布局管引，然后把條目分配到對應(yīng)的行中士败，最后在每一行內(nèi)進行空白空間的分配。

尺寸

彈性子元素的主軸尺寸的公式為：

假設(shè)：

彈性容器的主軸尺寸這ConSize褥伴；
該彈性容器的某行內(nèi)有n個彈性子元素谅将，
這些彈性子元素的flex-basis分別為Item1Basis、Item2Basis重慢、Item3Basis......ItemNBasis戏自；
這些彈性子元素的flex-grow分別為Item1Grow、Item2Grow伤锚、Item3Grow......ItemNGrow擅笔；
這些彈性子元素的flex-shrink分別為Item1Shrink、Item2Shrink屯援、Item3Shrink......ItemNShrink猛们；
這些彈性子元素的flex-shrink分別為Item1Size、Item2Size狞洋、Item3Size......ItemNSize弯淘；

BasisTotal = Item1Basis + Item2Basis + …+ ItemNBasis
GrowTotal = Item1Grow + Item2Grow + …+ ItemNGrow
ShrinkTotal = Item1Shrink + Item2Shrink + …+ ItemNShrink

則有：
對于任意一個彈性子元素ItemX，有：

當(dāng)彈性容器在主軸尺寸上有多余的空間時吉懊，即：當(dāng) ConSize >= BasisTotal 時庐橙，有：
ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXGrow/GrowTotal )

當(dāng)彈性容器在主軸尺寸上的空間不足時，即：當(dāng) ConSize <= BasisTotal 時借嗽，有：
ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXShrink/GrowShrink )
即：
ItemXSize = ItemXBasis - ( BasisTotal - ConSize)*( ItemXShrink/GrowShrink )

對齊

justify-content： 設(shè)置或檢索 在 彈性容器的行的范圍內(nèi) 彈性盒子元素在主軸方向上的對齊方式态鳖。
操作范圍：行；
操作對象：行內(nèi)的彈性子元素恶导；
適用于：flex容器浆竭；
備注：當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達到其最大值時，這一屬性可協(xié)助對多余的空間進行分配惨寿。當(dāng)元素溢出某行時邦泄，這一屬性同樣會在對齊上進行控制。
取值效果如下：

justify-content屬性不同值的布局效果.jpg

align-content： 設(shè)置或檢索 在 彈性容器的范圍內(nèi) 行在側(cè)軸方向上的對齊方式裂垦。
操作范圍：彈性容器顺囊；
操作對象：行；
適用于：多行的flex容器蕉拢；
備注：請注意本屬性在只有一行的伸縮容器上沒有效果特碳。
取值效果如下：

align-content屬性的不同值的布局效果.jpg

align-items： 定義彈性盒子元素自己 在 彈性容器的行的范圍內(nèi) 在側(cè)軸方向上的對齊方式诚亚。
操作范圍：行；
操作對象：行內(nèi)的彈性子元素测萎；
適用于：flex容器；
取值效果如下：

align-items屬性不同值的布局效果.jpg

align-self： 定義 在 彈性容器的行的范圍內(nèi) 彈性盒子元素在側(cè)軸方向上的對齊方式届巩。
操作范圍：行硅瞧；
操作對象：行內(nèi)的彈性子元素；
適用于：flex子項

10. 字間距和行間距

在CSS中恕汇，可以通過CSS屬性letter-spacing或word-spacing設(shè)置字間距腕唧；但沒有直接設(shè)置行間距的屬性，不過可以通過設(shè)置行高屬性line-height來實現(xiàn)設(shè)置行間距的效果瘾英；
它們的定義如下：

字符間距：letter-spacing

語法：

letter-spacing：normal | <length> | <percentage>
默認(rèn)值：normal
適用于：所有元素
繼承性：有
動畫性：非normal值時

取值：

normal：默認(rèn)間隔
<length>：用長度值指定間隔枣接。可以為負(fù)值缺谴。
<percentage>：用百分比指定間隔但惶。可以為負(fù)值湿蛔。（CSS3）

說明：
檢索或設(shè)置對象中的字符之間的最小膀曾，最大和最佳間隙。
該屬性將指定的間隔添加到每個文字(包括單詞內(nèi)的每個字母)之后阳啥；
<' letter-spacing '> 不能被應(yīng)用于一行的開始和結(jié)束添谊；
對應(yīng)的腳本特性為letterSpacing。

單詞間距：word-spacing

語法：

word-spacing：normal | <length> | <percentage>
默認(rèn)值：normal
適用于：所有元素
繼承性：有
動畫性：非normal值時

取值：

normal：默認(rèn)間隔
<length>：用長度值指定間隔察迟≌队可以為負(fù)值。
<percentage>：用百分比指定間隔扎瓶∷唬可以為負(fù)值。（CSS3）

說明：
檢索或設(shè)置對象中的單詞之間的最小概荷，最大和最佳間隙污筷。
該屬性將指定的間隔添加到每個單詞(詞內(nèi)不發(fā)生)之后，但最后一個字將被排除在外乍赫。
判斷是否為單詞的依據(jù)是單詞間是否有空格瓣蛀。
對應(yīng)的腳本特性為wordSpacing。

行高：line-height

可以通過line-height設(shè)置行的高度雷厂，從而達到調(diào)節(jié)行間距的效果惋增；

語法：

line-height：normal | <length> | <percentage> | <number>
默認(rèn)值：normal
適用于：所有元素
繼承性：有
動畫性：當(dāng)值為 <length> | <number> 時

取值：

normal：允許內(nèi)容頂開或溢出指定的容器邊界。
<length>：用長度值指定行高改鲫。不允許負(fù)值诈皿。
<percentage>：用百分比指定行高林束，其百分比取值是基于字體的高度尺寸。不允許負(fù)值稽亏。
<number>：用乘積因子指定行高壶冒。不允許負(fù)值。

說明：
檢索或設(shè)置對象的行高截歉。即字體最底端與字體內(nèi)部頂端之間的距離胖腾。
對應(yīng)的腳本特性為lineHeight。

11. a標(biāo)簽的跳轉(zhuǎn)特性

當(dāng)把a標(biāo)簽作為按鈕來用時瘪松，會有一個問題：a標(biāo)簽被點擊時咸作，會發(fā)生跳轉(zhuǎn)；為解決此問題宵睦，我特意研究的a標(biāo)簽的跳轉(zhuǎn)行為记罚，總結(jié)如下：

1. 在以下情況，點擊 a 標(biāo)簽不會發(fā)生跳轉(zhuǎn)：即不會觸發(fā)加載資源壳嚎，也不返回到頁面頂部：
   • a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以 # 開頭 且 # 后有它非空格字符 的 字符串桐智，如: <a href="##"></a> 、 <a href="#任何字符串"></a>烟馅；
   • a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以 javascript: 開頭 且 javascript: 后面的代碼沒有返回任何東西 或者 返回為 undefined 酵使、 null 、 void 或者 void表達式焙糟，如: <a href="javascript:"></a> 口渔、 <a href="javascript:undefined"></a>、 <a href="javascript:null"></a>穿撮、<a href="javascript:void"></a>缺脉、<a href="javascript:undefined"></a>、<a href="javascript:void()"></a>`悦穿；備注：關(guān)于void攻礼，請參考《JavaScript的發(fā)現(xiàn)與理解》；
   • 在a 標(biāo)簽的 與點擊相關(guān)的事件的處理器中調(diào)用是事件對象 event 的 preventDefault() 方法來阻止 a 標(biāo)簽的默認(rèn)操作----跳轉(zhuǎn)栗柒；

2. 在以下情況礁扮，點擊 a 標(biāo)簽會觸發(fā)加載 a 的標(biāo)簽屬性 href 所指定的資源：
   • a 標(biāo)簽的標(biāo)簽屬性href的值是相對地址或者絕對地址；

3. 在以下情況瞬沦，點擊 a 標(biāo)簽會觸發(fā)重新加載當(dāng)前的頁面：
   • a 標(biāo)簽沒有 href 標(biāo)簽屬性太伊，如: <a></a>；
   • a標(biāo)簽有 href 標(biāo)簽屬性逛钻，但 href 標(biāo)簽屬性沒有值僚焦，如: <a href></a>；
   • a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為空字符 "" 或 只有空格的字符串 " "曙痘，如: <a href=""></a> 芳悲、 <a href=" "></a>立肘；
   • a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以 ? 開頭的字符串，如: <a href="?"></a> 名扛、 <a href="?任意字符串"></a>谅年；

4. 在以下情況，點擊 a 標(biāo)簽不會觸發(fā)加載資源肮韧，但回返回到頁面頂部：
   • a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以 # 開頭 且 # 后沒有其它非空格字符 的 字符串融蹂，如: <a href="#"></a> 、 <a href="# "></a>惹苗；

12.文本文件顯示亂碼

因為：

• 文本文件在保存時會以某種字符編碼方案進行編碼殿较；
• 文本文件在顯示時也會以村種字符編碼方案進行解碼耸峭；
  所以：
  如果文本文件以不同于編碼時的字符編碼方案進行解碼桩蓉，則就會出現(xiàn)亂碼的現(xiàn)象；

解決方案：
在打開文本文件的軟件中更改 解碼該文本文件的 字符編碼方案 為 該文本文件在編碼（保存）時選擇的字符編碼方案劳闹；

13.HTML在瀏覽器中顯示亂碼

由于：

• 文本文件會以某種字符編碼方式存儲院究；
• 瀏覽器需要根據(jù) HTML 文檔的 meta 標(biāo)簽指定的字符編碼方式來顯示 HTML 文檔；
  所以：
  當(dāng) HTML 文件存儲的字符編碼 與 meta 標(biāo)簽指定的字符編碼 不一樣時本涕，就會出現(xiàn)瀏覽器顯示亂碼的現(xiàn)象业汰；

解決方案：
在 HTML 文檔中通過 meta 標(biāo)簽告訴瀏覽器 HTML 文件的正確的字符編碼方式，如下：

• 在 HTML 4.01 中用以下方式：

  <meta http-equiv="content-type" content="text/html; charset=文件的字符編碼">
  

• 在 HTML5 中 為 meta 標(biāo)簽 新增了 charset 屬性菩颖，用來指定字符編碼样漆，所以在 HTML5 中有2種方式指定字符編碼：

  <meta charset="文件的字符編碼">
  

  或者

  <meta http-equiv="content-type" content="text/html; charset=文件的字符編碼">
  

注意：

• HTML 文檔中 meta 標(biāo)簽中定義的編碼方式是用來告訴瀏覽器的，而 HTML 文件本身是以何種編碼方式存儲的 取決于 保存該文檔的編輯器的設(shè)定晦闰；

14.before和after選擇器選擇的元素

• E::before 選擇器選中的是 E 元素的所有直接子元素的前面放祟；
• E::after 選擇器選中的是 E 元素的所有直接子元素的后面；

15.解決浮動元素的父元素的高度塌陷的方法

• 方案1:在浮動元素后面增加一個兄弟塊元素呻右，并給該元素設(shè)置清除浮動 clear 跪妥；
• 方案2:通過在浮動元素的父元素使用 ::after 選擇器在該父元素的內(nèi)容中的最后面插入一個塊元素，并給這個新插入的元素設(shè)置清除浮動 clear 声滥；
• 方案3:給浮動元素的父元素的 overflow 屬性設(shè)置為 hidden 或者 auto 眉撵；