深入理解display属性

Posted 2020-08-09 甜甜宝宝

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、支持宽高