                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

display的不同

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

CHIOWENGKUEN

2016-04-21

源自：初识HTML(5)+CSS(3)-升级版 12-4

关注问题我要回答

776

操作

收起

6 回答

慕容2892691 回答被采纳 +3 积分
2016-04-21

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

1 回复有任何疑惑可以回复我~

收起回答

司禄德

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

2016-05-26 回复有任何疑惑可以回复我~

夏了秋天
2016-04-21

display:block 就是将元素显示为块级元素，总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性。

1 回复有任何疑惑可以回复我~

收起回答

慕粉3229190
2016-04-21

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

0 回复有任何疑惑可以回复我~

收起回答

CHIOWENGKUEN 提问者
2016-04-21

<!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>