11 元素的显示模式

了解元素的显示模式可以更好的让我们布局页面

11.1 什么是元素的显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型

11.2 块元素

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

特点

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

注意

文字类的元素（<p>，<h>）内不能使用块级元素
<p>标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放<div>
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

例子

<head>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>比较霸道，自己独占一行</div> 瑟瑟发抖
    <p>
    <div>这里有问题</div>
    </p>
</body>

11.3 行内元素（内联元素）

行内元素又称为内联元素，常见的行内元素有<span>、<a>、<strong>、<b>、<em>、<i>、<label> 、<del>，<s>、<ins>、<u>等，其中<span>是最典型的行内元素。

特点

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

注意

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

例子

<head>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>pink老师你怎么这么宽</span> <strong>喜欢粉色</strong>
    <span>pink老师</span> <strong>喜欢粉色</strong>
</body>

11.4 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点∶

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

例子

<head>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>

11.5 元素显示模式总结

表2.1: 元素显示模式总结
元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	等于父级的宽度	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以设置宽度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度	-

11.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性。

比如想要增加链接<a>的触发范围。

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

例子

<head>
    <style>
        a {
            width: 200px;
            height: 50px;
            /* 行高等于盒子高度时，垂直居中 */
            line-height: 40px;
            background-color: pink;
            /* 把行内元素a转换为块元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把div块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">行内a元素转为块元素</a>
    <a href="#">行内a元素转为块元素</a>
    <div>我是块元素</div>
    <div>我是块元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

11.7 案例

简洁版小米侧边栏

小技巧，单行文字垂直居中：让文字的行高等于盒子的高度。

简单理解:行高的上空隙和下空隙把文字挤到中间了.是如果行高小于盒子高度,文字会偏上如果行高大于盒子高度,则文字偏下

height: 40px;
/* 行高等于盒子高度时，垂直居中 */
line-height: 40px;

<head>
    <style>
        a {

            width: 230px;
            height: 40px;
            /* 行高等于盒子高度时，垂直居中 */
            line-height: 40px;
            /* 块级元素 */
            display: block;
            /* 文字颜色为白色 */
            color: #fff;
            /* 背景颜色变灰色 */
            background-color: #535758;
            /* 文字大小14px */
            font-size: 14px;
            /* 去除连接下划线 */
            text-decoration: none;
            /* 首行缩进 */
            text-indent: 2em;

        }

        a:hover {
            background-color: #FE6700;
        }
    </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>