CSS中的一些背景相關的學習

2021-08-03 19:58:07 字數 1750 閱讀 4151

今天講了css一些相關的屬性,其中包括背景相關屬性、尺寸相關屬性、顯示相關屬性等,還有盒子模型和定位的一些知識。現在就讓我們詳細的了解一下吧!

(1)background-color:背景顏色
(3)background-repeat:的複製選項
①repeat:在水平和垂直兩個方向上進行複製
②no-repeat:不複製
③repeat-x:在水平方向上覆制
④repeat-y:在垂直方向上覆制
(4)background-position:背景出現的位置
為了方便書寫,也可以將這一組屬性值都封裝到乙個background中,這樣能使表達簡潔。

2、尺寸相關屬性,最常見的就要數width和height了,分別是寬度和高度,其他還有:max-width:最大寬度、max-height:最大高度、min-width:最小寬度、min-height:最小高度。

3、顯示相關屬性

(1)隱藏元素的方法

①  visibility:hidden,僅僅隱藏內容,該元素所站位置依然存在;
②display:none,不僅隱藏內容,且不佔位置。
其中display還可以設定元素的顯示模式,

(2)inline:將塊級元素以內聯元素形式顯示,此時width和height實行無效,其空間取決於元素的內容

(3)inline-block:將塊級元素以內聯元素形式顯示,同時兼具塊級元素的某些特徵,比如可以使用width和height設定所佔位置大小。

4、下乙個內容,它就是盒子模型,

用margin(外邊距)來表示,其中還有以下幾個屬性:

margin-top、margin-right、margin-legt、margin-bottom

使用方式:

(1)margin:30px;表示上下左右外邊距都為30px

(2)margin-left:30px。單獨設定上下左右外邊距

(3)margin:10px、20px、30px、40px;分別設定上右下左四個邊距為10px、20px、30px、40px。

padding:內邊距,也有上下左右邊距,和margin類似

(1)邊框也可設定屬性,讓人看著簡單明瞭:

①border:邊框

②border-width:邊框寬度

③border-style:邊框的線條型別

④border-color:邊框用顏色

也可以使用更優化的方式:

border: 50px groove skyblue;

outline:輪廓線,用法同border一樣。

5、好了,現在來說說今天的最後乙個內容吧,定位。在現實生活中,有gps定位,在計算機語言中也是有自己定位的語言的。如下:

(1)定位方式有:定位方式有:static(靜態的,預設的)、fixed(固定的)、relative(相對的)、absolute(絕對的),還有個無定位,元素正常是出現在流中,是不受left、right、bottom屬性的影響的。

就舉幾個例子看看吧,用fixed來演示:

#div1

#div2

這個從顯示結果看,fixed定位會將元素從流中「摘」出來單獨進行定位,其定位取決於left、top。(因為不知道怎樣上傳截圖,所以沒有**結果)

重新定位之後可能會出現重疊,通過z-index可以調整其順序,但是靜態定位z-index無效。

今天就寫怎麼多了,現在越學習,就感覺計算機的世界也是很複雜的,現在的決定只能是努力學習,打下基礎,為以後的未來奠定基石!

css 的一些學習(一)

在前端的學習中總會遇到各種各樣的問題,而且是越來越多你所沒有想到的問題,但當你發現並用自己的努力成功解決的那一刻是那麼的爽。所以,一定要堅持做下去,一定可以看到希望。學習總是那樣,知道它運用它掌握它,對css的一些記錄。css的簡介 css 層疊樣式表 cascsding stytle sheets...

自己學習的一些css

1.html選擇器pa html選擇器僅僅作用於頁面中相關的標籤 2.類選擇器 類名不同標籤需要變成同一種樣式時,用類選擇器.3.id選擇器 id名 id選擇器作用於有id名的所在行 修飾背景 background color 背景顏色 background image 背景,url 路徑 back...

css學習的一些心得

摘自http blog.csdn.net aifox archive 2005 12 03 543097.aspx 其實去年的時候,我就有過接觸css了 都是跟著一些網頁教程學做的 無非是用來控制一下link,vlink之類的 那個時候覺得css好像也不過如此,對於層什麼 那個時候很不屑於顧,因為感...