div是帶著(zhe)霸道(dào)基因出生的（不明白的請先看完上一篇哦），其實它主要是還(hái)沒(méi)有碰上能(néng)征服它的你吧！哈哈……今天帶大家來把他拿下。

好(hǎo)吧，我承認“附加樣(yàng)式”這(zhè)個詞不知道(dào)是從哪兒看的還(hái)是我自己這(zhè)麼(me)叫(jiào)的，我們之後(hòu)就分爲樣(yàng)式和默認樣(yàng)式吧。

一、矩形排排坐

乃們還(hái)記得下面(miàn)這(zhè)張圖嗎？

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

他們真的是很霸道(dào)呢，不過(guò)在html界，霸道(dào)的多了去了，今天我們先來把它收拾一下吧。

在body内畫兩(liǎng)個矩形：

<div style="width: 100px; height: 100px;background-color: yellow;"></div>

<div style="width: 100px; height: 100px;background-color: blue;”></div>

（PS：html裡(lǐ)的顔色也是直接可以寫單詞的，不想寫顔色值的童鞋也可以直接寫pink、black、red……等平時知道(dào)的一些顔色英文單詞。上一節中忘了告訴大家，顔色值3位和6位都(dōu)是可以的，例如：

#333333，#4ed……都(dōu)行，要問爲什麼(me)的話還(hái)要扯上進(jìn)制，我就不再贅述，你們記得就行了。）

然後(hòu)保存，浏覽器打開(kāi)，即可看到：

那爲了讓藍色矩形排在黃色矩形右邊讓他們排成(chéng)一橫排的話，首先讓黃色矩形讓個位置，“靠邊站”，

在第一個矩形中加入一條新樣(yàng)式：float：left；（即向(xiàng)左靠，遵循我們的寫字習慣從左往右排吧，你也可以試試向(xiàng)右靠）

然後(hòu)……

啊嘞？怎麼(me)隻剩一個了！！！

待我給你慢慢道(dào)來……

嗯，你問我講這(zhè)個幹嘛？再教你一個屬性：opacity（透明度），其後(hòu)跟的是小數，0.5即表示50%透明度。

<div style="width: 100px; height: 100px;background-color: yellow;float:left; opacity:0.5;”></div>

<div style="width: 100px; height: 100px;background-color: blue;”></div>

然後(hòu)保存刷新：

如果你去驗證了，你會發(fā)現這(zhè)個顔色就是我們在PS裡(lǐ)降低黃色透明度與藍色相交得到的顔色。也就是說：

是的，沒(méi)錯，藍色矩形被(bèi)黃色矩形遮住啦。（下面(miàn)我們簡稱兩(liǎng)個矩形爲小藍和小黃）

至于爲什麼(me)會被(bèi)遮住，這(zhè)是跟float這(zhè)個屬性相關的。float直譯過(guò)來即是浮動的意思，也就是添加了float屬性的小黃實際上是浮起(qǐ)來了，所以原先它“站”的位置就空了，小藍“篡位”而上占據了小黃

原來的位置。就像圖層一樣(yàng)，上面(miàn)的圖層會遮住與它自身一樣(yàng)大小的面(miàn)積，所以後(hòu)來的小藍永遠不能(néng)與小黃“平起(qǐ)平坐”（嗚嗚嗚……你是我無法企及哒）。但是你光在藍色矩形上加浮動屬性又沒(méi)有用

，div天生的霸道(dào)基因不允許……不信你試試，哈哈……

那麼(me)問題來了，想排排坐，又不想被(bèi)小黃踩在腳下，怎麼(me)辦呢？

隻有把小藍也提起(qǐ)來咯。

所以兩(liǎng)個矩形都(dōu)應該加float屬性，這(zhè)樣(yàng)他們才處于同一層，

<div style="width: 100px; height: 100px;background-color: yellow;float:left; ”></div>

<div style="width: 100px; height: 100px;background-color: blue;float:left; ”></div>

好(hǎo)啦，可以自己嘗試多畫點大小不一的矩形，讓他們排一下，不過(guò)不是所有的都(dōu)能(néng)好(hǎo)好(hǎo)排的。在html中，body的大小雖然是無限的，可是你的屏幕也隻能(néng)顯示那麼(me)點東西做再寬有什麼(me)意義呢。除了現在

很流行的滿屏網頁，一般網頁都(dōu)會規定寬度而不會規定高度。你可能(néng)經(jīng)常見到有豎滾動條的網頁，但是橫向(xiàng)滾動條的幾乎沒(méi)有（除非你的設備屏幕小于一般PC屏幕或者把網頁放大了幾倍等其他原因），

所以也可以說網頁大小是和你浏覽器顯示區域有關。

所以許多網站會取一個多種(zhǒng)屏幕都(dōu)适用的内容寬度，也就是做webUI時你留的有效内容區域（常見的有1200px、1001px等）。開(kāi)發(fā)人員會根據你的尺寸來确定一個最大寬度來排版。

多畫幾個高度一樣(yàng)寬度不一的矩形，爲它們都(dōu)加上向(xiàng)左浮動的屬性（float：left；）縮小你的浏覽器寬度，你會發(fā)現，它們不會一直呆在第一排，有時候竟會換行。當最右邊的距離不足以放下它，他就

會選擇換一行。這(zhè)也是現在響應式網站的奧妙之一，同一個網頁，PC和手機都(dōu)可以浏覽，且布局會有所改變但不影響内容。如下圖：

你猜紅色的是不是在發(fā)現沒(méi)有位置了換到第三行而變成(chéng)了手機上看到的頁面(miàn)那樣(yàng)？(*^__^*)

所以float這(zhè)個屬性是html中非常重要的一個屬性，花的篇幅比較長(cháng)。所以今天其實就講了float一 個東西，透明度（opacity）和顔色那些順帶提一下。仿網頁排版布局今天就不講了，下次更新講排版！

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。