CSS的一些基礎知識

2021-06-28 05:34:54 字數 3200 閱讀 5465

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。

作為style屬性寫在元素內的樣式

id選擇器

類選擇器

標籤選擇器

萬用字元選擇器

瀏覽器自定義或繼承

同一級別

同一級別中後寫的會覆蓋先寫的樣式

規則是多個級別的組合,把選擇器中規則對應做加法,比較權值,如果權值相同那就後面的覆蓋前面的了,各個選擇器的權值為:

並不是所有的屬性對行內元素都能夠生效

行內元素不會應用width屬性,其長度是由內容撐開的

行內元素不會應用height屬性,其高度也是由內容撐開的,但是高度可以通過line-height調節

行內元素的padding屬性只用padding-left和padding-right生效,padding-top和padding-bottom會改變元素範圍,但不會對其它元素造成影響

行內元素的margin屬性只有margin-left和margin-right有效,margin-top和margin-bottom無效

行內元素的overflow屬性無效,這個不用多說了

行內元素的vertical-align屬性無效(height屬性無效)

對於absolute和fixed定位的(固定大小,設定了width和height屬性)元素,如果設定了top和left屬性,那麼設定bottom和right值就沒有作用了,應該是top和left優先順序高,否則同時寫了瀏覽器怎麼知道按照誰定位

對於absolute和fixed定位的元素,如果設定了top、left、bottom、right的值後margin屬性也就不起作用了

對於absolute和fixed定位的元素,如果設定了top、left、bottom、right的值後float屬性同樣會失效

塊元素如果設定了float屬性或者是absolute、fixed定位,那麼vertical-align屬性不再起作用 

我們在寫字型的尺寸的時候常用的單位有

這些字型分別有什麼含義?

px是pixel縮寫,是基於畫素的單位.在瀏覽網頁過程中,螢幕上的文字、等會隨螢幕的解析度變化而變化,乙個100px寬度大小的,在800×600解析度下,要佔螢幕寬度的1/8,但在1024×768下,則只佔約1/10。所以如果在定義字型大小時,使用px作為單位,那一旦使用者改變顯示器解析度從800到1024,使用者實際看到的文字就要變「小」(自然長度單位),甚至會看不清,影響瀏覽。 

pt是point(磅)縮寫,是一種固定長度的度量單位,大小為1/72英吋。如果在web上使用pt做單位的文字,字型的大小在不同螢幕(同樣解析度)下一樣,這樣可能會對排版有影響,但在word中使用pt相當方便。因為使用word主要目的都不是為了螢幕瀏覽,而是輸出列印。當列印到實體時,pt作為乙個自然長度單位就方便實用了:比如word中普通的文件都用「宋體 9pt」,標題用「黑體 16pt」等等,無論電腦怎麼設定,列印出來永遠就是這麼大。

em:是相對單位,是乙個相對長度單位,最初是指字母m的寬度,所以叫em,現指的是字元寬度的倍數,用法類似百分比,如:0.8em, 1.2em,2em等。通常1em=16px(瀏覽器預設字型大小16px),em是指父元素的字型大小。在乙個頁面上給定了乙個父元素的字型大小,這樣就可以通過調整乙個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來製作可伸縮的樣式表。類似還有ex的概念,ex 相對於字元「x」的高度,此高度通常為字型尺寸的一半。

rem:rem是css新增的,em是相對於其父元素來設定字型大小的,這樣就會存在乙個問題,進行任何元素設定,都有可能需要知道他父元素的大小,在多次使用時,就會帶來無法預知的錯誤風險。而rem是相對於根元素(r:root),使用rem我們只需要在根元素確定乙個參考值,然後就可以控制整個html頁面所有字型了。

img標籤,無論顯示與否,都會被載入(所以試圖通過對display:none來達到節省網路流量的做法就省省吧。。。)經常使用backgroung-image等css屬性為頁面新增,這些是不是一定會被載入呢,看個例子

看一下網路監視情況

另外就是css當中設定了background-image但是html當中引用此樣式的父容器的display:none,這樣情況下也不會被載入!

CSS一些基礎知識整理

一 關於權值 標籤選擇器 1 類選擇器 10 id選擇器 100 繼承的權值 0.1 文字樣式若被多次設定,則顯示權值最高的設定樣式 例子 p 權值為1 p span 權值為1 1 2 warning 權值為10 p span.warning 權值為1 1 10 12 footer note p 權...

一些基礎知識

關於cd cd 返回剛才的位置 關於ls ls l,簡寫ll ls a顯示的檔案以.開頭,隱藏檔案 la al 關於cp cp r tmp dir 拷目錄 tmp拷到dir 需要加 r的 cp rm 10 13 1.grep 在乙個字元集合中找到符合條件的行輸出 如 grep hello file ...

一些基礎知識

linux基礎知識考查 1 在linux 系統中,以 檔案 方式訪問裝置 2 前台起動的程序使用 ctrl c 終止。3 在使用ls 命令時,用八進位制形式顯示非列印字元應使用引數 b 4 在linux 系統中,用來存放系統所需要的配置檔案和子目錄的目錄是 etc 5 在linux 系統中,壓縮檔案...