CSS定位,background屬性 四

2021-08-27 08:57:06 字數 2348 閱讀 5781

1:css基本語法及頁面引用

2:css文字設定

3:css顏色表示

4:css選擇器

5:css盒子模型

6:css元素溢位

7:css塊元素、內聯元素、內聯塊元素

8:css浮動

9:css定位

10:background屬性

關於定位

我們可以使用css的position屬性來設定元素的定位型別,postion的設定項如下:

相對的理解:

相對上級,如果上級或者上級的上級設定了position,相對於它。

如果都沒有設定position,相對於body。

1.relative 生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移

2.absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於body元素進行定位。

3.fixed 生成固定定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於瀏覽器視窗進行定位。

4.static 預設值,沒有定位,元素出現在正常的文件流中,相當於取消定位屬性或者不設定定位屬性

5.inherit 從父元素繼承 position 屬性的值

定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

定位元素層級

定位元素是浮動的正常的文件流之上的,可以用z-index屬性來設定元素的層級

典型定位布局

1、固定在頂部的選單

2、水平垂直居中的彈框

3、固定的側邊的工具欄

4、固定在底部的按鈕

background屬性是css中應用比較多,且比較重要的乙個屬性,它是負責給盒子設定背景和背景顏色的,background是乙個復合屬性,它可以分解成如下幾個設定項:

1.background-color 設定背景顏色

2.background-image 設定背景位址

3.background-repeat 設定背景如何重複平鋪

4.background-position 設定背景的位置

5.background-attachment 設定背景是固定還是隨著頁面滾動條滾動

實際應用中,我們可以用background屬性將上面所有的設定項放在一起,而且也建議這麼做,這樣做效能更高,而且相容性更好,比如:「background: #00ff00 url(bgimage.gif) no-repeat left center fixed」,這裡面的「#00ff00」是設定background-color;「url(bgimage.gif)」是設定background-image;「no-repeat」是設定background-repeat;「left center」是設定background-position;「fixed」是設定background-attachment,各個設定項用空格隔開,有的設定項不寫也是可以的,它會使用預設值。

下面做個例子

使用這張做為背景圖:

1、「background:url(bg.jpg)」,預設設定乙個位址,會從盒子的左上角開始將盒子鋪滿。

2、「background:cyan url(bg.jpg) repeat-x」,橫向平鋪盒子,盒子其他部分顯示背景顏色「cyan」。

3、「background:cyan url(bg.jpg) repeat-y」,縱向平鋪盒子,盒子其他部分顯示背景顏色「cyan」。

4、「background:cyan url(bg.jpg) no-repeat」,背景不重複,背景和盒子左上角對齊,盒子其他部分顯示背景顏色「cyan」

5、「background:cyan url(bg.jpg) no-repeat left center」,背景不重複,背景和盒子左中對齊,盒子其他部分顯示背景顏色「cyan」。

6、「background:cyan url(bg.jpg) no-repeat right center」,背景不重複,背景和盒子右中對齊,也就是背景的右邊對齊盒子的右邊,盒子其他部分顯示背景顏色「cyan」。

**如下 效果圖在**下面

lang="en">

charset="utf-8">

正道skrtitle>

關於background定位

直到剛剛我才發現我小瞧了background定位 因為專案裡需要顯示隱藏的按鈕上有兩個圖示 開始想了幾種方法都不行,然後突然就想到了background定位 果斷試了一下 1 input type button class layui display 1 value 顯示 1 顯示隱藏 2 layu...

CSS常用樣式 background

參考 w3school css background 所有瀏覽器都支援 background 屬性,其簡寫形式,在乙個宣告中設定所有的背景屬性,各屬性需按順序,語法如下 selector可設定如下屬性 值描述 cssbackground color 規定要使用的背景顏色 1background im...

CSS背景屬性Background詳解

css背景屬性background詳解 本文詳解了css的背景屬性background,包括css3中新增的背景屬性。如果你是個css初學者,還可以檢視之前介紹的css浮動屬性和css透明屬性詳解。css2 中的背景 background css2 中有5個主要的背景 background 屬性,它...