<!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. springcloud入门-什么是springcloud

    1.单体应用架构存在的问题 一个归档包(例如war)包含所有功能的应用程序,通常称为单体应用. 相信很多项目都是从单体应用开始的,单体应用比较容易部署和测试,项目的初期,项目可以很好的运行,然而,随着 ...

  2. 牛客练习赛23CD

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

  3. iOS 开发：绘制像素到屏幕

    转载:https://segmentfault.com/a/1190000000390012 译注:这篇文章虽然比较长,但是里面的内容还是很有价值的. 像素是如何绘制到屏幕上面的?把数据输出到屏幕的方 ...

  4. Python3解析dex文件

    一.说明 1.1 背景说明 看<加密与解密>的时候反复听说“PE文件格式”,到Android安全兴起就不断听说“dex文件格式”.意思是看得懂的,但自己不能手解析一番总觉得不踏实,所以决定 ...

  5. linux软件管理 软件安装

    软件包分类 1) 源代码包   脚本安装包 2) 二进制包   (RPM包,系统默认包) 源码包编译后形成二进制包 JDK的安装 下载jdk的文件解压 tar -zxvf jdk-8u144-linu ...

  6. 曾经觉得学习晦涩难懂的我是如何爱上linux的

    2016年冬天,我已经是一名学习计算机科学与技术专业的大三的“老腊肉”了,但是当时的水平依旧平平.就在2016年快要结束的时候,我周围的同学们被一股考研和工作的压力炸开了锅,我也在默默思考着我的人生, ...

  7. Andriod Studio两种签名机制V1和V2的区别

    Android Studio 2.2以上版本打包apk的时候,我们会发现多了个签名版本(v1.v2)选择,如下图红色方框所示 问题描述(v1和v2) Android 7.0中引入了APK Signat ...

  8. day35-python 操作memcache二

    Memcache常用命令 存储命令: set/add/replace/append/prepend/cas 获取命令: get/gets 其他命令: delete/stats.. add方法 添加一条 ...

  9. PFM 图片格式

    PFM  图片格式 参考:   https://linux.die.net/man/5/pfm 1. 描述 本文档描述了Netpbm转换器pamtopfm(1)和pfmtopam(1)所理解的PFM图 ...

  10. git多账号切换

    修改: git config --global user.name "Your_Username" git config --global user.email username@ ...