這篇文章主要為大家展示了“html5定位的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5定位的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專注于分宜企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。分宜網(wǎng)站建設(shè)公司,為分宜等地區(qū)提供建站服務(wù)。全流程按需制作，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

定位

position屬性

static：默認值，沒有定位

relative：相對定位

absolute：絕對定位

fixed：固定定位

標準文檔流

標準文檔流:是指頁面上從上到下,從左到右,網(wǎng)頁元素一個挨一個的簡單的正常的布局方式。

一般在HTML元素分為兩種：塊級元素和行內(nèi)元素。像div,p這些的元素屬于塊級元素，塊級元素是從上到下一行一行的排列；默認一個塊級元素會占用一行，而跟在后面的元素會另起一行排列；

行內(nèi)元素是在一行中水平布置，從左到右的排列；span,strong等屬于行內(nèi)元素。

TitleDocument

我是塊級元素，我單獨占一行 我單獨占一行 我單獨占一行

我是塊級元素，我一行一行的排列，我一行一行的排列，我一行一行的排列

我的行內(nèi)元素，我水平的排列，我水平的排，我水平的排，我水平的排列，我水平的排列

我是行內(nèi)元素，沒有那么霸道，沒有那么霸道，沒有那么霸道，沒有那么霸道，沒有那么霸道

static定位

position:static

元素沒有定位，以標準流方式顯示

position屬性

第一個盒子

第二個盒子

第三個盒子

@charset "gb2312";

div {

width: 300px;

margin:10px;

padding:5px;

font-size:12px;

line-height:25px;

}

#father {

width: 500px;

margin: 50px auto;

border:1px #666 solid;

padding:10px;

}

#first {

background-color:#FC9;

border:1px #B55A00 dashed;

}

#second {

background-color:#CCF;

border:1px #0000A8 dashed;

}

#third {

background-color:#C5DECC;

border:1px #395E4F dashed;

}

相對定位

relative屬性值

相對自身原來位置進行偏移

偏移設(shè)置：top、left、right、bottom可以用left來描述盒子向右移動；

可以用right來描述盒子向左的移動；

可以用top來描述盒子向下的移動；

可以用bottom來描述盒子的向上的移動；

如果是負數(shù)就是相反的方向。

相對定位的盒子，不脫離標準流，老家保留位置，其后的元素不能占用其原有位置。

相對定位的主要用途是作為其內(nèi)部元素絕對定位時的參照標準，有相對于我之義。

position屬性

第一個盒子

第二個盒子

第三個盒子

@charset "gb2312";

div {

width: 300px;

margin:10px;

padding:5px;

font-size:12px;

line-height:25px;

}

#father {

width: 500px;

margin: 50px auto;

border:1px #666 solid;

padding:10px;

}

#first {

background-color:#FC9;

border:1px #B55A00 dashed;

position:relative;

top:10px;

left:50px;

}

#second {

background-color:#CCF;

border:1px #0000A8 dashed;

}

#third {

background-color:#C5DECC;

border:1px #395E4F dashed;

}

絕對定位

absolute屬性值

偏移設(shè)置： left、right、top、bottom

使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素” 為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。絕對定位的元素從標準文檔流中脫離，其后的元素會占據(jù)其原有的位置。

以上是“html5定位的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：html5定位的示例分析
網(wǎng)站鏈接：http://chinadenli.net/article48/gsgiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站維護、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)