块元素,行元素,行内块

块元素
<address> <blockquote> <dd> <div> <dl> <fieldset> <form> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <hr> <noscript> <ol> <p> <pre> <table> <tfoot> <ul>

以及html5语言的

<article> <aside> <audio> <canvas> <figcaption> <figure> <footer> <header> <hgroup> <output> <section> <video>

特点:

  • 独占一行
  • 高度、宽度、内外边距可控
  • 可以容纳内联元素和其他块元素
行内元素
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

特点:

  • 一行内显示多个标签
  • 宽、高设置时无效的
  • 只能容纳文本和其他行内元素
  • 默认宽度即本身内容的宽度
行内块元素
<img> <input>

特点:

  • 具有行内元素的特定,一行可以设置多个
  • 具有块元素的特定,可以设置高度和宽度
相互转换

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

猜你喜欢

转载自blog.csdn.net/Tdburongke/article/details/114577755