【专题】display: inline | block | inline-block;

来源:互联网 发布:js给div的value赋值 编辑:程序博客网 时间:2024/05/29 12:56

1.inline/block/inline-block区别?
①display: inline;代表的是行内元素的默认样式。如:span/a/i/input/b/img/strong/em/label等。

②display: block;代表的是块级元素的默认样式。如:div/h1-h6/table/ul/li/form/p等。

③display: inline-block代表的是具有高度和宽度的行内元素。
这里写图片描述

2.从width/height/padding/margin四个方面进行比较。

2.1—width

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

2.2—height

这里写图片描述

这里写图片描述

这里写图片描述

2.3—padding

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

2.4—margin

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

【参考】
http://learnlayout.com/inline-block.html
https://segmentfault.com/q/1010000000454062
https://www.computerhope.com/issues/ch001717.htm

原创粉丝点击