一、块元素转行内元素：display:inline

二、行内元素转块元素：display:block

      div{

            display: inline;

/*无效

            width: 500px;

            height: 500px;

*/

            background-color: red;

        }

        p{

            display: inline-block;

        }

        span{

            display: block;

            width: 400px;

            height: 300px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div>块内元素转行内元素</div>

   <span>行内元素转块元素</span>

三、块和行内元素转行内块元素：display:inline-block

 <style type="text/css">

        div,a,span,strong{

            display: inline-block;

            width: 200px;

            height: 200px;

            background-color: yellow;

            text-align: center;

            vertical-align: top;

        }

    </style>

</head>

<body>

    <div>块元素转行内块元素</div>

    <a href="#">a行内元素转行内块元素</a>

    <span>span行内元素转行内块元素</span>

    <strong>strong行内元素转行内块元素</strong>

CSS块元素、行内元素、行内块元素的转换的更多相关文章

  1. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  2. css盒子模型的深入理解，在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  3. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  4. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

  5. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  6. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  7. * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

  8. 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  9. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  10. 内联(行级)元素不能设置margin-top

    内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...

随机推荐

  1. 给element添加自定义图标

    element为我们提供了丰富的好用的组件,图标的样式也很多,但还是有一些常用的图标没有在官方图标库里边,比如说微信.淘宝.支付宝等等.那么如何把我们需要的图标添加到进去呢? 因为element有官方 ...

  2. 删除elasticsearch 30天前的所有索引

    我的索引格式为 xxx-xxx-xxx-2019.06.27 xxx-xxxx-2019.06.27 脚本思路: 获取目前 es上所有索引,以日期进行拆分,然后用索引时间对比一个月前的日期,日期小于一 ...

  3. 处女篇：自用C#后端SqlHelper.cs类

    自用SqlHelper.cs类,此类来自软谋教育徐老师课程SqlHelper.cs! using System; using System.Collections; using System.Coll ...

  4. elasticsearch配置文件中http.cors.x字段有哪些用途和用法

    http.cors.enabled 是否支持跨域,默认为false http.cors.allow-origin 当设置允许跨域,默认为*,表示支持所有域名,如果我们只是允许某些网站能访问,那么可以使 ...

  5. MOOC C++笔记（六）：多态

    多态 虚函数 在类的定义中,前面有virtual关键字的成员函数就是虚函数. virtual关键字只用在类定义里的函数声明中,写函数体时不用. 构造函数和静态成员函数不能是虚函数. 多态的表现形式 基 ...

  6. 2019 年在 Raspberry Pi 「树莓派」上运行的 10 个操作系统推荐

    原文:2019 年在 Raspberry Pi 「树莓派」上运行的 10 个操作系统推荐 image Raspberry Pi** 是一款基于 ARM 的单板计算机,默认运行一款称为 Raspbian ...

  7. WPF 判断一个对象是否是设计时的窗口类型，而不是运行时的窗口

    原文:WPF 判断一个对象是否是设计时的窗口类型,而不是运行时的窗口 当我们对 Window 类型写一个附加属性的时候,在属性变更通知中我们需要判断依赖对象是否是一个窗口.但是,如果直接判断是否是 W ...

  8. vxlan 协议

    vxlan 协议原理简介 1. vxlan 简介 VXLAN 全称是 Virtual eXtensible Local Area Network,虚拟可扩展的局域网.它是一种 overlay 技术,通 ...

  9. LRU（Least Recently Used）算法的理解

    https://blog.csdn.net/wydyd110/article/details/84023688 感谢 ,自己学习记笔记 内存里建立一个哈希表,后来数据多了,爆了.咋整呢? 一个算法,就 ...

  10. python入学代码

    liwenhu=100 if liwenhu>=90: print("你很棒") elif liwenhu>=80: print("你很不错") e ...