元素显示模式及转换

一条咸鱼o*v*o

已于 2022-03-18 21:01:00 修改

阅读量517

点赞数

文章标签： html css 前端

于 2022-03-11 20:53:09 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/123429981

版权

三、元素显示模式

1.1 块级元素

属性：display:block

显示特点：

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

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....

2.1 行内元素

属性：display:inline;

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：

a、span、b、u、i、s、strong、 ins、em、del....

3.1 行内块元素

属性：display:inline-block;

显示特点：

一行可以显示多个
可以设置宽高

代表标签：

input、textarea、button、select....
特殊情况：img标签有行内块元素的特点，但是Chrome调试工具中显示结果是inline

4.1 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性	效果	使用频率
display:block;	转换成块级元素	较多
display:inline-block;	转换成行内块元素	较多
display:inline;	转换成行内元素	极少

 <style>
        a {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 转换成块元素 */
            display: block;
           
        }
    </style>

<body>
    <a href="#">我是一个a标签</a>
    <a href="#">我是一个a标签</a>
    <a href="#">我是一个a标签</a>
</body>

<style>
        a {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 转换成块元素 */
            /* display: block; */


            /* 转换成行内块元素 */
            display: inline-block;
        }
    </style>

<body>
    <a href="#">我是一个a标签</a>
    <a href="#">我是一个a标签</a>
    <a href="#">我是一个a标签</a>
</body>

拓展1：HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.....

但是：p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

但是a标签不能嵌套a标签

一条咸鱼o*v*o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素显示模式及转换

三、元素显示模式1.1 块级元素属性：display:block显示特点：独占一行（一行只能显示一个）宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....2.1 行内元素属性：display:inline;显示特点：一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高代表标签：a、span、b、u、i、s、strong、in...
复制链接

扫一扫