HTML 行内元素和块级元素

行内元素(inline elements)和块级元素(block-level elements)

  1. 行内元素:a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等
  2. 块级元素:address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等

    • 兼容性:display:inline-block;*display:inline;*zoom:1;
    • 行内元素:会在水平方向排列,不能包含块级元素,设置width、height无效(可以设置line-height),margin、padding上下无效。
    • 块级元素:各占据一行,垂直方向排列,可以包含行内元素。
    • 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

CSS display 属性的常用值:

  • none // 此元素不会被显示
  • block // 此元素将显示为块级元素,此元素前后会带有换行符
  • inline // 默认。此元素会被显示为内联元素,元素前后没有换行符
  • inline-block // 行内块元素,既具有block的宽度高度特性又具有inline的同行特性
  • http://www.w3school.com.cn/cssref/pr_class_display.asp

补充:

  • display 属性规定元素应该生成的框的类型,可以通过display:inline和display:block或者display:inline-block改变元素的框的类型。
  • 默认情况下,block元素宽度自动填满其父元素宽度。
  • 块级元素即使设置了宽度,仍然是独占一行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值