美文网首页CSS饥人谷技术博客
display属性的知识点+实例解读

display属性的知识点+实例解读

作者: 犯迷糊的小羊 | 来源:发表于2016-05-15 10:13 被阅读190次

display属性在前端中大致分为html dom display属性和css display属性。本文主要讲解css display属性,对于html dom display属性会略加提点。


  • display属性规定元素生成的显示框类型,常用于页面布局,比较常见的属性值包括none、block、inline和inline-block

关于block、inline和inline-block的知识点,详见teren君的技博:管窥——块级元素与行内元素

  • display:none在css中规定隐藏元素并不为其保留物理空间

关于display:none、visibility:hidden和opacity:0的知识点,详见teren的技博:实现html隐藏效果的三剑客

  • display:block规定元素以块级元素形式显示,可以设置宽高,但排斥其他元素与其同行
  • display:inline规定元素以行内元素形式显示,无法设置宽高,可与其他行内元素同行
  • display:inline-height规定元素以可设置宽高的行内元素显示
    具体演示效果如下:

  • html dom display属性通常用于html和js的互动,如在js定义移除元素的函数,具体代码及演示效果如下:

  • 常见的display属性:

参考资料:

相关文章

  • display属性的知识点+实例解读

    display属性在前端中大致分为html dom display属性和css display属性。本文主要讲解...

  • CSSalign-items属性

    CSSalign-items属性 实例 居中对齐弹性盒的各项 元素: div{ display: flex;...

  • CSS中的display属性总结

    主要写一些笔者在学习display 属性时遇到的知识点,文末会添加一些拓展阅读。 display:block 常用...

  • 行内元素,块级元素

    1.每个元素都具有display属性,块级元素display属性一般为:block,而行内元素display属性一...

  • display属性

    block 将元素设置为块元素:一个元素霸一行,可调制行高、宽度 inline 将元素设置为行内元素,能够跟在行内...

  • display 属性

    none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此...

  • display属性

    遇到的坑

  • 【CSS显示display】

    display属性 浮动、定位对display的影响; 行元素与块元素默认的display类型; 属性类型: di...

  • display的属性

    block: 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行none: 隐藏对象。与 visib...

  • 前端布局学习指南

    基础知识点 网页布局受三大因素影响 display float position 下面是每个属性对应的不同值 方法...

网友评论

本文标题:display属性的知识点+实例解读

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