【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )

原创

韩曙亮_ 2023-03-17 00:28:36 ©著作权

文章标签 css html 行内元素行内块元素标签显示模式 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

一、行内元素

1、行内元素简介
2、行内元素特点
3、代码示例

二、行内块元素

1、行内块元素简介
2、行内块元素特点
3、代码示例

一、行内元素

1、行内元素简介

行内元素可以在一行中同时放置多个

链接标签 : <a>
行内标签 : 
文字相关标签 :  ,  ,  ,  , <del>

2、行内元素特点

行内元素特点 :

单行多个 : 在一行中 , 可以设置显示多个行内元素 ;
宽高无效 : 行内元素的宽高设置是无效的 , 以子内容的大小来确定 ;
默认宽度 : 行内元素的宽度是其本身的宽度 ;
容器特性 : 行内元素作为容器 , 只能存放文本或行内元素 , 不能存放块级元素 ;

在链接标签 <a> 中 , 不能包含其它链接 , 否则会产生冲突 ;

3、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>块级元素</title>
    <base target="_blank"/>
    <style>
        span {
            /* 宽度 200 像素 */
            width: 200px;   
            /* 高度 200 像素 */
            height: 100px;
            /* 左边距 2 像素 */
            margin-left:2px;
            /* 背景黑色 */
            background-color: black;
            /* 文字绿色 */
            color:green;
        }
    </style>
</head>
<body>
    <span>行内元素1</span>
    <span>行内元素2</span>
</body>
</html>

显示效果 :

【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )_行内元素

为 span 标签设置的宽高都是无效的 , 设置的 200 x 200 像素的宽高 , 显然没有成功 , 行内元素的宽高只取决于元素本身的宽高 ;

二、行内块元素

1、行内块元素简介

行内块元素标签是特殊的标签 , 可以在一行内显示多个 , 但是同时也可以为其设置宽高属性和对齐属性 ;

图片标签 : <img>
表单标签 : <input>
单元格标签 : <td> , 表格 table 中的行 tr 标签中的单元格 <td> 标签 ;

2、行内块元素特点

行内块元素特点 :

显示样式 : 行内块元素默认都在一行中显示 , 每个元素之间会自动添加间隔 ;
宽高设置 : 行内块元素的默认宽高是元素本身的宽高 , 但是也可以设置宽高 ;
样式设置 : 行内块元素可以设置宽度 , 高度 , 内边距 , 外边距 , 行高等属性 ;

3、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>块级元素</title>
    <base target="_blank"/>
    <style>
        img {
            /* 宽度 200 像素 */
            width: 200px;   
        }
    </style>
</head>
<body>
    <img src="images/image1.png" alt="">
    <img src="images/image2.png" alt="">
    <img src="images/image3.png" alt="">
</body>
</html>