CSS相關知識點有哪些

本篇內容介紹了“CSS相關知識點有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　1、CSS選擇器

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

　　2、CSSReset

　　HTML

　　標簽在不設置任何樣式的情況下，也會有一個默認的CSS樣式，而不同內核瀏覽器對于這個默認值的設置則不盡相同，這樣可能會導致同一套代碼在不同瀏覽器上的顯示效果不一致，而出現兼容性問題。因此，在初始化時，需要對常用標簽的樣式進行初始化，使其默認樣式統一，這就是CSS

　　Reset，即CSS樣式重置，比如：*{margin:0,padding:0}就是最簡單CSSReset，關于CSS重置請參考：

　　Neat.css

　　3、盒子布局

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

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

　　等，這些屬性的作用是設置盒子與盒子之間的關系以及盒子與內容之間的關系。其中，只有普通文檔流中塊級盒子的垂直外邊距才會發生合并，而行內盒子、浮動盒子或絕對定位之間的外邊距不會合并。另外，box-sizing

　　屬性的設置會影響盒子width和height的計算。

　　4、浮動布局

　　設置元素的float屬性值為left或

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

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

　　5、定位布局

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

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

　　是絕對定位，它以離自己最近的定位父容器作為參照進行偏移;為了對某個元素進行定位，常用的方式就是設置父容器的poistion:relative，因為相對定位元素在不設置

　　top和left值時，不會對元素位置產生影響;fixed

　　即固定定位，它則以瀏覽器窗口為參照物，PC網頁底部懸停的banner一般都可以通過fixed定位來實現，但fixed屬性在移動端有兼容性問題，因此不推薦使用，可替代的方案是：絕對定位+內部滾動。

　　6、彈性布局

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

　　屬性將失效。

　　7、CSS3動畫

　　CSS3中規范引入了兩種動畫，分別是transition和animation，transition

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

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

　　等操作，來實現2D和3D變換效果。transiton還有一個結束事件

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

　　animation需要設置一個@keyframes，來定義元素以哪種形式進行變換，

　　然后再通過動畫函數讓這種變換平滑的進行，從而達到動畫效果，動畫可以被設置為永久循環演示。設置animation-play-state:paused

　　可以暫停動畫，設置animation-fill-mode:forwards

　　可以讓動畫完成后定格在最后一幀。另外，還可以通過JS監聽animation的開始、結束和重復播放時的狀態，分別對應三個事件，即

　　animationStart、animationEnd、animationIteration。注意，當播放次數設置為1時，不會觸發animationIteration。

　　和transition相比，animation設置動畫效果更靈活更豐富，還有一個區別是：transition

　　只能通過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。另外，HTML5還新增了一個動畫API，即

　　requestAnimationFrame，它通過JS來調用，并按照屏幕的繪制頻率來改變元素的CSS屬性，從而達到動畫效果。

　　8、BFC

　　BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素。比如：內部滾動就是一個BFC，當一個父容器的overflow-y設置為auto時，并且子容器的長度大于父容器時，就會出現內部滾動，無論內部的元素怎么滾動，都不會影響父容器以外的布局，這個父容器的渲染區域就叫BFC。滿足下列條件之一就可觸發BFC：

　　根元素，即HTML元素

　　float的值不為none

　　overflow的值不為visible

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

　　position的值為absolute或fixed

　　9、Sprite，Iconfont，@font-face

　　對于大型站點，為了減少http請求的次數，一般會將常用的小圖標排到一個大圖中，頁面加載時只需請求一次網絡，

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

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

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

　　10、CSSHack

　　早期，不同內核瀏覽器對CSS屬性的解析存在著差異，導致顯示效果不一致，比如margin

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

　　hack，對于ie6中的margin應用hack就會變成這樣：.el{margin-left:20px;_margin-left:10px}

“CSS相關知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！