div標(biāo)簽定位樣式設(shè)置技巧是怎樣的

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)div標(biāo)簽定位樣式設(shè)置技巧是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁(yè)上會(huì)占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。

<div>標(biāo)簽定位樣式設(shè)置技巧

<div>標(biāo)簽被廣泛地應(yīng)用在網(wǎng)頁(yè)布局的相關(guān)設(shè)置上，CSS的幾個(gè)重要屬性提供了這方面的支持，例如float、overflow或是text-align等。適當(dāng)?shù)脑O(shè)計(jì)與套用樣式屬性，可以讓我們有效率地完成網(wǎng)頁(yè)布局的工作。

在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁(yè)上會(huì)占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。它主要的功能是定義對(duì)象在網(wǎng)頁(yè)上的浮動(dòng)位置，可能的屬性值有兩個(gè)：left與right，指定<div>靠左或靠右對(duì)齊。指定了這個(gè)屬性的<div>標(biāo)簽后，會(huì)自動(dòng)配置在同一行并且往左邊或是右邊靠攏，以下面的標(biāo)簽設(shè)置為例：

<divstyledivstyle="height:127px;background:black">  </div><divstyledivstyle="width:155px;height:336px;float:left;background:gray">  </div><divstyledivstyle="width:155px;height:336px;float:right;background:gray">  </div>

第1個(gè)標(biāo)簽未指定float，因此它占據(jù)了網(wǎng)頁(yè)最上方單一列的空間，第2及第3個(gè)<div>標(biāo)簽則緊接著在下面的位置，靠左及靠右配置，結(jié)果頁(yè)面如下：

除了指定float屬性，我們還可以通過(guò)嵌套式<div>標(biāo)簽的配置來(lái)達(dá)到<table>標(biāo)簽的效果。以一個(gè)3行&times;3列的表格為例，所需的<div>標(biāo)簽如下：

<divstyledivstyle="width:auto;height:79px"> <divstyledivstyle="width:100px;height:100px;  float:left;background:red"> </div><divstyledivstyle="width:100px;height:100px;  float:left;background:blue"> </div></div><divstyledivstyle="width:auto;height:79px"> <divstyledivstyle="width:100px;height:100px;float:left;  background:yellow"> </div><divstyledivstyle="width:100px;height:100px;float:left;  background:green"> </div></div><divstyledivstyle="width:auto;  height:79px"> <divstyledivstyle="width:100px;height:100px;  float:left;background:black"> </div><divstyledivstyle="width:100px;  height:100px;float:left;background:gray"> </div> </div>

這段標(biāo)簽得到以下的頁(yè)面結(jié)果：

float屬性決定<div>區(qū)塊在網(wǎng)頁(yè)上的位置，如果要定義<div>區(qū)塊內(nèi)容元素的位置，則必須使用另外一個(gè)名稱為text-align的屬性。其中比較重要的屬性值有l(wèi)eft、right和center，使用這些屬性值，可以讓<div>內(nèi)容達(dá)到靠左、靠右或居中的效果。以下面的標(biāo)簽設(shè)計(jì)為例，3個(gè)<div>標(biāo)簽設(shè)置了不同的text-align屬性值。

<divstyledivstyle="width:auto;height:100px;text-align:left">  ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>  <divstyledivstyle="width:auto;height:100px;text-align:right">  ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>  <divstyledivstyle="width:auto;height:100px;text-align:center">  ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

巧用<div>標(biāo)簽搭配CSS樣式，可以讓我們達(dá)到所要呈現(xiàn)的網(wǎng)頁(yè)布局效果。當(dāng)你了解這些技巧之后，接下來(lái)就是根據(jù)自已的需求設(shè)計(jì)網(wǎng)頁(yè)版面。結(jié)束這一節(jié)的討論之前，還有一點(diǎn)要提醒讀者，CSS除了能有效地將樣式的設(shè)計(jì)從網(wǎng)頁(yè)內(nèi)容中分割出來(lái)、讓HTML標(biāo)簽專注在內(nèi)容的表示之外，最重要的一點(diǎn)是，它還能提升網(wǎng)頁(yè)加載的速度。當(dāng)用戶瀏覽網(wǎng)頁(yè)的時(shí)候，相關(guān)的CSS樣式文件只會(huì)加載一次，然后儲(chǔ)存在緩存中，當(dāng)下一個(gè)請(qǐng)求被傳送到服務(wù)器的時(shí)候，所需的CSS樣式文件則是直接從高速緩存中取出的。而未使用樣式文件的網(wǎng)頁(yè)則必須將整個(gè)網(wǎng)頁(yè)重載，你可以想象這兩者的性能差異，這也是不建議使用<table>標(biāo)簽設(shè)計(jì)布局的原因之一。

上述就是小編為大家分享的div標(biāo)簽定位樣式設(shè)置技巧是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。