CSS相關(guān)知識(shí)點(diǎn)有哪些

本篇內(nèi)容介紹了“CSS相關(guān)知識(shí)點(diǎn)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　1、CSS選擇器

　　CSS選擇器即通過某種規(guī)則來匹配相應(yīng)的標(biāo)簽，并為其設(shè)置CSS樣式，常用的有類選擇器、標(biāo)簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

　　2、CSSReset

　　HTML

　　標(biāo)簽在不設(shè)置任何樣式的情況下，也會(huì)有一個(gè)默認(rèn)的CSS樣式，而不同內(nèi)核瀏覽器對(duì)于這個(gè)默認(rèn)值的設(shè)置則不盡相同，這樣可能會(huì)導(dǎo)致同一套代碼在不同瀏覽器上的顯示效果不一致，而出現(xiàn)兼容性問題。因此，在初始化時(shí)，需要對(duì)常用標(biāo)簽的樣式進(jìn)行初始化，使其默認(rèn)樣式統(tǒng)一，這就是CSS

　　Reset，即CSS樣式重置，比如：*{margin:0,padding:0}就是最簡(jiǎn)單CSSReset，關(guān)于CSS重置請(qǐng)參考：

　　Neat.css

　　3、盒子布局

　　盒子模型是CSS比較重要的一個(gè)概念，也是CSS布局的基石。

　　常見的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，與盒子相關(guān)的幾個(gè)屬性有：margin、border、padding和content

　　等，這些屬性的作用是設(shè)置盒子與盒子之間的關(guān)系以及盒子與內(nèi)容之間的關(guān)系。其中，只有普通文檔流中塊級(jí)盒子的垂直外邊距才會(huì)發(fā)生合并，而行內(nèi)盒子、浮動(dòng)盒子或絕對(duì)定位之間的外邊距不會(huì)合并。另外，box-sizing

　　屬性的設(shè)置會(huì)影響盒子width和height的計(jì)算。

　　4、浮動(dòng)布局

　　設(shè)置元素的float屬性值為left或

　　right，就能使該元素脫離普通文檔流，向左或向右浮動(dòng)。一般在做宮格布局時(shí)會(huì)用到，如果子元素全部設(shè)置為浮動(dòng)，則父元素是塌陷的，這時(shí)就需要清除浮動(dòng)，清除浮動(dòng)的方法也很多，常用的方法是在元素末尾加空元素設(shè)置clear:both，

　　更高級(jí)一點(diǎn)的就給父容器設(shè)置before/after來模擬一個(gè)空元素，還可以直接設(shè)置overflow屬性為auto/hidden來清除浮動(dòng)。除浮動(dòng)可以實(shí)現(xiàn)宮格布局，行內(nèi)盒子(inline-block)和table也可以實(shí)現(xiàn)同樣的效果。

　　5、定位布局

　　設(shè)置元素的position屬性值為relative/absolute/fixed，就可以使該元素脫離文檔流，并以某種參照坐標(biāo)進(jìn)行偏移。其中，releave

　　是相對(duì)定位，它以自己原來的位置進(jìn)行偏移，偏移后，原來的空間不會(huì)被其他元素占用;absolute

　　是絕對(duì)定位，它以離自己最近的定位父容器作為參照進(jìn)行偏移;為了對(duì)某個(gè)元素進(jìn)行定位，常用的方式就是設(shè)置父容器的poistion:relative，因?yàn)橄鄬?duì)定位元素在不設(shè)置

　　top和left值時(shí)，不會(huì)對(duì)元素位置產(chǎn)生影響;fixed

　　即固定定位，它則以瀏覽器窗口為參照物，PC網(wǎng)頁(yè)底部懸停的banner一般都可以通過fixed定位來實(shí)現(xiàn)，但fixed屬性在移動(dòng)端有兼容性問題，因此不推薦使用，可替代的方案是：絕對(duì)定位+內(nèi)部滾動(dòng)。

　　6、彈性布局

　　彈性布局即Flex布局，定義了flex的容器一個(gè)可伸縮容器，首先容器本身會(huì)根據(jù)容器中的元素動(dòng)態(tài)設(shè)置自身大小;然后當(dāng)Flex容器被應(yīng)用一個(gè)大小時(shí)(width和height)，將會(huì)自動(dòng)調(diào)整容器中的元素適應(yīng)新大小。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向(橫向和縱向)和是否支持元素的自動(dòng)換行。有了這個(gè)神器，做頁(yè)面布局的可以方便很多了。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align

　　屬性將失效。

　　7、CSS3動(dòng)畫

　　CSS3中規(guī)范引入了兩種動(dòng)畫，分別是transition和animation，transition

　　可以讓元素的CSS屬性值的變化在一段時(shí)間內(nèi)平滑的過渡，形成動(dòng)畫效果，為了使元素的變換更加豐富多彩，CSS3還引入了transfrom

　　屬性，它可以通過對(duì)元素進(jìn)行平移(translate)、旋轉(zhuǎn)(rotate)、放大縮小(scale)、傾斜(skew)

　　等操作，來實(shí)現(xiàn)2D和3D變換效果。transiton還有一個(gè)結(jié)束事件

　　transitionEnd，該事件是在CSS完成過渡后觸發(fā)，如果過渡在完成之前被移除，則不會(huì)觸發(fā)transitionEnd。

　　animation需要設(shè)置一個(gè)@keyframes，來定義元素以哪種形式進(jìn)行變換，

　　然后再通過動(dòng)畫函數(shù)讓這種變換平滑的進(jìn)行，從而達(dá)到動(dòng)畫效果，動(dòng)畫可以被設(shè)置為永久循環(huán)演示。設(shè)置animation-play-state:paused

　　可以暫停動(dòng)畫，設(shè)置animation-fill-mode:forwards

　　可以讓動(dòng)畫完成后定格在最后一幀。另外，還可以通過JS監(jiān)聽animation的開始、結(jié)束和重復(fù)播放時(shí)的狀態(tài)，分別對(duì)應(yīng)三個(gè)事件，即

　　animationStart、animationEnd、animationIteration。注意，當(dāng)播放次數(shù)設(shè)置為1時(shí)，不會(huì)觸發(fā)animationIteration。

　　和transition相比，animation設(shè)置動(dòng)畫效果更靈活更豐富，還有一個(gè)區(qū)別是：transition

　　只能通過主動(dòng)改變?cè)氐腸ss值才能觸發(fā)動(dòng)畫效果，而animation一旦被應(yīng)用，就開始執(zhí)行動(dòng)畫。另外，HTML5還新增了一個(gè)動(dòng)畫API，即

　　requestAnimationFrame，它通過JS來調(diào)用，并按照屏幕的繪制頻率來改變?cè)氐腃SS屬性，從而達(dá)到動(dòng)畫效果。

　　8、BFC

　　BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素。比如：內(nèi)部滾動(dòng)就是一個(gè)BFC，當(dāng)一個(gè)父容器的overflow-y設(shè)置為auto時(shí)，并且子容器的長(zhǎng)度大于父容器時(shí)，就會(huì)出現(xiàn)內(nèi)部滾動(dòng)，無論內(nèi)部的元素怎么滾動(dòng)，都不會(huì)影響父容器以外的布局，這個(gè)父容器的渲染區(qū)域就叫BFC。滿足下列條件之一就可觸發(fā)BFC：

　　根元素，即HTML元素

　　float的值不為none

　　overflow的值不為visible

　　display的值為inline-block、table-cell、table-caption

　　position的值為absolute或fixed

　　9、Sprite，Iconfont，@font-face

　　對(duì)于大型站點(diǎn)，為了減少http請(qǐng)求的次數(shù)，一般會(huì)將常用的小圖標(biāo)排到一個(gè)大圖中，頁(yè)面加載時(shí)只需請(qǐng)求一次網(wǎng)絡(luò)，

　　然后在css中通過設(shè)置background-position來控制顯示所需要的小圖標(biāo)，這就是Sprite圖。

　　Iconfont，即字體圖標(biāo)，就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中，通過在CSS中引用該字體文件，然后可以直接用控制字體的css屬性來設(shè)置圖標(biāo)的樣式，字體圖標(biāo)的好處是節(jié)省網(wǎng)絡(luò)請(qǐng)求、其大小不受屏幕分辨率的影響，并且可以任意修改圖標(biāo)的顏色。

　　@font-face是CSS3中的一個(gè)模塊，通過@font-face可以定義一種全新的字體，然后就可以通過css屬性font-family來使用這個(gè)字體了，即使操作系統(tǒng)沒有安裝這種字體，網(wǎng)頁(yè)上也會(huì)正常顯示出來。

　　10、CSSHack

　　早期，不同內(nèi)核瀏覽器對(duì)CSS屬性的解析存在著差異，導(dǎo)致顯示效果不一致，比如margin

　　屬性在ie6中顯示的距離會(huì)比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側(cè)元素的實(shí)際顯示距離是40px，而在非ie6的瀏覽器上顯示正常。因此，如果要想讓所有瀏覽器中都顯示是20px的寬度，就需要在CSS樣式中加入一些特殊的符號(hào)，讓不同的瀏覽器識(shí)別不同的符號(hào)，以達(dá)到應(yīng)用不同的CSS樣式的目的，這種方式就是css

　　hack，對(duì)于ie6中的margin應(yīng)用hack就會(huì)變成這樣：.el{margin-left:20px;_margin-left:10px}

“CSS相關(guān)知識(shí)點(diǎn)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！