CSS樣式常用屬性整理

2022-09-08 21:48:33 字數 4096 閱讀 9614

web工程師是最近5年剛剛興起的一門高薪職業,人們的專注度越來越高。

那麼前端除了學習html標籤之外還需要掌握什麼知識點呢?

為大家整理了乙個和html標籤密不可分的知識要點--《css樣式常用屬性》

******* css 常用屬性 *********

z-index:

auto (預設值)

檢索或設定物件的層疊順序。

並級的物件,此屬性引數值越大,則被層疊在最上面。

如兩個物件的此屬性具有同樣的值,那麼將依據它們在html文件中流的順序層疊,寫在後面的將會覆蓋前面的。

必須定義position屬性值為 relative | absolute | fixed | center | page,此取值方可生效。

對應的指令碼特性為zindex。

clip:檢索或設定物件的可視區域。區域外的部分是透明的。

必須將position的值設為absolute,此屬性方可使用。

auto: 物件無剪下

rect(|auto |auto |auto |auto): 依據上-右-下-左的順序提供自物件左上角為(0,0)座標計算的四個偏移數值,其中任一數值都可用auto替換,即此邊不剪下。

上-左 方位的裁剪:從0開始剪裁直到設定值,即

上-左 方位的auto值等同於0;

右-下 方位的裁剪:從設定值開始剪裁直到最右邊和最下邊,即 右-下 方位的auto值為盒子的實際寬度和高度;

示例:clip:rect(auto 50px 20px auto)

說明:上邊不剪下,右邊從第50個畫素開始剪下直至最右邊,下邊從第20個畫素開始剪下直至最底部,左邊不剪下

inset(|auto |auto |auto |auto): 該剪裁方式與 rect() 類似,不同的是 inset() 的剪裁,每個方位都是參照該方位的邊界來進行裁剪的。

上-右-下-左 方位的裁剪:從0開始剪裁直到設定值,即 上-右-下-左 方位的auto值都等同於0;(css3)

position: 檢索物件的定位方式。

static: 物件遵循常規流。top,right,bottom,left等屬性不會被應用。

relative: 物件遵循常規流,並且依據自身在正常流中的位置通過top,right,bottom,left屬性進行偏移時不影響常規流中的任何元素。層疊通過z-index屬性定義。

absolute: 物件脫離常規流,使用top,right,bottom,left等屬性進行絕對定位,盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊,其層疊通過z-index屬性定義。

fixed: 物件脫離常規流,使用top,right,bottom,left等屬性以視窗為參考點進行定位,當出現滾動條時,物件不會隨著滾動。ie6及以下不支援此引數值

center: 物件脫離常規流,使用top,right,bottom,left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊,其層疊通過z-index屬性定義。(css3)

page: 盒子的位置計算參照absolute。(css3)

margin

h2檢索或設定物件四邊的外延邊距。

如果提供全部四個引數值,將按上、右、下、左的順序作用於四邊。

如果只提供乙個,將用於全部的四邊。

如果提供兩個,第乙個用於上、下,第二個用於左、右。

如果提供三個,第乙個用於上,第二個用於左、右,第三個用於下。

內聯物件可以使用該屬性設定左、右兩邊的外補丁;若要設定上、下兩邊的外補丁,必須先使該物件表現為塊級或內聯塊級。

外延邊距始終透明。

某些相鄰的margin會發生合併,我們稱之為margin摺疊

aspect-ratio

: 指定比率

定義輸出裝置中的頁面可見區域寬度與高度的比率。

本特性接受min和max字首,因此可以派生出min-aspect-ratio和max-aspect-ratio兩個**特性。

background:

[ background-color ]: 指定物件的背景顏色。

[ background-image ]: 指定物件的背景影象。可以是真實路徑或使用漸變建立的「背景影象」

[ background-repeat ]: 指定物件的背景影象如何鋪排填充。

[ background-attachment ]: 指定物件的背景影象是隨物件內容滾動還是固定的。

[ background-position ]: 指定物件的背景影象位置。

[ background-origin ]: 指定物件的背景影象顯示的原點。

[ background-clip ]: 指定物件的背景影象向外裁剪的區域。

[ background-size ]: 指定物件的背景影象的尺寸大小。

background-attachment 設定或檢索背景影象是隨物件內容滾動還是固定的。必須先指定background-image屬性。

fixed: 背景影象相對於窗體固定。

scroll: 背景影象相對於元素固定,也就是說當元素內容滾動時背景影象不會跟著滾動,因為背景影象總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。

local: 背景影象相對於元素內容固定,也就是說當元素隨元素滾動時背景影象也會跟著滾動,因為背景影象總是要跟著內容。(css3)

background-clip 指定物件的背景影象向外裁剪的區域。

padding-box: 從padding區域(不含padding)開始向外裁剪背景。

border-box: 從border區域(不含border)開始向外裁剪背景。

content-box: 從content區域開始向外裁剪背景。

text: 從前景內容的形狀(比如文字)作為裁剪區域向外裁剪,如此即可實現使用背景作為填充色之類的遮罩效果。

background-repeat: 設定或檢索物件的背景影象如何鋪排填充。必須先指定background-image屬性。

允許提供2個引數,如果提供全部2個引數,第1個用於橫向,第二個用於縱向。

如果只提供1個引數,則用於橫向和縱向。特殊值repeat-x和repeat-y除外,因為repeat-x相當於repeat no-repeat,repeat-y相當於no-repeat repeat,即其實repeat-x和repeat-y等價於提供了2個引數值

對應的指令碼特性為backgroundrepeat。

repeat-x: 背景影象在橫向上平鋪

repeat-y: 背景影象在縱向上平鋪

repeat: 背景影象在橫向和縱向平鋪

no-repeat: 背景影象不平鋪

round: 背景影象自動縮放直到適應且填充滿整個容器。(css3)

space: 背景影象以相同的間距平鋪且填充滿整個容器或某個方向。(css3

background-position: 設定或檢索物件的背景影象位置。必須先指定background-image屬性。

如果提供四個,每個或偏移前都必須跟著乙個關鍵字(即left | center | right | top | bottom),偏移量相對關鍵字位置進行偏移。

示例:假設要定義背景影象在容器中右下方,並且距離右邊和底部各有20px

縮寫方式: background:url(test1.jpg) no-repeat

right 20px bottom 20px;

: 用百分比指定背景影象填充的位置。可以為負值。

: 用長度值指定背景影象填充的位置。可以為負值。

center: 背景影象橫向和縱向居中。

left: 背景影象在橫向上填充從左邊開始。

right: 背景影象在橫向上填充從右邊開始。

top: 背景影象在縱向上填充從頂部開始。

bottom: 背景影象在縱向上填充從底部開始。

background-origin: 設定或檢索物件的背景影象計算background-position時的參考原點(位置)。

padding-box: 從padding區域(含padding)開始顯示背景影象。

border-box: 從border區域(含border)開始顯示背景影象。

content-box: 從content區域開始顯示背景影象。

web前端學習***21 598399936

CSS樣式常用屬性整理

web工程師是最近5年剛剛興起的一門高薪職業,人們的專注度越來越高。那麼前端除了學習html標籤之外還需要掌握什麼知識點呢?為大家整理了乙個和html標籤密不可分的知識要點 css樣式常用屬性 css 常用屬性 z index auto 預設值 檢索或設定物件的層疊順序。並級的物件,此屬性引數值越大...

css常用樣式整理 flex樣式整理

css3的flex布局已經是前端必會,想學flex布局的話,推薦大家看阮一峰的網路日誌 flex 布局教程 語法篇,這裡只是複習一下flex布局的常用屬性 justify content align items flex align content。flex布局 常用屬性 justify conte...

CSS常用樣式屬性

1.css字型和文字相關屬性 屬性 font family 規定文字的字型系列,比如 serif sans serif font size 規定文字的字型尺寸 font style 規定文字的字型樣式。主要有normal,italic,oblique font weight 規定字型的粗細。主要有n...