WebUI開發(學習隨筆)

2021-05-23 19:04:59 字數 1927 閱讀 1904

前段時間學習了一下web ui的開發,現在來總結一下!

1. block 和 inline

block(塊級元素)獨佔整行,不和其他元素共享一行(例如:div,ul,li,p,h1,h2,h3......)。

inline(行級元素)和其他行級元素共享一行。(例如:span,img......)

2. block(塊級元素)

2.1 如果兩個block元素在垂直方向上設定了margin,則取大者。

1 2

以上兩個div的垂直距離為30px;

2.2 block元素的width屬性是指內容所佔的區域的寬度,可以大於內容寬度。注意:不包括padding區域。如果設定了padding,則整個元素所佔的區域是padding-left + padding-right + width

3. inline(行級元素)

3.1 inline元素不允許設定高度和寬度,其高度,寬度由內容決定。

3.2 inline的margin屬性,上下無效,左右有效。

3.3 inline的padding屬性,上下無效,左右有效。

4. display屬性

display:block/inline; 讓元素在block元素和inline元素之間的相互轉換。

5. 一般只在中出現。不要用於元素和元素之間的回車。如果要換行,則將inline轉換成block

7. 將一組元素在邏輯上看作為乙個整體時使用(不要濫用,如果div中只包含乙個元素,這時最好不要使用div)

8. 用作頁面整體框架的div的寬度設定為960px較好,對不同螢幕可以很好相容。

9. float屬性指將當前的元素從文件流中抽出,float屬性需要配合clear屬性一起使用。

任何元素如果設定了float以後,可以設定高度和寬度,且必須設定高度和寬度,inline元素使用float後,可以設定高度,並且還可以和別的元素分享同一行。(float的作用用語言不是很好解釋,希望各位通過練習,自己理解)

(1)資料型,(缺少會影響資料表達)使用img

(2)標記型,(缺少不會影響資料表達)使用background-image (別忘了設定width,和height)

11. 使用table順序 表頭 表尾 表體。

在瀏覽器中顯示還是按照表頭,表體,表尾。

目的:讀取**資料可以不用判斷當前行是否是表尾行(如有不明白,各位可以參看其他資料)。

12. position(內容來自網路)

絕對定位:position: absolute;語法:

有如下兩種情況

1,沒有設定 top、right、bottom、left 的情況,預設依據父級的「內容區域原始點」為原始點

2,有設定 top、right、bottom、left 的情況,這裡又分了兩種情況如下:

(1),父級沒 position 屬性,瀏覽器左上角(即 body)為「座標原始點」進行定位,位置由 top、right、bottom、left 屬性決定

(2),父級有 position 屬性,父級的「座標原始點」為原始點

相對定位:position: relative;

參照父級的「內容區域原始點」為原始點,無父級則以 body 的「內容區域原始點」為原始點,位置由 top、right、bottom、left 屬性決定,並且會在父塊以外佔據相同的大小,所以不推薦使用。

無論相對定位或絕對定位有一點需要注意的就是

left和right只能設定乙個

top和bottom也只能設定乙個

最後:這裡給出幾句開發中用得到的口訣:

如果需要設定乙個元素的高度,該元素必須是block;

如果需要和其他元素分享行空間,則float

如果不和前乙個元素分享,則clear

如果一行中,只要有乙個兄弟元素設定了float,則所有元素都必須float

以上內容是學習過程中的一些記錄和總結。如有錯誤,希望大家指出。相互學習......

BlueZ開發隨筆

從2010年的一月份到現在藍芽的專案已經開始兩個多月了。除去過年的二十天,我們已經做40多天了。面對完全未知的藍芽,我們一步步摸索,直到今天終於有了一點小成績。記下我此時興奮和探索bluez的感觸,以回憶!剛開始做這個專案,只知道做基於linux下bluez的應用程式的開發,然後再移植到開發板上。當...

Ext開發隨筆

今天在開發乙個專案時,前端用的是ext框架,在開發過程中碰到乙個問題 missing in xml expression。因為本人是用firefox瀏覽器的外掛程式firebug做為除錯,所就碰上這事。如果不用firefox可能永遠碰到著。發現問題咱們就來解決問題。使用firedebug跟蹤了一下返...

開發隨筆(一)

現在回首望去,都是不堪路。想當年自己傻傻呼呼的,遇到問題 不求甚解 到頭來,除了問題解決了,最後什麼都沒明白,現在的經驗告訴我,如果時間還夠寬裕,最好找到問題原因。一直認為,發現問題及解決問題的過程中對自己才是最大的幫助。但是真正出現了問題,有時候卻又是及其的糾結 煩悶,但是問題還是要解決的,不可能...