CSS中 inline、block、inline-block的区别

时间  2019-11-07
标签 css inline block 区别 栏目 CSS 繁體版
原文   原文链接

咱们用firbug浏览别人网站时会发现设计者会在不少地方使用inline-block。咱们都知道inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来作个测试，让咱们了解一下三者的区别和做用吧： html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>inline、block、inline-block的区别</title>
<style>
.a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
</head>
<body>
<spanclass="a">
inline
</span>inline
<spanclass="b">
block
</span>block
<spanclass="c">
inline-block
</span>inline-block
</body>
</html>

咱们发现内联对象inline给它设置height和width是没有用的，导致它变宽变大的缘由是内部元素的宽高+padding。观察inline对象的先后元素咱们会发现Inline不单独占一行，其它元素会紧跟其后。 测试

块对象block是能够设置宽高的，可是它的实际宽高是自己宽高+padding。观察block的先后元素咱们会发现block要单独占一行。 网站

当看到这里的时候咱们就会想，若是咱们即须要div有宽高，又不但愿它独占一行怎么办？ ui

这个时候咱们就须要使用inline-block了，再观察一下上图，咱们会发现inline-block即具备block的宽高特性又具备inline的同行元素特性。 spa

 

最后提醒一下，IE6/7下padding对inline的宽高是对其没影响的。看下图： 设计

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程