CSS學習筆記總結(下)

2021-09-28 14:39:43 字數 1813 閱讀 9090

一、浮動

1. 浮動特性:

2. 清除浮動

.clearfix:after,.clearfix:before # 避免塌陷、清除浮動

.clearfix:after # 清除浮動

.clearfix

清除浮動的使用方法:

.con2

或者

二、定位

1. 文件流

文件流,是指盒子按照html標籤編寫的順序依次從上到下,從左到右排列,塊元素佔一行,行內元素在一行之內從左到右排列,先寫的先排列,後寫的排列在後面,每個盒子都佔據自己的位置。

2. 關於定位

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

position設定項

功能relative

生成相對定位元素,元素所佔據的文件流的位置保留,元素本身相對自身位置進行偏移

absolute

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

fixed

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

static

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

inherit

從父元素繼承position屬性的值

3. 定位元素的偏移

定位元素還需要用left、right、top或者bottom來設定相對於參照元素的偏移量

4. 定位元素層級

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

偽**如下:

.box01
5. 定位元素特性

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

三、background屬性

1. 屬性解釋:實際應用中,我們可以用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

各個設定項空格隔開,有的設定項不寫也是可以的,它會使用預設值。

四、雪碧圖

雪碧圖,又稱為精靈圖,就是將網頁製作中使用的多個小合併成乙個,使用css技術將這張合成的應用在網頁不同的地方,雪碧圖可以減少網頁載入時的http請求數,優化網頁效能。

步驟:

Android Service學習總結(下)

關於郭神service的講解的學習總結,想看郭神原版請看該鏈結 遠端service 遠端service,它現在執行在與主線程不同的執行緒當中,所以我們不能在serviceconnected方法裡面對它的public方法進行呼叫,只能是通過aidl來進行通訊,與此同時遠端service還可以實現程序間...

CSS 學習筆記總結

1.概念 cascading style sheets 層疊樣式表 層疊 多個樣式可以作用在同乙個html的元素上,同時生效 2.好處 1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率 3.css的使用 css與html結合方式 1.內聯樣式 在標籤內使用...

使用者體驗設計學習總結(下)

使用者體驗設計 ued 使用者體驗設計的存在主要是在滿足需求的基礎上更進一步給與使用者一種好的服務 體驗。上一期主要介紹使用者體驗的大致流程操作與內容。關於流程與存在的角色就不過多介紹了 首先,我們從名詞上進行分析可以得出乙個結論 使用者體驗設計 包含了目標感覺動作三部分組成。使用者,這是目標 體驗...