美文网首页
inline,block,inline-block

inline,block,inline-block

作者: 王绘的名字被注册了 | 来源:发表于2018-06-11 09:21 被阅读0次

display有很多属性,常见的属性有block,inline,inline-block
1.块框( block box)是定义为堆放在其他框上的框(例如:其内容会独占一行),而且可以设置它的宽高,之前所有对于框模型的应用适用于块框 ( block box)
2.行内框( inline box)与块框是相反的,它随着文档的文字(例如:它将会和周围的文字和其他行内元素出现在同一行,而且它的内容会像一段中的文字一样随着文字部分的流动而打乱),对行内盒设置宽高无效,设置padding, margin 和 border都会更新周围文字的位置,但是对于周围的的块框( block box)不会有影响。
3.行内块状框(inline-block box) 像是上述两种的集合:它不会重新另起一行但会像行内框( inline box)一样随着周围文字而流动,而且他能够设置宽高,并且像块框一样保持了其块特性的完整性,它不会在段落行中断开。(在下面的示例中,行内块状框会放在第二行文本上,因为第一行没有足够的空间,并且不会突破两行。然而,如果没有足够的空间,行内框会在多条线上断裂,而它会失去一个框的形状。)

注意:默认状态下display属性值,块级元素display: block ,行内元素display: inline

例子:

display

相关文章

网友评论

      本文标题:inline,block,inline-block

      本文链接:https://www.haomeiwen.com/subject/yjeceftx.html