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

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




















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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,870评论 0 6
  • 去年通过学习把时间当做朋友和通往财富自由之路,突然明白了原来有学习没成长是因为满足于在头脑层面上打转,没有践行。懂...
    嘉妈阅读 1,261评论 0 1
  • 2017.07.05 此时窗外下着小雨,我的案前放着一盘女儿小美的做的鲜切水果,刚刚在小组群分享了与金刚智慧结缘的...
    花开见佛笑阅读 2,844评论 0 3