元素的显示模式及转换

Tina_dl

已于 2022-05-09 12:24:29 修改

阅读量946

点赞数

分类专栏： CSS 文章标签： css html

于 2022-05-02 17:39:34 首次发布

本文链接：https://blog.csdn.net/Tina_dl/article/details/124542657

版权

本文介绍了CSS中元素的显示模式，包括块元素、行内元素和行内块元素，详细阐述了如何通过display属性进行转换。通过实例展示了行元素转块级元素、块元素转行内元素和行内元素转行内块元素的效果，并提到了浮动属性和定位属性对元素布局的影响。

摘要由CSDN通过智能技术生成

今天回头看看这些细节好多都忘记了，就做简单记录下。

元素的显示模式分为 1、块元素 2、行内元素两大类

1、块元素（占据一行，可以设置宽高属性）
h1~h6， p ， div，ul， ol， li等
2、行内元素（一行内可有多个，不可以设置宽高属性）
a， strong，b， em， i， del， s，sin，u，span等
其中span标签是最典型的行内元素（也叫内联元素）
3、行内块元素
img，input，td等。

其中CSS样式为

行元素转块级元素 dispaly:block；
块元素转换成行内元素 display:inline；
行内元素转换成行内块元素 display:inline-block；

下面我们举例具体分辨下

行元素转块级元素 dispaly:block；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hang {
   
        width: 100px;
        height: 100px;
        background-color: rgb(154, 243, 237);
      }
      .chang {
   
        width:</

最低0.47元/天解锁文章

Tina_dl

关注

0
点赞
踩
1

收藏

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

今天回头看看这些细节好多都忘记了，就做简单记录下。元素的显示模式分为 1、块元素 2、行内元素两大类1、块元素（占据一行，可以设置宽高属性）h1~h6， p ， div，ul， ol， li等2、行内元素（一行内可有多个，不可以设置宽高属性）a， strong，b， em， i， del， s，sin，u，span等其中span标签是最典型的行内元素（也叫内联元素）其中CSS样式为行元素转块级元素 dispaly:block；块元素转换成行内元素 display:inlin.
复制链接

扫一扫

专栏目录