认识块元素与行内元素

首先看一下再开发过程中常见的HTML元素

块元素：div、p、main、article、h1、form、table等
行内元素：span、i、img、a、input等

注：

<div>
    <span>你好</span>
     世界
</div>

不止<span>你好</span>是行内元素，世界也是行内元素，把这种没有行内元素包裹的的元素称为匿名行内元素

注意

不同的HTML元素，之所以在页面中渲染不同的样式，并不是HTML元素本身所决定的，而是靠CSS样式表决定的，只要设置合适的CSS样式表，div也可以变成行内元素
img、input元素并不是行内块元素

为什么一开始浏览器能把div的样式设置为块元素喃？

这是因为浏览器对于不同HTML标签有不同的默认样式

这里就好理解了吧，不同的HTML元素名称只是为了让浏览器认识它，浏览器会根据不同的元素名称给予不同的默认样式表和默认功能

块元素和行内元素差异

默认高度

块元素宽度撑到父级元素的宽度，也就是父元素多宽，块元素多宽，独占一行，高度由内容区高度决定

行内元素的宽高由内容区的宽高决定，随着内容的宽高变化而变化

 <style>
     div {
         background-color: #2ecc71;
     }
 
     span {
         background-color: #f1c40f;
     }
 </style>
 <div>我是块元素</div>
 <span>我是行内元素</span>

自定义宽高样式

块元素能够自定义设置样式表宽高

行内元素设置样式表宽高无效

注：*如果想设置行内元素的高，可以通过改变line-height*实现

 <style>
     div {
         background-color: #2ecc71;
         height: 100px;
         width: 100px;
     }
 
     span {
         background-color: #f1c40f;
         height: 100px;
         width: 100px;
     }
 </style>
 <div>我是块元素</div>
 <span>我是行内元素</span>

内外边距

块元素

外边距任意方位有效

 <style>
     div {
         background-color: #2ecc71;
         margin: 20px;
     }
 </style>
 
 
 <div>我是块元素</div>
 <div>我是块元素</div>
 <div>我是块元素</div>
 <div>我是块元素</div>

注：如果细心一点，上面的效果其实并不是我们想要的，外边距出现了重叠，这是浏览器的渲染BUG，需要了解块元素外边距重叠和塌陷知识

内边距任意方位有效

 <style>
     div {
         background-color: #2ecc71;
         padding: 20px;
     }
 </style>
 
 
 <div>我是块元素A</div>
 <div>我是块元素B</div>
 <div>我是块元素C</div>
 <div>我是块元素D</div>

行内元素

设置外边距左右有效，上下无效

 <style>
     span {
         background-color: #f1c40f;
         margin: 20px;
     }
 </style>
 
 <span>我是行内元素A</span>
 <span>我是行内元素B</span>
 <span>我是行内元素C</span>
 <span>我是行内元素D</span>
 <span>我是行内元素E</span>

设置内边距左右有效，上下不完全有效（上下边距会在盒子模型中显示，但不会占用上下的位置）

 <style>
     span {
         background-color: #f1c40f;
         opacity: 0.8;
         padding: 20px;
     }
 </style>
 
 <span>我是行内元素A</span>
 <span>我是行内元素B</span>
 <span>我是行内元素C</span>
 <span>我是行内元素D</span>
 <span>我是行内元素E</span>

文档包含

建议块级元素包含行内元素和块级元素

不建议行内元素不能包含块级元素，这样做并没有什么意义，浏览器渲染也并不会渲染这样的层级结构

 <style>
     div {
         background-color: #2ecc71;
     }
 
     span {
         background-color: #f1c40f;
     }
 </style>
 
 <!-- 不建议这样的文档结构 -->
 <span>
     <div>我是行内元素</div>
 </span>
 
 <!-- 建议这样的文档结构 -->
 <div>
     <span>我是行内元素</span>
 </div>

多元素排列方式

单个块元素会单独占用一行，所有多个块元素会依次向下排列

多个行内元素依次向后排序

 <style>
     div {
         background-color: #2ecc71;
     }
 
     span {
         background-color: #f1c40f;
     }
 </style>
 <div>我是块元素1</div>
 <div>我是块元素2</div>
 <div>我是块元素3</div>
 
 <span>我是行内元素1</span>
 <span>我是行内元素2</span>
 <span>我是行内元素3</span>

间隙问题

原理

这里会发现一个小问题，多个 span 元素之间有一个间隙

之所以产生间隙，是因为行内元素标签文档之间有空白符造成的

解决方案

改变HTML文档的段落结构（元素之间不用空白符连接）

<span>我是行内元素1</span><span>我是行内元素2</span><span>我是行内元素3</span>

设置包装元素的样式

设置包装元素样式为font-size:0px;（空白符字体大小设置为0，也就消失的，但是包装元素的所有的子元素字体大小都为0，页面上就看不到这些元素）
设置span元素样式font-size: 16px;（恢复所需子元素的字体大小）

<style>
    div {
        font-size: 0px;
    }

    span {
        background-color: #f1c40f;
        font-size: 16px;
    }
</style>

<div>
    <span>我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</div>

设置span元素浮动样式float: left;

<style>
    span {
        background-color: #f1c40f;
        float: left;
    }
</style>
<div>
    <span>我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</div>

会造成span元素无法单个字符换行

设置外包装显示方式display:flex;

<style>
    div {
        display: flex;
    }

    span {
        background-color: #f1c40f;
    }
</style>
<div>
    <span>我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</div>

这是现在开发常用的方式，但是会改变span 的显示方式

《架构师重学前端》块元素与行内元素