有的時(shí)候我們就想把某張圖片放在一個(gè)位置上死宣,能改變位置的有margin絮重、padding痕檬、text-align霎槐、float。但是這些太麻煩了梦谜,而且用了margin或者padding后它自己就要占據(jù)好大的地方丘跌,這時(shí)候我們就要用到position了。
實(shí)例:
<img src="http://i03.pic.sogou.com/7e35a5be5ef96ed5" style="position: absolute; top: 100px; left:100px">
position: absolute 這句代碼的意思是給圖片設(shè)置為絕對(duì)定位唁桩。后面的top:100px;和left:200px;的作用就是我想讓它放在距離上邊100像素距離左邊200像素的地方闭树。當(dāng)然也可以使用right和bottom來設(shè)置你想要的位置。
div:可定義文檔中的分區(qū)或節(jié)荒澡”ㄈ瑁可以把文檔分割為獨(dú)立的、不同的部分单山。簡單說法:就比如我們?yōu)g覽新聞網(wǎng)站的時(shí)候碍现,它上面有政治新聞幅疼、娛樂新聞、體育新聞等昼接。它們都屬于不同的類型爽篷。所以程序員制作網(wǎng)頁的時(shí)候都是把它們分成幾大部分。那么<div>呢慢睡,就是用來給網(wǎng)頁分塊布局的逐工。
實(shí)例:
<div style='border:solid 1px; position: absolute; top: 1px; left: 20px '>
<h3> this is a header.</h3>
<p>this is a paragraph.</p>
</div>
現(xiàn)在<h3>和<p>元素的父元素就從原來的整個(gè)瀏覽器變成<div>了。這就是<div>的作用漂辐,現(xiàn)在它就把它里面的內(nèi)容就分成了網(wǎng)頁中的一部分泪喊。
呢,就是用來給網(wǎng)頁分塊布局的者吁。