首页 > 代码库 > 深入理解display属性
深入理解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属性