行内元素的转换displace属性介绍

~夏秋～

已于 2022-11-08 22:30:04 修改

阅读量137

点赞数

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

于 2022-11-08 21:00:42 首次发布

本文链接：https://blog.csdn.net/qq_53414724/article/details/127758582

版权

HTML CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

3.1、未设置inline-block属性前:

display none 隐藏对象
display line 指定为行内元素
display block 指定为块元素
display line-block 指定对象为行内块元素
display table-rell 指定对象为表格单元格
display flex 弹性盒子
span元素默认display为lnline为行内元素

1、定义

display 属性规定元素应该生成的框的类型。

2、用法

2.1、常见的属性值

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

2.2、常见属性介绍

none: 元素不会生成框，元素不显示，且在页面中不占据位置。
inline: 元素被当成内联元素(行内元素)对待，内联元素的默认值。
inline-block: 块级元素一方面被当成内联元素，因此可以使块级元素和内联元素可以同一行显示，但是另一方面这个元素却可以应用块级元素上的属性比如设置宽高，设置上下边距:

3、示例展示

3.1、未设置inline-block属性前:

3.1.1代码

<html>
    <head>
        <title>inlineBlock</title>
        <style type = "text/css">
        div {
            background: orange;    
        }
        
        span {
            background: red;    
        }
        </style>
    </head>
    <body>
        <div>
          我是div
        </div>
        <span>
        我是span
        </span>
        
    </body>
</html>

3.1.2图片

3.2 加入inline后

3.2.1代码

<html>
    <head>
        <title>inlineBlock</title>
        <style type = "text/css">
        div {
            background: orange;    
            display:inline-block;
            /*加入了块级元素才有效的属性*/
            width: 100px;
            height: 100px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        span {
            background: red;    
        }
        </style>
    </head>
    <body>
        <div>
          我是div
        </div>
        <span>
        我是span
        </span>
        
    </body>
</html>

3.2.2图片

4、注意:

可以看到div被当成行内元素，但是却能够设置宽度和上下边距，这些属性对行内元素是无效的。
block: 元素被当成块级元素对待，块级元素默认值。
run-in: 元素会根据上下文来决定作为块级元素还是行内元素显示，做出判断的依据是:
若这个run-in元素A包含一一个块级元素B，那么这个元素A被当成块级元素。
若这个run-in元素A紧接着一个块级元素B，那么这个元素A会被当成行内元素而包含在块级元素B里面。注意，这个run-in元素A不能进入已经以一个run-in为开头行的块元素，也不能进入自身就有run-in属性的块元素。
若这个run-in元素A紧接着一个行内元素，那么这个元素A被当成块级元素

table: 元素被当成块级表格(类似<table>)
inline-table: 元素被当成内联表格(类似<table>)
table-row-group: 元素被当成一个或者多个行分组(类似<tbody>)
table-row: 元素被当成一个行(类似<tr>)
table-head-group: 元素被当成一个行分组(类似<thead>)
tale-column-group: 元素被当成一个或多个列分组(类似<colgroup>)
table-column: 元素被当成一个单元格列(类似<col>)
table-cell: 元素被当成一个单元格(类似<td>和<th>)
table-caption: 元素被当成一个标题(类似<caption>)
table-footer-group: 元素被当成一个或多个行显示(类似<tfoot>)
list-item: 元素被当成列表显示

~夏秋～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行内元素的转换displace属性介绍

行内元素的转换displace属性介绍
复制链接

扫一扫

专栏目录

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

行内元素的转换displace属性介绍

1、定义

2、用法

2.1、常见的属性值

2.2、常见属性介绍

3、示例展示

3.1、未设置inline-block属性前:

3.1.1代码

3.1.2图片

3.2 加入inline后

3.2.1代码

3.2.2图片

4、注意:

“相关推荐”对你有帮助么？