CSS宣告與定位

2021-09-25 07:37:24 字數 640 閱讀 6234

在head標籤中使用style標籤宣告:

作用:此宣告一般宣告當前網頁的公共樣式或者給某個標籤的單獨樣式

在標籤上使用style標籤宣告:

作用:此宣告會將css樣式直接作用於當前標籤

在head標籤中使用link標籤引用外部宣告好的css檔案

作用:此宣告相當於呼叫,解決了不同網頁之間樣式重複使用地問題

一次宣告,隨處使用。

不同的宣告給同乙個標籤操作了同乙個樣式,會使用誰的?

如果css的宣告全部在head標籤中,則遵循就近原則,誰離標籤近,就顯示誰的。

position:

相對定位:relative

作用:相對元素原有的位置移動指定的距離(相對的原來自己的位置)

注意:其他元素的位置是不變的

絕對定位:absolute

作用:可以使用元素參照介面或者相對父級元素進行移動

注意:如果父級元素成為父級元素,必須使用相對定位屬性

預設情況下是以介面為基準進行移動的

固定定位:fixed

作用:將元素固定顯示在頁面指定的位置,不會隨滾動條的移動而改變位置

以上定位都可以使用top,right,bottom,left來進行移動

z-index:此屬性是用來宣告元素的顯示級別的

詳解css 定位與定位應用

原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定,遵循基本的定位規定,不能通過z index進行層次分級。relative 不脫離文件流,參考自身靜態位置通過 top,bottom,left,r...

CSS 絕對定位與相對定位

前幾天遇到了上班的第乙個難題,專案想要實現這樣的效果 實際效果比視覺圖上下多了兩截。但是,聰明如我怎麼可以在我的第乙個頁面上屈服呢!於是在光明正大地看了其他 類似效果的原始碼之後,我也get到了這個技能!原來這裡是用到障眼法,分別畫出兩個細成一條線的div,分別為.border first和.bor...

css相對定位與絕對定位

逆戰班通常情況下,我們用css定位來解決容器疊加排列的 問題,而用浮動解決左右排列的問題。position屬性的值主要有static,relative,absolute,fixed和sticky這幾種,position屬性的預設值為static,也就是沒有定位,元素在正常的文件流中,這時候給元素加偏...