您的位置：首页 > 其它

display:block,inline和inline-block的区别

2013-08-11 01:54 274 查看
display:block是块级元素

可以控制高度，行高，边距

宽度缺省是它的容器的100%，除非设定一个宽度

demo：

<!DOCTYPE html>
<html>
<body>
<div style="width:200px;">
<div style="border:1px solid red">aaaa</div>
</div>
</body>
</html>


display：inline是行内元素

和其他元素都在一行上；

　　 高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

demo：

<!DOCTYPE html>
<html>
<body>
<div style="width:200px;display:block">
<div style="display:inline;border:1px solid red">aaaa</div>
</div>
</body>
</html>


display:inline-block简单来说就是表现行内元素的块级元素，可以设置高度，宽度，但是和其他行内元素会在同一行显示

demo:

<!DOCTYPE html>
<html>
<body>
<div style="display:inline-block;width:200px;border:1px solid red">aaaa</div>
<div style="display:inline-block;width:200px;border:1px solid red">aaaa</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航