1、块元素

display:block

常见的块元素有哪些:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素

特点:

  • 自己独占一行
  • 高度,宽度、外边距以及内边距都可以控制
  • 宽度默认是容器(父级宽度)的 100%
  • 是一个容器及盒子,里面可以放行内或者块级元素

2、行内元素

display:inline

常见的行内元素有哪些:

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等,其中 <span> 标签最典型的行内元素,也称内联元素

特点:

  • 相邻行内元素在一行上,一行可以显示多个
  • 高、宽直接设置是无效
  • 只可以设置水平方向的外边距
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或则其他行内元素

3、行内块元素

display:inline-block

特点:

  • 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙,一行可以显示多个。
  • 默认宽度就是它本身内容的宽度。
  • 高度,行高、外边距以及内边距都可以控制

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐