CSS一些基礎知識整理

2021-07-03 23:13:36 字數 4285 閱讀 5494

一、關於權值

標籤選擇器: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/*權值為100+10+1=111*/
若權值相同,按照css樣式書寫的前後順序決定選擇的樣式,後寫的樣式會覆蓋前面的(選擇後面的)--即:層疊

二、css樣式優先順序

內聯樣式表(標籤內部)> 嵌入樣式表(當前檔案中)> 外部樣式表(外部檔案中)

三、關於!important

作用:用以強制設定最高權值。例如:

p

p三年級時,我還是乙個膽小如鼠的小女孩。

根據層疊規則,整個內的文字都應該顯示為綠色,但,由於手動設定了!important,第一行的權值變大,中的文字會顯示紅色。

注意:

1.!important要寫在分號的前面

2.樣式優先順序(瀏覽器預設、網頁製作者設定、使用者設定之間):

瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式

但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。

四、一些不熟悉的屬性

text-indent:2em;--設定文字段2個字元縮排,2em表示字元大小的兩倍

text-decoration:line-through;--電商打折,原價劃線效果

line-height:2em;--行高,設定為字元大小的兩倍(不是兩行之間的間距,是行的高度,即:行中文字+行間空格的高度,設定為2em,也就是兩行之間的間距為1em,即一倍字元的大小)

letter-spacing:20px;--文字字母間隔(文字間隔)設定為20px

word-spacing:20px;--英文單詞之間間隔設定為20px

display:block;--內聯元素轉化為塊級元素表示

display:inline;--塊級元素轉化為內聯元素表示

display:inline-block;--將元素設定為內聯塊級元素(

塊級元素特點:

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

內聯元素特點:

1、和其他元素都在一行上;

2、元素的高度、寬度及頂部和底部邊距不可設定;

3、元素的寬度就是它包含的文字或的寬度,不可改變。

inline-block 元素特點:

1、和其他元素都在一行上;

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

五、關於盒模型

概念:外邊距、內邊距、邊框、內容

注意:css內定義的width、height,指的是內容的寬度和高度

因此,乙個元素實際的寬度(盒子寬度)=左邊界+左邊框+左填充+內容寬度(width)+右填充+右邊框+右邊界

高度同理。

六、css布局模型

在網頁中,元素有三種布局模型:

1、流動模型(flow)--

流動(flow)是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。

2、浮動模型 (float)--即元素的浮動效果設定。多用於使塊級元素同行並列顯示。

3、層模型(layer)

關於層模型:

有三種形式: 1、

絕對定位

(position: absolute):position:absolute

(表示絕對定位),這條語句的作用將元素從文件流中拖出來,然後使用left、right、top、bottom屬性相對於其

最接近的乙個具有定位屬性的父包含塊

進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於

瀏覽器視窗

2、相對定位(position: relative):position:relative

(表示相對定位),它通過left、right、top、bottom屬性確定元素在

正常文件流中

的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於

以前的位置移動,移動的方向和幅度由

left、right、top、bottom

屬性確定,

偏移前的位置保留不動

。3、固定定位(position: fixed):被設定的元素永遠處於固定位置,無論怎樣滑動進度條,元素都一直固定,不會跟隨進度條滾動

relative和absolute組合使用:

(1)自行選擇乙個參照定位元素p,注:這個元素p必須是要定位元素的前輩元素。要定位的元素,根據相對於定位元素p的位置,確定自己的位置

(2)參照定位元素p,設定position:relative;

(3)定位元素設定position:absolute;然後,使用left,right,top,bottom進行偏移定位。

注:這裡的偏移,指的是,left:定位元素的左邊界與p左邊界的距離,right:定位元素右邊界與p右邊界的距離,上下同理。

七、水平居中問題(不定寬塊狀元素)

三種方法:

1.加入 table 標籤

第一步:為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、)。

eg:

第二步:為這個 table 設定「左右 margin 居中」(這個和定寬塊狀元素的方法一樣)。

也可以在style中設定,display:table;這時,html中不需要再加入table標籤。

2.設定 display:inline 方法

改變塊級元素的 dispaly 為 inline 型別,然後使用 text-align:center 來實現居中效果。

3.設定 position:relative 和 left:50%;

(1)給父元素設定 float(left、right皆可)

(2)給父元素設定 position:relative; 

left:50%;(或right:50%;這裡的left或right與父元素設定的float相對應)

(3)子元素設定 position:relative; left:-50%;(這裡是left還是right,同上,取決於父元素的float)

設定後,即可實現水平居中

八、垂直居中

父元素高度確定的多行文字、、塊狀元素的豎直居中的方法有兩種:

1.插入 table (包括tbody、tr、td)標籤。這裡預設 vertical-align:middle;因此,我們無需再手動設定。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

table td
注:父元素的height要給乙個固定值

2.在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell,啟用 vertical-align 屬性,但注意 ie6、7 並不支援這個樣式。

eg:
看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

九、隱性改變display型別

當為元素(不論之前是什麼型別元素,display:none 除外)設定以下 2 個句之一: 1.

position : absolute

2.float : left 或 float:right

元素會自動變為以

display:inline-block 

的方式顯示,當然就可以設定元素的 width 和 height 了,且預設寬度不佔滿父元素。

eg:
進入課程請單擊這裡

CSS的一些基礎知識

在屬性後面使用 important 會覆蓋頁面內任何位置定義的元素樣式。作為style屬性寫在元素內的樣式 id選擇器 類選擇器 標籤選擇器 萬用字元選擇器 瀏覽器自定義或繼承 同一級別 同一級別中後寫的會覆蓋先寫的樣式 規則是多個級別的組合,把選擇器中規則對應做加法,比較權值,如果權值相同那就後面...

一些基礎知識

關於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 系統中,壓縮檔案...