无码中文视频在线色欧美91,亚洲AV秘无码一区二三,日韩AⅤ在线播放
RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一個網(wǎng)頁是由眾多HTML元素在一定的規(guī)則下進行組織排版的產(chǎn)物。因此使用HTML進行應(yīng)用開發(fā)，完成滿足用戶需求的應(yīng)用，需要對引擎的排版機制進行一定的了解，這樣才能夠如指臂使得靈活操縱各個元素，使網(wǎng)頁能以需要的效果進行呈現(xiàn)。
創(chuàng)新互聯(lián)云計算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、服務(wù)器機柜租用 、云服務(wù)器、網(wǎng)站空間 、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機、網(wǎng)站空間 、主機域名 、VPS主機、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
為了簡化排版邏輯，我們在下面的介紹中統(tǒng)一使用div作為排版控制標簽，一起研究如何控制div完成頁面的布局。
DIV標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具。(W3CSCHOOL)
在AppCan應(yīng)用開發(fā)平臺中，默認的UI框架就是依賴于div的各種布局組合，來實現(xiàn)界面的定制。
HTML引擎排版時，可以認為所有網(wǎng)頁元素都是包含在body中按照流方式進行排布的，如下圖順序所示。
所有元素都忽略 top, bottom, left, right 或者 z-index 聲明。DIV元素作為塊元素，默認是自動的開始新一行，所以多個div進行布局時，每一個DIV都占用獨立一行。
如下事例代碼，我們建立了多個div，觀察它的效果。
a
b
c
d
e
f
可以看到每一個div占用了手機屏幕的一整行。BODY被六個div元素撐高。
我們看到div元素內(nèi)容實際并不需要占用一行，如果希望多個元素根據(jù)寬度自動橫排適配，可以進行如下調(diào)整。
a b c
d
e
f
當為a和b的div指定了inline-block屬性后，這兩個div元素不再占用一整行，他根據(jù)內(nèi)容自動撐開為8x18的矩形，并在一行內(nèi)顯示。我們擴充b-div元素的內(nèi)容，使其變長
a bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb c
d
e
f
如上圖所示，b-div自動在第二行顯示，因此可以看到inline-block屬性是串行安排元素，如果不超過一行，則在一行內(nèi)顯示，超過一行，則進行換行。
我們再調(diào)整一下代碼，把inline-block改為inline
a bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb c
d
e
f
看到a b在一行顯示，inline和inline-block的區(qū)別就是，inline強制元素在一行，而inline-block則是不超過一行在一行內(nèi)顯示，否則換行。
如上是我們常用的div 顯示控制。參考w3cSchool整理的display屬性表格如下
上面我們講解了div元素在默認瀏覽器流式布局的情況下,body中元素布局的情況，而實際上，每一個div元素內(nèi)部也可以包含其它元素，而這些子元素也是一樣按照流方式進行布局。請參看如下代碼和效果圖。
a A
B
C
c
d
e
f
從上述事例圖中可以看到，包含在div中的子div也遵循之前的流式方式進行排版，并且由于父DIV是由子div支撐起來的，因此子div的布局也會影響到父div在父流中的布局。
但很多情況下，總會有一些搗亂分子存在，他們不希望按照固定的流來安置自己而是更希望自己能夠有個性一點。他們使用float和position屬性來實現(xiàn)這個目的。float常用的屬性如下
loat這個CSS屬性比較難于控制，使用的好，那么你可以把布局做的很眩，使用的不好，界面會亂的一塌糊涂。如下是摘錄的float的用法分析,它已經(jīng)對float進行了***的說明。
#p#
CSS浮動屬性Float詳解
什么是CSS Float?
float 是 css 的定位屬性。 在傳統(tǒng)的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。在網(wǎng)頁設(shè)計中，應(yīng)用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動的元素仍然是網(wǎng)頁流的一部分。這與使用絕對定位的頁面元素相比是一個明顯的不同。絕對定位的頁面元素被從網(wǎng)頁流里面移除了，就像印刷布局里面的文本框被設(shè)置為無視頁面環(huán)繞一樣。絕對定位的元素不會 影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。
像這樣在一個元素上用CSS設(shè)置浮動：
#sidebar { float: right; }
fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (默認的) 使元素不浮動，Inherit 將會從父級元素獲取float值。
Float的用處
除了簡單的在圖片周圍包圍文字，浮動可用于創(chuàng)建全部網(wǎng)頁布局。
Float對小型的布局同樣有用。例如頁面中的這個小區(qū)域。如果我們在我們的小頭像圖片上使用Float，當調(diào)整圖片大小的時候，盒子里面的文字也將自動調(diào)整位置：
同樣的布局可以通過在外容器使用相對定位，然后在頭像上使用絕對定位來實現(xiàn)。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應(yīng)變化。
清除Float
清除(clear)是浮動(float)的相關(guān)屬性.一個設(shè)置了清除Float的元素不會如浮動所設(shè)置的一樣，向上移動到Float元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。
范例代碼和事例截圖
aaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccc
上例中，側(cè)欄向右浮動，并且短于主內(nèi)容區(qū)域。頁腳(footer)于是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁腳(footer)上清除浮動，以使頁腳(footer)待在浮動元素的下面。
#footer { clear: both; }
aaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccc
清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是默認值，只在需要移除已指定的清除值時用到。inherit 應(yīng)該時第五個值，不過很奇怪的是 IE 不支持(這個不奇怪吧，IE 從來都這么特立獨行吧 -糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。
#p#
偉大的塌陷
使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問題。
塌陷的直觀對立面更不好，看看下面的情況：
當上面的塊級元素自動擴展以適應(yīng)浮動元素時，段落間的文本流中會出現(xiàn)非自然的空白換行，而且沒有有效的方法來修正這個問題。對于這種情況，設(shè)計師的抱怨會更甚于對塌陷的抱怨(沒理解，不是設(shè)計完成之后才會進行頁面編碼嗎?-糖伴西紅柿)。
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之后，容器結(jié)束之前來清除浮動。
清除浮動的技術(shù)
如果你很明確的知道接下來的元素會是什么，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不添加額外的元素也使得它有良好的語義性。當然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。
◆ 空div方法從字面來看，是一個空的 div。
有時可能會用
或者一些其他元素，但是 div 是最常用的，因為它沒有瀏覽器默認樣式;沒有特殊功能，而且一般不會被 css 樣式化。這個方法因為只是為了表現(xiàn)，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個方法有效而且沒有任何傷害。
◆ overflow 方法在父元素上設(shè)置 overflow 這個 css 屬性。如果父元素的這個屬性設(shè)置為 auto 或者 hidden，父元素就會擴展以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。但是，如果需要增加一個新的 div 來使用這個方法，其實就和空 div 方法一樣沒有語義了。而且要記住，overflow 屬性不是為了清除浮動而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動條。
◆ 簡單清除方法使用了一個聰明的 css 偽選擇符(:after)來清除浮動。比起在父元素上設(shè)置 overflow，只需要給它增加一個額外的類似于”clearfix”的類。這個類使用如下 css:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
這會在清除浮動的父元素之后應(yīng)用一點看不見的內(nèi)容。這不是全部內(nèi)容，還需要一些額外的代碼來適應(yīng)那些老舊的瀏覽器。
不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網(wǎng)格為例。
為了從視覺上較好的把相似的塊聯(lián)系起來，需要在必要的地方開啟新行，這里是顏色改變的地方。如果每個顏色組都有一個父元素的話，我們可以使用 overflow 或者 簡單清除方法?；蛘?，在每組之間用一個空div方法。額外的 div 之前并不存在，可以自己試試來看看哪個方法好。
#p#
浮動的問題
浮動因脆弱而飽受詬病。大多數(shù)的脆弱性來自于 IE6 及其一系列的浮動相關(guān) bug。因為越來越多的設(shè)計師不再支持 IE6 了，你也可以不關(guān)注它了。不過對于那些要關(guān)注的人來說，這里有些大概。
◆ 推倒 是浮動元素內(nèi)的元素(大多是圖片)比浮動元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會在浮動之外渲染圖片，但是不會有伸出來的部分影響其他布局。IE 會擴展浮動來包含圖片，精彩大幅度地影響布局。一個普遍的例子是突破伸出主內(nèi)容之外把側(cè)欄推到下面。
◆ 快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來切除多余的部分。
◆ 雙倍邊距bug處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設(shè)置外邊距(margin)，會引發(fā)雙倍邊距。快速修正：給浮動設(shè)置 display:inline; 而且不用擔心，它依然是塊級元素。
◆ 3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場一樣?？焖傩拚涸谑苡绊懙奈谋旧显O(shè)置寬度或高度。
◆ IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉?？焖傩拚河酶冈氐牡變?nèi)補白(padding)代替。
接著我們繼續(xù)說明其他用于定位的元素
position常用的屬性如下(static為默認屬性)
其中absolute和fixed都會使元素不再遵循流的布局方式。而relative還會使元素繼續(xù)遵循流的方式，只是使其定位于相對于其在流中的位置的相對位置上。我們先看一下relative的效果。
a A
B
C
c
d
e
f
上述代碼中，我們指定了A元素在其流中位置向右30px，這個變化并不會影響到B元素在流中的布局。
好后面我們關(guān)鍵介紹absolute和fixed屬性。
absolute屬性
我們用一段代碼和截圖來直觀的體驗一下
a
b
c
d
e
從上圖看到，我們?yōu)閎元素定義了position為absolute,并指定其離左邊50px(這個50px是距離屏幕邊界，如何相對于其父元素定位，后面有詳細介紹)。由于指定了absolute屬性，則b元素已經(jīng)不再從屬于流，因此流按照acde的方式進行排列。
上述代碼中有一個疑問，我們指定了b元素為absolute,但并沒有指定b的top坐標，那為什么b元素顯示在目前這個位置呢?這個可以這樣理解，每一個元素可以使用top left right bottom四個位置進行定位，b元素在流中的時候，瀏覽器為其計算了top left right bottom四個位置值，當我們指定了absolute和left屬性時，引擎直接修改了left和right屬性，但top和bottom還使用了之前流中的位置，因此b元素會在目前屏幕中這個位置顯示。如果我們再為b元素指定top或bottom屬性，則b元素將會變更位置，按照指定位置顯示。left和bottom、top和bottom是一組屬性，當我們指定了left，則right自定按照width-left獲得，如果指定了right，則left按照width-right獲得，當同時指定了left和right則按照left處理。top和bottom同理。
absolute屬性會使元素根據(jù)相對于 static 定位以外的***個父元素進行定位。這段話如何理解呢?請參看如下代碼，了解子元素使用absolute的效果
a
b
d
e
上述代碼中我們在c元素內(nèi)指定了元素ccc，ccc元素使用absolute定位，指定了其left=20px。但從上述截圖中我們看到ccc元素指定的20px并不是距離c元素左邊界20px而是距離整個屏幕邊界，也就是body的邊界20px。這就是由于c元素默認position屬性為static，body默認的position屬性也是static，因此ccc元素并沒有依據(jù)c的位置也沒有根據(jù)body進行定位而是根據(jù)屏幕位置進行了定位。好，我們修改一下c元素的posiiton屬性看看效果。
a
b
c
ccc
d
e
上述代碼中，我們指定了c元素的定位屬性為relative，這時，ccc元素屬性為absolute時，就根據(jù)了c元素的邊界進行了定位。那如果c元素也是absolute定位該是什么效果呢?
a
b
c
ccc
d
e
上述代碼中我們修改了c元素為absolute定位，左邊距80px,可以看到ccc元素根據(jù)c元素定位后的位置進行了相對定位。
#p#
fixed屬性
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
這個屬性可以控制元素在硬件屏幕上的指定位置顯示，它不再從屬于流，也不再使元素從屬于其父元素屬性進行定位，而是直接根據(jù)硬件屏幕進行定位。這個屬性主要用于超出瀏覽器窗口的網(wǎng)頁時，保持某些元素永遠浮動于屏幕的制定位置。我們舉一個事例來看他的效果。
111
222
333
444
555
111
222
333
... ... ... ... ... ...
444
555
I am fixed
我們建立多個div條目使其超出屏幕容納范圍，然后加入一個fixed的元素，并指定其位置。然后滾動屏幕，可以看到不論網(wǎng)頁怎么滾動，fixed元素始終在屏幕指定的物理位置。從上面看出，fixed屬性在界面設(shè)計中是非常關(guān)鍵的功能，但遺憾的是在android2.2以下和iOS5.0以下平臺都不支持這個屬性。在AppCan平臺，我們提供了幾種機制來實現(xiàn)相關(guān)的類似功能。具體可以參考我們相關(guān)的網(wǎng)站。
通過上面的講述，我們已經(jīng)知道了比較常見的幾種用于布局的屬性，來實現(xiàn)元素的定位。但這些屬性還不能夠完成我們對界面的布局要求，還要與其他相關(guān)定位屬性進行結(jié)合。下面我們就對這些屬性進行分析。
之前的事例中我們發(fā)現(xiàn)，div元素本身的大小，完全根據(jù)其子元素的高寬來支撐的，但實際情況是我們希望為d iv元素本身設(shè)定一個大小高寬位置，然后在其中排布子元素。下面是幾種方案
在流中的div元素會完全忽略top, bottom, left, right,width,height這些屬性，因此無法為流中的div元素指定大小位置等信息。在這種情況下如果需要調(diào)整div的高寬值，我們可以使用padding屬性、min-height、max-height、min-width、max-width來處理。我們一一進行介紹
padding 屬性是用來指定一個元素的內(nèi)邊距。一個元素的寬度可以認為是"
寬度=左邊框?qū)挾?左側(cè)內(nèi)邊距+內(nèi)容寬度+右側(cè)內(nèi)邊距+右邊框?qū)挾?，就如下圖所示。下圖中的margin屬性是元素與其他元素間的間隔也就是外邊距。
padding屬性的衍生屬性有padding-top padding-bottom padding-right padding-left，分別制定四個邊距。
那么我們?nèi)绾问褂胮adding 來調(diào)整div的高寬呢，很簡單直接為Padding指定數(shù)值即可。從上面的公式可以看出，如果希望寬度固定，再指定了邊框?qū)挾群瓦吘鄬挾群?，?nèi)容寬度也就必須是定值。因此，使用padding來調(diào)整高寬時，常用在固定高寬的場景中。下面舉一個事例。
111
width="70px" height="30px" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png">
上面事例中我們看到，我們設(shè)定了padding屬性為80px,也就是說111元素外圍四個邊內(nèi)邊距都為80px，這時我們?yōu)閕mg子元素指定了絕對定位left:0px top:5px。介紹一個定位的小技巧，上面的google圖片我們希望他居于左側(cè)并且縱向居中，該如何做呢?
111
上面的代碼中，我們?yōu)閳D片指定了top位置為其父元素的50%位置(父元素Position要設(shè)定為非static)，但這指定了圖片的左上角位置在50%，圖片還是不居中，這時我們?yōu)閳D片指定了上外邊距為-15px，也就是圖片高度的一半，圖片會再上移15點，達到居中的效果。其實公式很簡單 positionY=divHeight*50%-imgHeight*50%
下面是一個padding復(fù)雜應(yīng)用效果的范例截圖
上面我們使用padding來控制元素的高寬，但在元素包含內(nèi)容會出現(xiàn)變化的情況下，想固定高寬，padding已經(jīng)不能夠勝任。這時我們會用到min-width、max-width、min-height和max-height屬性。我們看下面的min-height事例，來了解其使用效果。
111
src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png">
上述的范例中，我們?yōu)閐iv制定了左側(cè)內(nèi)邊距80px用于容納圖片，高度指定了最小高度100px，這時我們可以看到，即使內(nèi)容高度發(fā)生了變化，div高度還是100px。但這個范例里只加入了111 222兩個內(nèi)容部分，如果內(nèi)容部分高度超過了100px，會出現(xiàn)什么情況呢?
div被撐開，如何避免這種問題呢?看如下代碼
111
src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png">
與之前代碼相比，我們?yōu)閐iv指定了max-height屬性，來控制其***高度，避免內(nèi)容超出區(qū)域時撐大div,同時指定了overflow屬性，避免顯示到div外側(cè)(overflow屬性在不同的手機平臺上和平臺的不同版本中，支持度也是不同的，auto和scroll屬性基本都不會被支持。因此，如果希望在div內(nèi)部實現(xiàn)滾動效果，目前瀏覽器原始功能還是不能夠?qū)崿F(xiàn)的)
上邊的事例中我們都使用的是px作為長度高度單位，但是在手機應(yīng)用研發(fā)中，面對的手機硬件屏幕尺寸、分辨率等類別非常多，如果使用px作為度量單位，會造成在低分辨率手機顯示正常的元素，在高分辨率上顯示的非常小而無法讓用戶操作，或者在高分辨率手機的屏幕上顯示正常，但在低分辨率屏幕上又過大無法完全展示。對于這種情況，我們推薦，在手機應(yīng)用研發(fā)中，網(wǎng)頁內(nèi)部的度量單位都使用em。什么是em呢?假如當前網(wǎng)頁的默認字體是12px，那么0.5em就是6px，如果字體是32px那么0.5em就是16px。em是當前字體大小相對單位。這樣，我們只需要為頁面在不同分辨率的手機指定不同的字體大小，而頁面內(nèi)部元素都指定em為單位，即可做到在不同分辨率上保持相近的效果。那如何來為每個頁面指定字體呢，我們使用media query屬性。下面代碼摘錄于AppCan UI框架包
@media all and (min-width:340px) and (min-height:620px),(min-width:620px) and (min-height:340px)
{
html
{
font-size:20px;
}
.ui-block-auto
{
width:33.333%
}
}
@media all and (min-width:420px) and (min-height:760px) and (max-height:900px),
(min-width:760px) and (max-width:900px) and (min-height:420px)
{
html
{
font-size:24px;
}
.ui-block-auto
{
width:33.333%
}
}
@media all and (min-width:1000px) and (min-height:740px),(min-width:740px) and (min-height:1000px)
{
html
{
font-size:20px;
}
.ui-block-auto
{
width:20%
}
}
從上述代碼中，我們可以看到如何為不同分辨率的屏幕指定字體的。但這又衍生出了另一個問題，當手機進行橫豎屏進行切換時，手機認為分辨率發(fā)生了變化，這時會造成上述media適配出現(xiàn)適配到其他分辨率的情況，有可能手機豎屏?xí)r布局正常變成橫屏?xí)r，真?zhèn)€布局發(fā)生了放大或縮小，字體也出現(xiàn)了變化。如何解決這種問題呢?有幾種方法
1.如果軟件只需要在豎屏使用，AppCan平臺為應(yīng)用提供了配置選項，只需要在調(diào)整一下配置即可使應(yīng)用不再轉(zhuǎn)屏。
2.如果應(yīng)用需要轉(zhuǎn)屏支持，可以在網(wǎng)頁中加入下述代碼
document.body.style.fontSize=window.getComputedStyle(document.body,null).fontSize;
上述代碼的作用是為body的style指定字體，而字體是由瀏覽器計算得來的。由于style屬性優(yōu)先級高于CSS類，因此，可以使手機旋轉(zhuǎn)時的適配無效，保證手機界面不管橫豎屏始終保持一種字體。
3.如果應(yīng)用需要支持旋轉(zhuǎn)屏，并且確認軟件只運行于指定的手機分辨率上，可以調(diào)整media query，使其對橫豎屏情況進行分別適配。
到此，我們已經(jīng)基本介紹了在手機HTML應(yīng)用研發(fā)中，如何通過css屬性對手機的元素進行定位的。希望能對大家使用HTML進行手機應(yīng)用研發(fā)有所幫助，謝謝。
AppCan移動應(yīng)用開發(fā)平臺的開發(fā)環(huán)境和指導(dǎo)幫助可以參考我們的網(wǎng)站 www.appcan.cn
作者：AppCan.cn
*為尊重作者勞動成果，轉(zhuǎn)載請注明出處*
http://www.5511xx.com/article/cdpeiij.html
建站
咨詢
售后
建站咨詢
