元素显示模式简介

指元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素一般分为块元素和行内元素。

块元素

常见的块元素有： h1~h6, p, div, ul, ol, li 等，<div>是最典型的块元素。
块级元素特点：

自己独占一行。
高度、宽度、外边距及内边距都可以控制。
宽度默认是容器（父元素）的100%。
是一个容器及盒子，里面可以放行内元素和块级元素

行内元素

常见的行内元素有： a, strrong, b, em, i, del, s, ins, u, span等，<span>是最典型的行内元素，也称内联元素
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接。
特殊情况链接<a>里面可以放块级元素，但是给<a>转换成块级显示模式最安全。

行内块元素

行内元素有几个特殊的标签<img />、<input />、<dt>，它们同时具有块元素和行内元素的特点。

行内块元素特点：

和相邻行内元素或行内块元素在一行上，但是它们之间会有空白间隙。一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度、行高、外边距以及内边距都可以控制（块级元素特点）。

显示模式的转换

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

案例：侧边栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏案例</title>

    <style>
        a {
            display: block;
            background-color: #535758;
            width: 230px;
            height: 40px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        
        a:hover {
            background-color: #FF6F00;
        }
    </style>
</head>

<body>

    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>


</body>

</html>