您的位置：首页 > Web前端 > CSS

inline-block-inline-block的简单区别

2016-07-11 20:58 211 查看

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

1、block

display:block就是将元素显示为块级元素.

block元素的特点是：

块级元素只能出现在 <body> 元素内。
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；


主要的块级元素：



2、inline

display:inline就是将元素显示为行内元素.

inline元素的特点是：

一般情况下，行内元素只能包含数据和其他行内元素；
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；


主要的行内元素：



在以下情况下需要在inline和block之间切换（display：…):

让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。


3、inline-block

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航