在CSS學(xué)習(xí)過(guò)程中，常常會(huì)遇到一些易錯(cuò)點(diǎn)，尤其是在制作網(wǎng)頁(yè)時(shí)。本文將會(huì)針對(duì)CSS易錯(cuò)點(diǎn)進(jìn)行梳理，幫助讀者快速理解和掌握CSS。

一、選擇器的優(yōu)先級(jí)

#demo{}                      /* “#”號(hào)更具體，優(yōu)先級(jí)更高 */
div#demo{}                   /* “#”號(hào)+元素名更具體 */
body div#demo{}              /* “#”號(hào)+元素名+父元素更具體 */

以上三行代碼選擇器優(yōu)先級(jí)依次遞增。需要注意的是，屬性中的!important優(yōu)先級(jí)最高，實(shí)在不行也可以用它解決問(wèn)題，但優(yōu)先級(jí)十分強(qiáng)大，可能會(huì)對(duì)后續(xù)操作造成影響。

二、CSS盒模型

box-sizing: content-box;     /* 默認(rèn)值，寬度=內(nèi)容區(qū)域+padding+border */
box-sizing: border-box;      /* 寬度=內(nèi)容區(qū)域，包括padding和border */

常見(jiàn)易錯(cuò)點(diǎn)是：當(dāng)width和padding的大小相加超過(guò)了容器的限制時(shí)，設(shè)置成default，該盒子將會(huì)自動(dòng)增加寬度。但如果設(shè)置成border-box模式，該盒子的大小將被固定，不會(huì)因?yàn)閜adding的增加而影響寬度。

三、浮動(dòng)和清除浮動(dòng)

float: left/right;           /* 設(shè)置元素左浮動(dòng)或右浮動(dòng) */
clear: both/left/right;      /* 清除元素左/右浮動(dòng)的影響 */

CSS浮動(dòng)不會(huì)像定位一樣脫離文本流，而是浮在文本流之上，會(huì)對(duì)其他元素產(chǎn)生影響。所以需要清除浮動(dòng)。常用方法是給父元素增加一個(gè)clearfix樣式。

以上就是CSS易錯(cuò)點(diǎn)的梳理，對(duì)于新手來(lái)說(shuō)還是十分有用的。最后一個(gè)建議就是在日常編寫代碼中，一定要多注重細(xì)節(jié)，不要急功近利。