深入理解display属性——前端布局常用重要属性

2018-06-24 01:58:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

小注:display属性在网页布局中非常常见,但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面

定义

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

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

初始值: inline

应用于: 所有元素

继承性: 无

[注意]IE7-浏览器不支持table类属性值及inherit

分类

block

【特征】

[1]不设置宽度时,宽度为父元素宽度

[2]独占一行

[3]支持宽高

【不支持的样式】

[1]vertical-align

inline

【特征】

[1]内容撑开宽度

[2]非独占一行

[3]不支持宽高

[4]代码换行被解析成空格

【不支持的样式】

[1]background-position

[2]clear

[3]clip

[4]height | max-height | min-height

[5]width | max-width | min-width

[6]overflow

[7]text-align

[8]text-indent

[9]text-overflow

inline-block

【特征】

[1]不设置宽度时,内容撑开宽度

[2]非独占一行

[3]支持宽高

[4]代码换行被解析成空格

【不支持的样式】

[1]clear

none

【特征】

隐藏元素并脱离文档流

list-item

【特征】

[1]不设置宽度时,宽度撑满一行

[2]独占一行

[3]支持宽高

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于移动端元素定位在页面可视区外,超出部分隐藏的问题

下一篇:【前端】自适应布局方法总结