188bet手机版

  • 时间:2019-01-26 01:41 作者:小白前端 来源:小白前端 阅读:138
  • 扫一扫,188bet手机版访问
摘要:不知不觉前台的CSS基础也快接近尾声了,之后我们会进入JavaScript的讲解。新来的童靴们可以翻看以前的文章,小编在升级新知识的同时,也会对讲过的知识进行补充。什么是文档流?将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。CSS定位position 属性允许你对元素进

不知不觉前台的CSS基础也快接近尾声了,之后我们会进入JavaScript的讲解。新来的童靴们可以翻看以前的文章,小编在升级新知识的同时,也会对讲过的知识进行补充。

什么是文档流?

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

CSS定位

position 属性允许你对元素进行定位。

  • static:静态定位,top,right,bottom,left等属性不会被应用。

  • relative:相对定位,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

  • absolute:绝对定位,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

  • fixed:固定定位,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。

静态定位

static,静态定位,也可以说没有给元素定位,设置此属性值的元素不会脱离文档流。

相对定位

relative,相对定位,相对于其正常位置进行定位,设置此属性值的元素不会脱离文档流。

例如:两个div元素

每天一点前台知识,轻松学会前台开发——CSS定位总结

我们给它加一点样式,box1边框为蓝色,box2边框线为红色,

每天一点前台知识,轻松学会前台开发——CSS定位总结

浏览器中显示:

每天一点前台知识,轻松学会前台开发——CSS定位总结

我们给box2增加相对定位,并且相对于位置水平和垂直各偏移20px:

每天一点前台知识,轻松学会前台开发——CSS定位总结

每天一点前台知识,轻松学会前台开发——CSS定位总结

浏览器中效果

我们可以清楚地看到,相对定位是根据它本来在文档流中的位置定位的。

绝对定位

absoulte,绝对定位,根据祖先类元素进行定位,脱离文档流。祖先类元素必需是postion非static方式定位的。

可能童靴们有些不了解,下面举个开发中常见的例子给大家说明一下:

每天一点前台知识,轻松学会前台开发——CSS定位总结

我们设置少量样式,

每天一点前台知识,轻松学会前台开发——CSS定位总结

每天一点前台知识,轻松学会前台开发——CSS定位总结

在浏览器中显示

content_inner是content里面的子元素。我们给content_inner设置绝对定位,content设置相对定位,

每天一点前台知识,轻松学会前台开发——CSS定位总结

每天一点前台知识,轻松学会前台开发——CSS定位总结

在浏览器中显示

content设置relative之后相当于参照物,其下的子元素设置absolute之后依照参照物进行位移。

固定定位

fixed,固定定位,相对于可是屏幕定位,元素脱离文档流。

如下:

给box元素增加样式,设置固定定位:

每天一点前台知识,轻松学会前台开发——CSS定位总结

我们在浏览器中查看,为了查看效果我们增加了少量文字:

每天一点前台知识,轻松学会前台开发——CSS定位总结

童靴们了解了没有,看着文章自己试一试才会了解的透彻。

爱学习的孩子运气不会差哦!

关注小白前台,持续收到文章推送。

[css][css][css][css][css][css][css][css][css][css][css][css][html][html][html][html][html][html][html][html][html][html][html][html][html]

  • 全部评论(0)
188bet下载发布的资讯信息
【系统环境|】你是HTML 5的一员吗?(2019-08-15 11:58)
【系统环境|】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-08-14 17:55)
【系统环境|】零基础小白走Web前端之路是否可行?答案是yes!(2019-08-13 11:44)
【系统环境|】你知道Web前端与HTML5技术的区别吗?(2019-08-12 14:10)
【系统环境|】移动前端开发和web前端开发的区别(2019-08-11 16:49)
【系统环境|】给新手的锦囊:Web前端开发小白的学习建议和路线图(2019-08-10 16:34)
【系统环境|】都说web前端开发薪资高,入行就有上万月薪,转行难吗?(2019-08-09 14:55)
【系统环境|】干货教程 | Web前端开发学习入门指南(2019-08-08 18:27)
【系统环境|】前端开发:vue路由之前端路由的原理(2019-08-07 13:17)
【系统环境|】你不知道的web前端那些事(2019-08-06 12:29)
188bet手机版二维码188bet手机版访问领取大礼包
返回顶部