上一次介绍了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>
调试结果:



Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐