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)容的元素;這種元素只有兩種表示形式:
- 僅有開始標(biāo)簽券时,沒有結(jié)束標(biāo)簽:< 虛元素>
- 自閉合標(biāo)簽:< 虛元素 />
空元素: 沒有任何內(nèi)容的元素:< 元素名字>< /元素名字>孤里,可以簡寫成自閉合標(biāo)簽:< 元素名字 />;
注意:
空元素和虛元素的區(qū)別:空元素描述的是元素內(nèi)容為空時的狀態(tài)橘洞;虛元素描述的是元素不允許有內(nèi)容捌袜;
元數(shù)據(jù)還好理解,就是流元素和短語元素好奇怪炸枣,舉個例子虏等,div既可以是流元素也可以是短語元素,因為它能包含其他的元素也能被其他的元素包含适肠。但是像< b>這樣的就僅僅是短語元素了霍衫。
4. 屬性影響
- 當(dāng)html元素的hidden屬性值設(shè)置為true時,會自動更改其css的屬性display為none侯养;
- 當(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è)置圖片位置)
- background-position:表示背景圖像的顯示區(qū)域的左上角相對于圖像左上角的坐標(biāo)位置;
- 設(shè)置圖片作為背景如果圖片設(shè)置圖片在X坐標(biāo)方向重復(fù)息尺,如果再設(shè)置圖片在對象位置的左或右位置時將無效携兵,可設(shè)置在對象上或下位置開始顯示疾掰。
- 設(shè)置圖片作為背景如果圖片設(shè)置圖片在Y坐標(biāo)方向重復(fù)搂誉,如果再設(shè)置圖片在對象位置的上或下位置時將無效,可設(shè)置圖片在對象左或右位置開始顯示静檬。
- 如果設(shè)置背景完全重復(fù)顯示炭懊,那設(shè)置圖片在對象上下左右位置開始顯示將無線并级。
6. CSS中漸變函數(shù)的特性
詳細(xì)內(nèi)容請參考《CSS中漸變特性的研究》
- 每個漸變至少需要指定2個色標(biāo)color-stop;
- 對于任意2個相鄰色標(biāo)之間的顏色變化是:在前一個色標(biāo)與后一個色標(biāo)的位置之間侮腹,線性地把前一個色標(biāo)的顏色過渡到后一個色標(biāo)的顏色嘲碧;
- 對于多個沒指定位置的色標(biāo),它們的位置分別是:前面最近的有位置的色標(biāo)的位置 與 后面最近有位置的色標(biāo)的位置 之間的平分點父阻;
- 如果第1個色標(biāo)沒有指定位置愈涩,則第1個色標(biāo)的位置是漸變區(qū)域的起始位置;
- 如果最后1個色標(biāo)沒有指定位置加矛,則最后1個色標(biāo)的位置是漸變區(qū)域的結(jié)束位置履婉;
- 對于非重復(fù)漸變,第1個色標(biāo)位置之前的顏色是第1個色標(biāo)的顏色斟览;最后一個色標(biāo)位置之后的顏色是最后一個色標(biāo)的顏色毁腿;
- 對于重復(fù)漸變,會用漸變區(qū)域分別平鋪第1個色標(biāo)之前的區(qū)域 和 最后1個色標(biāo)之后的區(qū)域 苛茂,直到填滿為止已烤;
- 對于重復(fù)漸變,如果漸變漸變區(qū)域的長寬為零妓羊,則會用最后1個色標(biāo)的顏色填充整個區(qū)域胯究;
- 如果前面色標(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)包含了一個或多個彈性子元素缠诅。
注意:
- 彈性容器外及彈性子元素內(nèi)是正常渲染的溶浴。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
- 容器先根據(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)元素溢出某行時邦泄,這一屬性同樣會在對齊上進行控制。
取值效果如下:
align-content: 設(shè)置或檢索 在 彈性容器的范圍內(nèi) 行在側(cè)軸方向上的對齊方式裂垦。
操作范圍:彈性容器顺囊;
操作對象:行;
適用于:多行的flex容器蕉拢;
備注:請注意本屬性在只有一行的伸縮容器上沒有效果特碳。
取值效果如下:
align-items: 定義彈性盒子元素自己 在 彈性容器的行的范圍內(nèi) 在側(cè)軸方向上的對齊方式诚亚。
操作范圍:行;
操作對象:行內(nèi)的彈性子元素测萎;
適用于:flex容器;
取值效果如下:
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é)如下:
- 在以下情況,點擊 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)栗柒;
- a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以
- 在以下情況礁扮,點擊 a 標(biāo)簽會觸發(fā)加載 a 的標(biāo)簽屬性 href 所指定的資源:
- a 標(biāo)簽的標(biāo)簽屬性href的值是相對地址或者絕對地址;
- 在以下情況瞬沦,點擊 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>
谅年;
- a 標(biāo)簽沒有 href 標(biāo)簽屬性太伊,如:
- 在以下情況,點擊 a 標(biāo)簽不會觸發(fā)加載資源肮韧,但回返回到頁面頂部:
- a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以
#
開頭 且#
后沒有其它非空格字符 的 字符串融蹂,如:<a href="#"></a>
、<a href="# "></a>
惹苗;
- a 標(biāo)簽的 href 標(biāo)簽屬性的屬性值為以
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 眉撵;