对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素等的时候,才深刻明白自己也就一知半解,接下来不说display各种参数的使用方法,而是谈谈display形成的各种盒模型
display
指定了元素的显示类型,包含两种用于指定元素怎样生成盒模型 => 决定了布局的方式,直接影响height
- 外部显示类型:
display:block
|display:inline
- 内部显示类型:
display:flow
|display:table
|display:flex
- 外部div的高度,由其内部的文档流元素的高度总和决定,并不是相等
我的个人的看法是外部显示类型主要是指在整个文档流当中此div的状态,而内部显示类型就是此div里面的内容布局,(例如现在经常使用的flex,就是此div内部的各个元素根据flexbox模型展示)
文档流
- 如果是内联元素,文档流流动方向从左到右布局,宽度不够,换行继续流
- 如果是块级元素,文档流流动方向从上到下布局,一个block占据一行,依次向下布局,即使一个块宽度不足以达到总宽度
内联元素inline
- 也叫行内元素,一个行内元素只占据它对应标签的边框所包含的空间
- 常见行内元素:
<a></a> | <abbr></abbr> | <em></em> | <strong></strong> | <span></span> | <img> | <script></script> | <label></label>
- 特点:
- 元素从左到右流动布局
- 元素的height、width、margin-top、margin-bottom不可设置
- 元素的高度就是它自身的建议行高 =>content-area的高度
- 注意点:内联元素设置行高会有位置的变化,但没有改变盒子大小(在为内联元素设置背景时,默认高度的地方有背景),inline-box行内框高度=content area内容的高度,特殊内联元素除外!!!
- 内联元素转块级元素:display:block
块级元素block
- 块级元素占据其父元素容器的整个空间
- 常见块级元素:
<div></div> | <address></address> | <article></article> | <audio></audio> | <canvas></canvas> | <dd></dd> | <dl></dl> | <footer></footer> | <form></form> | <hr> | <header></header> |<h1>-<h6> | <ol></ol> | <p></p> | <section></section> | <table></table> | <ul></ul> | <video></video>
- 特点:
- 每个块级元素都从新的一行开始
- 元素的height、width、line-height、margin-top、margin-bottom都可以设置
- 元素width在不设置的情况下,是它本身父容器的100%(除非设定一个宽度)
- 块级元素转内联元素:display:inline
内联块级元素inline-block =>特殊的内联元素
- 替换元素,如 img / input / svg 等
- inline-block 元素,以及所有 display 值以 inline- 开头的元素,如 inline-table / inline-flex
- 处于某种特殊格式化上下文的内联元素,例如 flexbox 元素中的子元素都处于 flex formatting context(弹性格式化上下文)中
- 特点:
- 元素的height、width、line-height、margin-bottom、margin-top都可以设置
- 行框line-box和content-area的高度可被改变
对于内联块级元素,我在看很多材料的时候,都发现很多人将其归类于内联元素或者行内元素中,则让我一度产生了很深的疑惑,为什么内联元素一会儿可以改变line-height一会儿不可以的,如果将其说成是内联块级元素,我相信很多初学者就会恍然大悟了,特别是针对替换元素,就不至于一脸懵逼两脸懵圈了~