行内元素、块级元素、行内块元素和替换元素详解

行内元素

行内元素特点

1. 行内元素的宽度和高度是由内容撑开的，元素一行排列，父级宽度不够才会换行。
2. 行内元素不能设置宽高，设置无效 行内元素通常不会受到上下外边距的影响，因为它们不会占据整行空间。但是，行内元素之间会有默认的空白间距，可以通过设置font-size来消除。
3. 行内元素垂直方向的margin和padding不生效

代码示例

常见的行内元素
<span>span</span>
<a href="">a</a>
<strong>strong</strong>
<em>em</em>
<img src="" alt="img">
<b>b</b>
<i>i</i>
<code>code</code>
<span>span-test:很长很长很长很长很长很长很长很长很长很长很长很长的字</span>

span{
  width: 10px;
  height: 10px;
  margin: 6px 6px 6px 6px;
  padding:10px 10px 10px 10px;
}

给行内元素设置宽高的方法

1. 将行内元素转换成块元素或行内块元素。
   display：block或者display：inline-block
2. 给行内元素添加浮动。
   float：left或float：right
3. 给行内元素添加绝对定位或者固定定位
   position：absolute，position：fixed

常见的行内元素
<span class="span">span</span>
<strong class="strong">strong</strong>
<b class="b">b</b>
<i class="i">i</i>
<span class="long">span-test:很长很长很长很长很长很长很长很长很长很长很长很长的字</span>

.span{
  display: block;
  width: 100px;
  height: 100px;
}
.strong{
  display: inline-block;
  width: 100px;
  height:100px;
}
.b{
 float: left;
  width:100px;
  height: 100px;
}
.i{
position: absolute;
  width: 100px;
  height: 100px;
}

通过控制台发现行内元素设置了浮动或者绝对定位/固定定位会自动变成块级元素，可以直接设置宽高。

块级元素

1. 块级元素独占一行，垂直排列，块级元素宽度默认占满父级元素的宽度,(如果父元素只有这一个子元素，子元素会占满父元素的宽高）
2. 块级元素可以设置宽高
3. 注意嵌套块元素的层级，比如ul/ol包li，而不应该li做父级
4. 注意外边距重叠问题 外边距折叠机制详解
5. 某些元素的上下间距问题 块元素通常会受到上下外边距的影响，可能会出现意外的空白。比如在mac pro的chrome中，两个p标签默认有margin:16px 0;的效果，在windows的chrome中有margin：8px的效果。（浏览器通常会为它设置默认的上下外边距，以便在段落之间留出空隙）

常见有默认上下外边距的块级元素：
p标签
h1~h6标签
ul/ol标签
li标签

    <p>这是一个段落。段落标签用于将文本分组，以便更好地显示和排版。</p>
    <h1>这是一级标题 (h1)</h1>
    <h2>这是二级标题 (h2)</h2>
    <h3>这是三级标题 (h3)</h3>
    <h4>这是四级标题 (h4)</h4>
    <h5>这是五级标题 (h5)</h5>
    <h6>这是六级标题 (h6)</h6>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
    <ol>
      <li>第一步：打开网页</li>
      <li>第二步：填写表单</li>
      <li>第三步：提交数据</li>
    </ol>

行内元素/行内块元素/块元素之间的转换

设置为块元素display：block
设置为行内元素display：inline
设置为行内块元素display：inline-block

行内块元素

行内块元素一行展示，超过父级容器宽度换行，可以设置元素的宽高。

可替换元素

典型可替换元素：iframe，video，img，embed
某些特定情况下作为可替换元素：option，audio，canvas，object
根据上下文语境决定该元素为块元素还是行内元素，可替换元素的内容不受当前文档样式影响，css可以影响可替换元素的位置，但是不会影响元素自身的内容。

可替换元素拥有内在尺寸，内置宽高，可以设置width和height，性质如同行内块元素。
行内元素不能直接设置宽高，但是行内元素img可以设置宽高，因为img是行内元素也是可替换元素（replaced element）

行内元素和块级元素总结