前端培训之position 和 display 的取值和各自的意思和用法

发布时间:2020年02月18日作者:atguigu浏览次数:854

position:

      position属性取值:static(默认)、relative、absolute、fixed、inherit、sticky。

  1. static: 没有定位,正常状态下。可以快速取消定位,让top、right、bottom、left 失效

  2. relative: 相对于其在正常流中的位置偏移,原本占据的空间依然会保留

  3. absolute: 相对于第一个position属性不为static的父类定位,会脱离正常文档流,不占据空间位置。

  4. fixed: 定位原点相对于浏览器窗口,而且不能变。

  5. inherit: 从父类继承position属性的值,但是任何版本的IE都不支持该属性

  6. sticky: 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置,这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。

  7. 最后说一点,z-index属性是针对以上定位属性而出现的,它只在定位元素上有效。

display

      display属性取值:none、inline、inline-block、block、flex、inherit。

     1、display:none和visiability: hidden 都可以隐藏div,前者不占据文档的空间,后者占据文档的位置。

    2、 inline: 行内元素,以水平方式布局,垂直方向的margin和padding都是无效的,大小和内容一样,且无法设置宽高。

    3、 block: 块元素,独占一行,可以使用margin来控制元素之间间距

    4、 inline-block: 既具有block的宽度高度特性又具有inline的同行特性。

    5、display: flex 意为”弹性盒布局模型”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用flex布局的元素,称为flex容器。它的所有子元素自动成为容器成员,称为flex项目(flex item)。

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)