css元素显示模式

元素显示模式

块级元素

常见的块级元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

1. 自己独占一行；

2. 高度宽度外边距都可以控制；

3. 宽度默认是容器（父级宽度）的100%；

4. 是一个容器及盒子，里面可以放行内或块级元素。

注意：

• 文字类的元素内部不能使用块级元素
• “

  ”标签主要用于存放文字，因此“

  ”里面不能放块级元素

• 同理，h标签也不能

行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

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

注意：

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

行内块元素

<img>、<input>、<td>等

同时具有行内元素和块级元素的特点

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

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个	可以设置宽度高度	容器的100%	容器可以包含任何标签
行内元素	一行可以放多个	不可以设置宽度高度	它本身内容的宽度	容纳文本以及行内元素
行内块元素	一行可以放多个	可以设置宽度高度	它本身内容的宽度

元素显示模式转换

需要修改特性，比如想要增加的触发范围

转换块级元素：display:block;（译为显示块级）

        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /*把行内元素a转换为块级元素*/
            display: block;
        }

        div {
            /*div转换为行内*/
            display: inline;
        }

        span {
            width: 300px;
            height: 100px;
            background-color: red;
            /*行内转行内块*/
            display: inline-block;
        }

盒子内的行高

如果行高等于盒子高度，行高的上空隙和下空隙将文字挤到中间；

如果行高小于盒子高度，文字会偏上；

如果行高大于盒子高度，文字会偏下。

demo（简易小米侧边栏）

核心思路：

1. 将a转换为块级元素使其单独占据一行，并且有宽和高；

2. 鼠标经过a，给链接设置背景颜色。

        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            text-decoration: none;
            font-size: 14px;
            color: snow;
            text-indent: 2em;
            /*    
            css没有让单行文字垂直居中的代码
            可以通过让文字行高等于盒子的高度来实现
            行高=上边距+下边距+文字内容
            */
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }

效果图：