block，inline和inline-block概念和区别（转）

时间 2019-11-30

标签 block inline 概念区别繁體版

原文原文链接

整体概念

根据CSS规范的规定，每个网页元素都有一个display属性，用于肯定该元素的类型，每个元素都有默认的display属性值，好比div元素，它的默认display属性值为“block”，称为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
行内元素指的是书写完成后不会自动换行，而且元素没有宽和高。
块级元素写完后会自动换行，有宽高能够修改。

还有一种特殊的元素叫作行内块元素。

大体分类是：

行内元素有：title span br a style em b i strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo

块级元素有：body form textarea h1-h6 html table button hr p ol ul dl center div pre noscript blockquote fieldset address

行内块元素常见的有： img input td select textarea label

block, inline, inline-block细节对比

display：block

block元素能够包含block元素和inline元素，块级元素通常做为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素；p 元素，只能包含inline元素，而不能包含block元素，也有一些块级元素既能够包含块级，也能够包含行级元素。
block元素会独占一行，多个block元素会各自新起一行。默认状况下，block元素宽度自动填满其父元素宽度。
block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。当只设置了height属性时，则width默认是其父类元素的宽度。
block元素能够设置margin和padding属性。

display：inline

inline元素只能包含inline元素。
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效，若是你要改变内联元素的行高即相似文本的行间距，那么你只能使用这三个属性：line-height，font-size，vertical-align。若想给inline元素设置宽高属性，则可以使用如下两种方法（下面的方法是我我的收集的，若有不对，但愿你们能够指出）

将inline元素转换为块级元素后就均可设置了，即添加CSS样式时，加上”display:block;“这句话。
将该inline元素的position设置为absolute或fixed，这样子它就具备块级元素的属性了。

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，注意元素范围是增大了，可是对元素周围的内容是没影响的。

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
border:0;
}
.a1{
background:pink;
margin-top:30px;
margin-bottom: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
.div1{
width: 100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<a class="a1">CSDN</a>
<div class="div1"></div>
</body>
</html>

运行结果以下左图所示：

查看元素时，可看到右图的效果，在右图中，紫色部分为内边距，紫色下面的黄色部分是外边距，但它们二者并不起做用，块级元素div仍紧挨着元素a的底部，因此这就是元素范围是增大了，可是对元素周围的内容是没影响的。

display：inline-block

简单来讲就是将对象呈现为inline对象，可是对象的内容做为block对象呈现。以后的内联对象会被排列在同一行内。好比咱们能够给一个link（a元素）inline-block属性值，使其既具备block的宽度高度特性又具备inline的同行特性。
能够设置margin和padding属性。

文中不少内容都是参考前辈的，添加了一点点本身写的内容。由于本身仍是菜鸟，因此写不出像前辈们那么优秀的文章，并且要是仅仅依靠我我的的经验去写，我怕写出来的文章会误导你们，不过我会继续努力的！

参考网址： http://www.javashuo.com/article/p-zfyowszx-hm.html