<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>display</title>

</head>

<body>

<!--display: inline;"  将块级标签转换成行内标签-->

<!--display:block"     将行内标签转换成为块级标签-->

<!--display:inline-block  具有inline 默认自己有多少占多少-->

                      <!--具有block 可以设置高度，宽度，padding margin-->

<!--diaplay:none 让标签消失-->

<!--行内标签无法设置高度宽度例如 <a></a>  <span></span>-->

<div style="background-color: purple;display: inline;">1112222</div>

<span style="background-color: green;display:block">222111</span>

</body>

</html>

CSS之display的更多相关文章

  1. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  2. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  3. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  4. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  5. css之display:inline-block布局--转

    css之使用display:inline-block来布局   css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...

  6. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  7. CSS的display显示

    CSS的display显示 1. 行内元素和块级元素关系 块级元素:1.标题标签:h1~h6:2.段落标签:p1~p6:3.div:4.列表:等 行内元素:1.span:2.a:3.img:4.str ...

  8. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  9. css 浅析display属性

    继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...

  10. css解决display:inline-block;产生的缝隙（间隙）

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...

随机推荐

  1. 有关两个jar包中包含完全相同的包名和类名的加载问题

    首先从表现层介绍,后续后深入原理. 1,先简单介绍maven如何生成jar文件方便测试 <plugin> <artifactId>maven-assembly-plugin&l ...

  2. 基础模块 网络连接检查 js

    //无对象则加载 if (typeof Base == "undefined") Base = function() {} // 获取时间对象的基本方法 Base.prototyp ...

  3. 牛客练习赛23CD

    链接:https://www.nowcoder.com/acm/contest/156/C 来源:牛客网 题目描述 托米完成了1317的上一个任务,十分高兴,可是考验还没有结束 说话间1317给了托米 ...

  4. asp.net core2.1 bundleconfig.json合并压缩资源文件

    在asp.net core中则可以使用BuildBundlerMinifier来进行css,js的压缩合并 1.使用NuGet安装 BuildBundlerMinifier(也可以在vs中下载安装扩展 ...

  5. 单机器搭建 zk 集群

    在一台机器上配置 2 节点的 zk 集群,zk1 和 zk2 的 serverid 分别为 1 和 2,本机 ip 是 192.168.40.1 zk1 相关配置: dataDir=E:/test/z ...

  6. ansible批量管理工具的搭建与简单的操作

    ansible的安装 # [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@localhost ...

  7. XenServer7.6命令行导出导入虚拟机（迁移）

    一:命令行方法导出虚拟机(先关闭虚拟机) 1.1:打印虚拟机列表 xe vm-list uuid ( RO) : 43dfac04-515e-7769-b2d2-444d4b7cb198 name-l ...

  8. day 17 项目开发常用模块

    ---恢复内容开始--- time模块 import time print(time.time()) # 时间戳: print(time.strftime("%Y-%m-%d %X" ...

  9. VMware网络连接模式——桥接模式、NAT模式以及仅主机模式的介绍和区别

    在使用VMware Workstation(以下简称:VMware)创建虚拟机的过程中,配置虚拟机的网络连接是非常重要的一环,当我们为虚拟机配置网络连接时,我们可以看到如下图所示的几种网络连接模式:桥 ...

  10. 剑指Offer 31. 整数中1出现的次数（从1到n整数中1出现的次数） （其他）

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...