css 块级元素和行内元素

_静水流深
177 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

关于块级元素和行内元素之前也没有太了解，今天有人问到，我也学习一下

1. 标准文档流

标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。于是将“各种元素”分为块级元素和行内元素。

2. 块元素

块元素在页面中以区域块的形式出现，其特点是：每个块元素通常都会独自占据一整行或者多整行，可以对其设置宽度、高度、对齐等属性

常见的块元素：<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等

例如，h3、p、div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3,p,div {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  /*靠右对齐*/
        }
    </style>
</head>

<body>
    <div>块状元素div</div>
    <p>块状元素p</p>
    <h3>块状元素h3</h3>
</body>

</html>

块元素<div>、<p>、<h3>没有设置其它属性，设置了宽高、对齐等属性有效，且独占一行

# 3. 行内元素

**行内元素**或者叫内联元素、内嵌元素，代表不必在新的一行开始，同时也不强迫其他标签在新的一行显示，一个行内标签通常会和它前后的其它行内标签**显示在同一行**中，它们不占用独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，**一般不可以**设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

**常见的行内元素**：`<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<a>，<span>`等

例如，strong、em、span

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        strong,em,i,span {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  /*靠右对齐*/
        }
    </style>
</head>

<body>
    <strong>行内元素strong</strong>
    <em>行内元素em</em>
    <span>行内元素span <span>行内元素span嵌套的span</span></span>
</body>

</html>

宽高、对齐属性都不生效，且行内元素不独占一行，显示在同一行上

4. 行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。行内块状元素点是不自动换行、能够识别宽高、默认排列方式为从左到右，这个后边例子会提到

5. display属性

网页是由多个块元素和行内元素构成的盒子排列的，如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素局内行内元素的某些特性，例如，不独占一行排列，可以使用display属性对元素的类型进行转换，display常用属性及含义如下：

  • display:inline 将指定对象显示为行内元素
  • display:block 将指定对象显示为块元素
  • display:inline-block 将指定对象显示为行内块元素，可以对其设置宽高对齐等属性
  • display:none 隐藏元素，不显示也不占用页面空间

5.1 块元素 --> 行内元素，再转为行内块元素

既然是从块元素上转换，那么从在2中例子上做修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h3,p,div {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  
            display: inline; /*本次新增属性：显示为行内元素*/
        }
    </style>
</head>

<body>
    <div>块状元素div</div>
    <p>块状元素p</p>
    <h3>块状元素h3</h3>
</body>

</html>

从下图结果看出，块元素<div>、<p>、<h3>设置了宽高、对齐等属性失效了，且不独占一行，三个元素显示在同一行，现在的三个块级元素具备了行内元素的特征

但是现在的需求是：需要让这三个块元素有行内元素显示在同一行的特征，但又希望其保留块元素可以设置宽高、对齐等属性的特征，修改display的属性为inline-block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h3,p,div {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  
            display: inline; /*本次修改属性，显示为行内块元素*/
        }
    </style>
</head>

<body>
    <div>块状元素div</div>
    <p>块状元素p</p>
    <h3>块状元素h3</h3>
</body>

</html>

从下图看出，需求实现，元素宽高、对齐属性正常，且显示在同一行

5.2 行内元素 -- > 块元素，再转换为行内块元素

同理，既然是从行内元素上转换，那么从在3中例子上做修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        strong,em,i,span {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  
            display: block; /*本次新增属性，显示为块元素*/
        }
    </style>
</head>

<body>
    <strong>行内元素strong</strong>
    <em>行内元素em</em>
    <span>行内元素span</span>
</body>

</html>

从下图结果看出，行内元素<strong>、<em>、<span>设置了宽高、对齐等属性有效，并独占一行，现在的三个行内素具备了块元素的特征

同样如果现在需要让这三个块元素保留块元素可以设置宽高、对齐等属性的特征，又希望它们仍然显示在同一行的特征，修改display的属性为inline-block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        strong,em,i,span {
            width: 300px;
            height: 50px;
            background: #17A2B8;
            text-align: right;  
            display: inline-block; /*本次修改属性，显示为行内块元素*/
        }
    </style>
</head>

<body>
    <strong>行内元素strong</strong>
    <em>行内元素em</em>
    <span>行内元素span</span>
</body>

</html>

需求实现，显示在同一行，且元素宽高、对齐属性正常，这就是4中提到的行内块元素

6. 关于行内元素的margin

关于块元素、行内元素、行内块元素还有一个区别：

  • 块元素和行内块元素的margin是对四周有效
  • 行内元素的margin只对左右有效，对上下无效

例如在3的基础上做修改，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        strong,em,i,span {
            width: 300px;
            height: 50px;
            margin: 30px; /*本次新增属性，设置行内元素外边距*/
            background: #17A2B8;
            text-align: right;  
        }
    </style>
</head>

<body>
    <strong>行内元素strong</strong>
    <em>行内元素em</em>
    <span>行内元素span</span>
</body>

</html>

margin: 30px;代表上下左右外边距均为30px，但从下图可以看到只有左右有效

7. 总结

块级元素：

  • 独占一行，不能与其他任何元素并列
  • 能设置宽、高，如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
  • 能设置对齐，默认排列方式为从左到右

行内元素：

  • 与其他元素显示在一行
  • 不能设置宽、高，默认的宽度就是文字的宽度
  • 不能设置对齐

行内块元素：

  • 与其他元素显示在一行
  • 能设置宽高，默认的宽度就是文字的宽度
  • 能设置对齐，默认排列方式为从左到右
avatar
文章
阅读
粉丝