关闭

【CSS】block,inline和inline-block细节对比

标签: css
184人阅读 评论(0) 收藏 举报
分类:

• display: block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

  2. block元素可以设置width, height属性。块级元素即使设置了宽度,仍然是独占一行。

  3. block元素可以设置marginpadding属性。


• display: inline

  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width, height属性无效。
  3. inline元素marginpadding属性,水平方向的padding-left,
    padding-right,margin-left,margin-right都产生边距效果;但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。

• display: inline-block

  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36937次
    • 积分:1601
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:25篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论