有的时候我们就想把某张图片放在一个位置上,能改变位置的有margin、padding、text-align、float。但是这些太麻烦了,而且用了margin或者padding后它自己就要占据好大的地方,这时候我们就要用到position了。
实例:
<img src="http://i03.pic.sogou.com/7e35a5be5ef96ed5" style="position: absolute; top: 100px; left:100px">
position: absolute 这句代码的意思是给图片设置为绝对定位。后面的top:100px;和left:200px;的作用就是我想让它放在距离上边100像素距离左边200像素的地方。当然也可以使用right和bottom来设置你想要的位置。
div:可定义文档中的分区或节。可以把文档分割为独立的、不同的部分。简单说法:就比如我们浏览新闻网站的时候,它上面有政治新闻、娱乐新闻、体育新闻等。它们都属于不同的类型。所以程序员制作网页的时候都是把它们分成几大部分。那么<div>呢,就是用来给网页分块布局的。
实例:
<div style='border:solid 1px; position: absolute; top: 1px; left: 20px '>
<h3> this is a header.</h3>
<p>this is a paragraph.</p>
</div>
现在<h3>和<p>元素的父元素就从原来的整个浏览器变成<div>了。这就是<div>的作用,现在它就把它里面的内容就分成了网页中的一部分。
呢,就是用来给网页分块布局的。