CSS中的显示模式及模式之间的互相转换

最新推荐文章于 2023-06-22 14:32:23 发布

shwanglp

最新推荐文章于 2023-06-22 14:32:23 发布

阅读量1.8k

点赞数 1

分类专栏： CSS HTML5

本文链接：https://blog.csdn.net/shwanglp/article/details/53455040

版权

HTML5 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

上一次介绍了css中的div和span标签和二者在使用中的区别，本文介绍关于显示模式和显示模式之间的转换。

接着div和span，二者引出两个概念，块级元素和行内元素。

块级元素：独占一行，如果没有设置宽高度，那么默认和父元素一样宽高，如果设置了宽高，那么就按照设置来显示。这个对于的是容器级标签。

行内元素：不会独占一行，如果没有设置高度和宽度，那么默认和吗、内容一样宽，行内元素是不可以设置宽度和高度的。对于的是文本级标签。

行内块级元素：为了能够让元素既能够不独占一行，又可以设置宽度和高度，在行内元素中前提高块级元素，这样就可以达到设置宽度和高度的目的。

display的常用取值：

block 块级

inline 行内

inline-block 行内块级

part1 块和行内元素默认显示结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        div{
            height: 100px;
            background: lightskyblue;
        }
        span{
            height: 100px;
            background: indianred;
        }
    </style>
</head>
<body>
   <div>make it possible!</div>
   <span>nothing is impossible!</span>
    
</body>
</html>

调试结果：

显示模式之间的转换：

块级和行内之间互相转换位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        div{
            display: inline;
            height: 100px;
            background: lightskyblue;
        }
        span{
            display: block;
            height: 100px;
            background: indianred;
        }
    </style>
</head>
<body>
   <div>make it possible!</div>
   <span>nothing is impossible!</span>
    
</body>
</html>

调试结果：

行内块元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        div{
            display: inline-block;
            height: 100px;
            background: lightskyblue;
        }
        span{
            display: inline;
            height: 100px;
            background: indianred;
        }
    </style>
</head>
<body>

   <span>
       nothing is impossible!
       <div>make it possible!</div>
   </span>

</body>
</html>

调试结果：

shwanglp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的显示模式及模式之间的互相转换

上一次介绍了css中的div和span标签和二者在使用中的区别，本文介绍关于显示模式和显示模式之间的转换。接着div和span，二者引出两个概念，块级元素和行内元素。块级元素：独占一行，如果没有设置宽高度，那么默认和父元素一样宽高，如果设置了宽高，那么就按照设置来显示。这个对于的是容器级标签。行内元素：不会独占一行，如果没有设置高度和宽度，那么默认和吗、内容一样宽，行内元素是不可以设置
复制链接

扫一扫