美文网首页
html + CSS学习笔记 5. position关键字 +

html + CSS学习笔记 5. position关键字 +

作者: lain355 | 来源:发表于2017-07-19 09:14 被阅读0次

有的时候我们就想把某张图片放在一个位置上,能改变位置的有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>的作用,现在它就把它里面的内容就分成了网页中的一部分。


呢,就是用来给网页分块布局的。

相关文章

网友评论

      本文标题:html + CSS学习笔记 5. position关键字 +

      本文链接:https://www.haomeiwen.com/subject/ldwphxtx.html