行内元素和块级元素

行内元素与块级元素区别

  1. 放置方式
    行内元素:一行可以放置多个
    块级元素:一行一个,独成一行
  2. 宽高
    行内元素:由内容决定宽高,设置宽高无效
    块级元素:可以自己设置宽和高,默认宽度是父元素的100%
  3. paddingmargin
    行内元素:对margin设置左右方向有效,而上下无效;padding设置左右方向有效,而上下无效
    块级元素:设置margin和padding都有效
    4.内部子节点
    行内元素:容纳文本或则其他行内元素(特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全)
    块级元素:容纳文本或行内元素或块级元素

特例–行内块元素

常见的行内块元素:
特点:

  1. 一行可以显示多个,但是之间会有空白缝隙
  2. 默认宽度就是它本身内容的宽度
  3. 宽高、paddingmargin都设置

相互转化:

块级元素转行内元素:display:inline

行内元素转块级元素:display:block

块级元素、行内元素转换为行内块级元素:display: inline-block

总结

元素 放置方式 样式 默认宽高 子元素
行内 一行多个 不可以直接设置宽高 内容宽高 文本或是其他行内元素
块级 一行一个 可以直接设置宽高 父元素的100% 任何标签
行内块 一行多个 可以直接设置宽高 内容宽高 一般没有

你可能感兴趣的:(html,css,css,html)