css元素显示模式（行内、块级、行内块）

lxl211

已于 2023-01-31 17:24:24 修改

阅读量1.9k

点赞数

分类专栏： css 文章标签： css css3 前端

于 2023-01-29 18:07:06 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/128792282

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1.块级元素

显示特点：
1、独占一行（一行只能显示一个）
2、宽度默认是父元素的宽度，高度默认由内容撑开
3、可以设置宽高

代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer

    <style>
        div:nth-child(1) {
            /* 块级元素默认和父亲一样宽度 */
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 块级 -->
    <div></div>
</body>

在这里插入图片描述
关于块级元素的一些想法

如果想让一个块级盒子，例如div在电脑上显示出来，可以不设置宽度，但是必须设置高度，否则在电脑屏幕上肉眼看不见

如果有二个盒子，只要子盒子有宽高，父盒子不用任何设置，都能被看到
例如：

    <style>
        div{
            background-color: pink;
        }
        button{
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <button></button>
    </div>
</body>

在这里插入图片描述

2.行内元素

特点：
1、一行可以显示多个
2、高度和宽度默认由内容撑开
3、不可以设置宽高

代表标签：
a、span、b、u、i、strong、ins、em、del

    <style>
        span {
            /* 行内不可以设置宽高 */
            width: 300px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 行内 -->
    <span>span</span>
    <b>b</b>
    <strong>strong</strong>
    <u>u</u>
    <i>i</i>
    <s>s</s>
    <del>del</del>
    <em>em</em>
    <ins>ins</ins>
</body>

在这里插入图片描述

3.行内块元素

显示特点：
1、一行可以显示多个
2、可以设置宽高

代表标签：
input、textarea、button、select

    <style>
       img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 行内块 -->
    <img src="imgs/bg33.png">
</body>

在这里插入图片描述

特殊情况：
img有行内块元素特点，但是chrome调试工具中显示的inline

4.显示模式转换

display: block;
display: inline-block;
display: inline;

5、html标签嵌套注意点

块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.
但是: p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
在这里插入图片描述

lxl211

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css元素显示模式（行内、块级、行内块）

div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer。块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.img有行内块元素特点，但是chrome调试工具中显示的inline。但是: p标签中不要嵌套div、p、h等块级元素。2、高度和宽度默认由内容撑开。a标签内部可以嵌套任意元素。但是:a标签不能嵌套a标签。（一行只能显示一个）1、一行可以显示多个。
复制链接

扫一扫