display的不同-慕课网

首页课程实战体系课手记专栏慕课教程

display的不同

来源：12-4 我还要站个大位置 - 内联块状元素

CHIOWENGKUEN

2016-04-21 15:44

display：block 和 display：inline-block 有什么不同？？

写回答关注

6回答

慕容2892691

2016-04-21 15:56:38

已采纳

block块状元素要另起一行，长高间距可自行设置，inline-bloc内联联块状都在一行，长高间距也可以自行设置，他们不设置的情况下是它父容器的·100%

1 1

司禄德

inline-block不设置宽高的情况下，文字或图片的宽度高度就是它的宽度高度，不是父容器的100%

2016-05-26 16:46:10

共 1 条回复 >
夏了秋天

2016-04-21 16:15:50

display:block 就是将元素显示为块级元素，总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性。

0 1
慕粉3229190

2016-04-21 16:03:51

block块状元素要另起一行，长高间距可自行设置，inline-bloc内联联块状都在一行，长高间距也可以自行设置，他们不设置的情况下是它父容器的·100%

0 0
CHIOWENGKUEN

2016-04-21 15:55:24

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
span{
    display:block;
    width:100px;
    height:200px;
}
</style>
</head>
<body>
    <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
    <strong>强调</strong>
</body>
</html>

我用block写出来宽度和高度都变，用inline-block只变宽度，不变高度，为什么？？

1 0

forlee

你设置background:pink，就能看出来了

2016-06-23 13:49:56

共 1 条回复 >
我就是天

2016-04-21 15:53:19

display:inline 转化成内联元素，不换行；display:block转换成块元素，换行；

0 1
野生叉烧

2016-04-21 15:51:14

block是另起一行的块状元素；inline-block不是另一起一行的，文字的高度和宽度就是他的高度和宽度。

0 0