<!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. 判断网页打开浏览器类型，PC 手机端，微信浏览器，，，

    //判断网页打开浏览器类型,PC 手机端,微信浏览器,,, <script type="text/javascript"> var browser = { versio ...

  2. 洛谷 P2661信息传递

    图论——>并查集 P2661 本蒟蒻啥也不会 这题还WA了1次 =  = 最后看题解A 哭了 看题是多个(N<=200000)东西之间的关系维护 果断想到并查集 在第i个位置的a[i] 表 ...

  3. ZXX43大神实现的软渲染

    https://github.com/zxx43/Software-Render http://blog.csdn.net/zxx43/article/details/46755247 http:// ...

  4. 如何搭建并使用便携式 4G/LTE 伪基站研究移动安全

    此文章PDF文档下载地址:点击下载 0x00 前言 在移动互联网深入普及和物联网开始规模应用的今天,网络安全公司怎能不研究移动安全,要研究移动安全,怎能没有4G/LTE伪基站研究测试环境? 本文介绍如 ...

  5. 将100道计算题输出至txt文件，再读取文件至控制台,在控制台中输入答案并评判对错

    我在课堂上基本完成了输出100道题和创建文档,但是因为对输入输出流不熟悉,所以并没有实现将输出的计算题导出到文档里,在课下我又请教了宿舍的大佬,基本完成如下: 源代码: import java.io. ...

  6. python基础--字符串

    字符串 1.形式 单引号括起来的字符串:'hello' 双引号括起来的字符串:"Hello" 三引号括起来的字符串:'''hello'''(三单引号),""&q ...

  7. php7之严格模式RFC

    首先需要开启严格模式: declare(strict_types = ); 严格模式下,形参和返回值可加限制.对返回值的限制需要在参数的()后面加上引号加类型限制即可,例: function demo ...

  8. 常用解压包命令----tar--rar

    systemctl stop firewalld    --关闭 linux服务器防火墙 1.*.tar 用 tar –xvf 解压  2.*.gz 用 gzip -d或者gunzip 解压 3.*. ...

  9. css颜色属性及设置颜色的地方

    css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...

  10. vue 15分钟倒计时

    HTML: <span>{{minute}}:{{second}}</span> script: 一          二 // 倒计时 num(n) { return n & ...