深入理解display属性

Posted 甜甜宝宝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解display属性相关的知识,希望对你有一定的参考价值。

display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block、none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面

定义

display 属性用于规定元素生成的框类型,影响显示方式

值:none | inline | block | inline-block | list-item 

默认值:inline

ie7- 浏览器不知其table类属性值

1、block

    特征:a、不设置宽度时,宽度撑满一行   b、独占一行   c、支持宽高

    不支持的样式  vertical-align

2、inline

      特征: a、内容撑开宽度  b、不是独占一行  c、不支持宽高  4、代码换行被解析成空格

   不支持的样式:background-position  clear  clip  height | max-height | min-height | width | max-width | min-width| overflow | text-align  |text-indent | text-overflow 

3、inline-block

       特征:a、不设置宽度时,内容撑开宽度  b、不是独占一行  3、支持宽高  4、代码换行被解析成空格

不支持的样式:clear

IE兼容性:IE7-浏览器不支持块级元素设置inline-block 样式,解决方法:将其变为行内元素,使其具有行内元素的特性,然后触发haslayout,使其具有块级元素的特性,这样就可以模拟出inline-block的效果

4、none

 特性:隐藏元素并脱离文档流

5、list-item

特性:a、不设置宽度时,宽度撑满一行  b、独占一行  c、支持宽高

以上是关于深入理解display属性的主要内容,如果未能解决你的问题,请参考以下文章

深入理解display属性

深入理解display属性

深入理解和应用display属性

深入理解和应用display属性

深入理解CSS元素可见性visibility

深入理解CSS弹性盒模型flex