CSS_04_标签显示模式

最新推荐文章于 2022-07-28 16:16:27 发布

M r.J

最新推荐文章于 2022-07-28 16:16:27 发布

阅读量136

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43196061/article/details/87361325

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

标签显示模式（display)

html标签显示模式分为两类：块级元素(block-level)和行内元素(inline-level)。

块级元素

每个块级元素都肚子占据整一行或者多行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建。div是典型的块级元素。

<!--常见的块级元素-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div></div>
<p></p>
<ul>
  <li></li>
</ul>
<ol>
  <li></li>
</ol>

块级元素的特点：

总是从新行开始；
高度、行高、外边距以及内边距都可以控制；
宽度默认是容器100%；
可以容纳行内元素和其他块元素。

行内元素

行内元素不占有独立的区域，仅靠自身文字或者图像大小来支撑结构。一般不能设置高度、宽度、对齐等属性，常用于控制页面中的文本样式。<span>为典型的行内元素。

<!--常见的行内标签-->
<a href="#">链接1</a><br>
<strong>加粗</strong> <b>加粗</b><br>
<em>斜体</em> <i>斜体</i><br>
<del>删除线</del> <s>删除线</s><br>
<ins>下滑线</ins> <u>下划线</u><br>
<span>行</span>

行内元素的特点：

和相邻行内元素在一行上；
高、宽都无效，但是水平方向padding和margin有效；
默认宽度就是它本身内容的宽度；
行内元素只能容纳文本或者其他行内元素。(a特殊)

注意：

只有文字才能组成段落，<p>里面不能放块级元素,同理h1~h6、dt,他们都是文字类块级标签，里面不能放块标签。链接里面不能再放链接标签。

错误演示

<!--
  以下内容是一个段落的，每一个块标签多会独立占一行显示，下面内容分为三段。
-->
<p>
   <h1>2019年2月15日</h1>
   今天天气真好！
   <div>我要出去旅游，哈哈哈哈！</div>
</p>
<!-- 链接不能嵌套，逻辑错误-->
<a href="#">链接1<a href="">链接2</a></a>

行内块元素

行内元素中有个特殊的标签-<img />、<input />、<td>,可以对他们设置宽高和对齐属性，这些标签称为行内块标签。

<img src="" alt="">
<input type="text"> <input type="text">
<table>
    <tr>
        <td></td>
    </tr>
</table>

行内块标签的特点：

和相邻行内元素在一行上，但只见会有空白间隙；
默认宽度就是它本身的宽度；
高度、行高、外边距以及内边距都可以控制。

模式之间的转换

值	描述
display:inline;	块转行内
display:block;	行内转块
display:inline-block	块、行内转行内块

块转行内模式:设置div的宽高属性，通过display:inline，将块元素转换为行内元素，宽高属性没有作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模式转换</title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
            /* 转换为行内元素 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>123</div>
    <div>456</div>
    <div>789</div>
</body>
</html>

行内转块模式:直接为span设置宽高不起任何作用，通过display:block;，将行内转换为块就能设置宽高属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行转块</title>
    <style>
        span {
            font-size: 20px;
            height: 300px;
            width: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <span>唐僧</span>
    <span>孙悟空</span>
    <span>猪八戒</span>
    <span>沙僧</span>

</body>
</html>

行转行内块模式:a为行内元素，不能设置高宽，将其转化为display:inline-block行内块显示模式,两个a标签就能在同一行显示，并且设置宽高属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块标签</title>
    <style>
        a {
            width: 100px;
            height: 30px;
            font-size: 14px;
            display: inline-block;
        }
    </style>
</head>
<body>
<a href="#">链接1</a>
<a href="#">链接2</a>
</body>
</html>

M r.J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_04_标签显示模式

标签显示模式（display)html标签显示模式分为两类：块级元素(block-level)和行内元素(inline-level)。块级元素每个块级元素都肚子占据整一行或者多行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建。div是典型的块级元素。&amp;lt;!--常见的块级元素--&amp;gt;&amp;lt;h1&amp;gt;&amp;lt;/h1&amp;gt;&amp;lt;h2&amp;gt
复制链接

扫一扫